当前位置：首页 > news >正文

WPF入门 #1 WPF布局基础、WPF样式基础、WPF控件模板、WPF数据模板

news 来源：原创 2025/6/19 18:34:19

WPF当中有许多的布局容器控件，例如<Grid>、<StackPanel>、<WrapPanel>、<DockPanel>、<UniformGrid>。接下来分别介绍一下各个布局容器控件。

Grid

<Grid><Grid.RowDefinitions><RowDefinition Height="2*"/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="2*"/><ColumnDefinition/></Grid.ColumnDefinitions><Border Grid.Row="0" Grid.Column="0" Background="Red"/><Border Grid.Row="0" Grid.Column="1" Background="Yellow"/><Border Grid.Row="1" Grid.Column="0" Background="Blue"/><Border Grid.Row="1" Grid.Column="1" Background="Green"/>
</Grid>

Grid中的元素还可以跨行和跨列：

StackPanel

StackPanel默认水平排列，具有 Orientation=""属性可以改变排列方向。

WrapPanel

WrapPanel默认水平排列，也具有 Orientation=""属性可以改变排列方向。

DockPanel

DockPanel具有停靠的功能，位于DockPanel中的元素，可以设置它的方向。

UniformGrid

这个容器最大的作用就是在有限的空间里面均分剩余空间。

下面对一个页面进行布局模拟练习：

<Grid><Grid.RowDefinitions><RowDefinition Height="80"/><RowDefinition/></Grid.RowDefinitions><Border Background="#FFECF1"/><Grid Grid.Row="1"><Grid.ColumnDefinitions><ColumnDefinition Width="200"/><ColumnDefinition/></Grid.ColumnDefinitions><Border Background="#FF7F24"/><Grid Grid.Column="1" Margin="5"><Grid.RowDefinitions><RowDefinition Height="100"/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid Grid.Row="0"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Border Margin="5" Grid.Column="0" Background="#1b1c1d"/><Border Margin="5" Grid.Column="1" Background="#2AC864"/><Border Margin="5" Grid.Column="2" Background="#1b1c1d"/><Border Margin="5" Grid.Column="3" Background="#F85A54"/><Border Margin="5" Grid.Column="4" Background="#1b1c1d"/></Grid><Grid Grid.Row="1"><Grid.ColumnDefinitions><ColumnDefinition Width="1.5*"/><ColumnDefinition/></Grid.ColumnDefinitions><Border Margin="5" Grid.Column="0" Background="#1b1c1d"/><Border Margin="5" Grid.Column="1" Background="#2AC864"/></Grid><Grid Grid.Row="2"><Grid.ColumnDefinitions><ColumnDefinition Width="1.5*"/><ColumnDefinition/></Grid.ColumnDefinitions><Border Margin="5" Grid.Column="0" Background="#1b1c1d"/><Border Margin="5" Grid.Column="1" Background="#F85A54"/></Grid></Grid></Grid>
</Grid>

样式基础

样式负责修饰元素的外观以及行为，可以在样式中定义不同类型元素的属性值集合。

<Window.Resources><Style x:Key="BaseStyle" TargetType="Button"><Setter Property="FontSize" Value="18"/><Setter Property="Foreground" Value="White"/><Setter Property="Background" Value="Red"/></Style><Style x:Key="BottonStyle" TargetType="Button" BasedOn="{StaticResource BaseStyle}"><Setter Property="Content" Value="Botton1"/></Style>
</Window.Resources>
<Grid><StackPanel><Button Background="Blue" Style="{StaticResource BottonStyle}"/><Button Style="{StaticResource BottonStyle}"/><Button Style="{StaticResource BottonStyle}"/></StackPanel>
</Grid>