WPF容器

最新推荐文章于 2025-03-13 14:39:06 发布

32456y

最新推荐文章于 2025-03-13 14:39:06 发布

阅读量206

点赞数 1

分类专栏： WPF 文章标签： wpf

本文链接：https://blog.youkuaiyun.com/m0_44963654/article/details/129130642

版权

WPF 专栏收录该内容

10 篇文章

订阅专栏

Grid容器

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
		
        <Grid.RowDefinitions>
            <!--  Height="2*":当前行是其它行的2倍 -->
            <!--  Height="auto":当前行为自适应高度，如果没有指定高度，当前行为0 -->
            <!--  Height="100":当前行为设定高度-->
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        
         <!-- Grid.RowSpan="2":占用多行，从第1行开始-->
        <Border Background="Blue" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" ></Border>
		<!-- Grid.ColumnSpan="2":占用多列，从第1列开始-->
        <Border Background="Green"  Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"></Border>
        <Border Background="Yellow"  Grid.Row="1"  Grid.Column="0"></Border>
        <Border Background="Red"  Grid.Row="1" Grid.Column="1" ></Border>
</Grid>

在这里插入图片描述

StackPanel容器

StackPanel :默认垂直方向排列，只能一个方向排列，排不下不会换行

<StackPanel Orientation="Horizontal">
        <Button Background="Blue" Height="100" Width="120"></Button>
        <Button Background="Blue" Height="100" Width="120"></Button>
        <Button Background="Blue" Height="100" Width="120"></Button>
        <Button Background="Blue" Height="100" Width="120"></Button>
        <Button Background="Blue" Height="100" Width="120"></Button>
</StackPanel>

在这里插入图片描述

WrapPanel容器

WrapPanel: 默认水平方向排列，排不下会换一行排列

<WrapPanel Orientation="Horizontal">
        <Button Height="100" Width="120"></Button>
        <Button Height="100" Width="120"></Button>
        <Button Height="100" Width="120"></Button>
        <Button Height="100" Width="120"></Button>
        <Button Height="100" Width="120"></Button>
</WrapPanel>

在这里插入图片描述

DockPanel容器

LastChildFill:最后一个元素是否填充剩余空间

<DockPanel LastChildFill="False" >
        <!--DockPanel.Dock:该属性继承自DcokPanel，只有在DockPanel容器里才有这个属性，其它标签也有类似属性 -->
        <!--DockPanel.Dock:设置控件的停靠位置 -->
        <Button Height="100" Width="80" DockPanel.Dock="Bottom"></Button>
        <Button Height="100" Width="80" DockPanel.Dock="Top"></Button>
        <Button Height="100" Width="80" DockPanel.Dock="Left"></Button>
        <Button Height="100" Width="80" DockPanel.Dock="Right"></Button>
</DockPanel>

在这里插入图片描述

案例

<!-- 第一层Grid-->
<Grid>
	<!-- 2行1列 -->
	<Grid.RowDefinitions>
		<RowDefinition Height="100"></RowDefinition>
		<RowDefinition></RowDefinition>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition></ColumnDefinition>
	</Grid.ColumnDefinitions>
	<!-- 标题头部 -->
	<Grid Grid.Row="0" Grid.Column="0">
		<Border Background="Blue"></Border>
	</Grid>

	<!-- Body内容体 -->
	<Grid Grid.Row="1" Grid.Column="0">
		<Grid.RowDefinitions>
			<RowDefinition></RowDefinition>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="100"></ColumnDefinition>
			<ColumnDefinition></ColumnDefinition>
		</Grid.ColumnDefinitions>
		<!-- 左边导航栏 -->
		<Grid Grid.Row="0" Grid.Column="0">
			<Border Background="LightBlue" ></Border>
		</Grid>

		<!-- 右边内容体 -->
		<Grid Grid.Row="0" Grid.Column="1">
			<Grid.RowDefinitions>
				<RowDefinition Height="0.8*"></RowDefinition>
				<RowDefinition></RowDefinition>
				<RowDefinition></RowDefinition>
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition></ColumnDefinition>
				<ColumnDefinition></ColumnDefinition>
				<ColumnDefinition></ColumnDefinition>
				<ColumnDefinition></ColumnDefinition>
				<ColumnDefinition></ColumnDefinition>
			</Grid.ColumnDefinitions>
			<!-- 第一行 5个小方格 -->
			<Border Background="Gray" Grid.Row="0" Grid.Column="0"></Border>
			<Border Background="LightCoral" Grid.Row="0" Grid.Column="1"></Border>
			<Border Background="LightCyan" Grid.Row="0" Grid.Column="2"></Border>
			<Border Background="LightGray" Grid.Row="0" Grid.Column="3"></Border>
			<Border Background="LightBlue" Grid.Row="0" Grid.Column="4"></Border>
			<!-- 第二行  -->
			<Border Background="LightBlue" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"></Border>
			<Border Background="LightCoral" Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2"></Border>

			<!-- 第三行  -->
			<Border Background="Gray" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"></Border>
			<Border Background="LightGray" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2"></Border>
		</Grid>
	</Grid>
</Grid>

在这里插入图片描述