页面布局:指的是子控件的大小,位置的控制。
StackPanel:把子元素按横向或纵向的顺序进行排列。窗体缩小控件跟着缩小。其中的一个属性控制横向还是纵向排列-Orientation。
<Window x:Class="页面布局.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="586.604" Width="762.313">
<Grid>
<!--Orientation属性控制横向还是纵向排列。Vertical指横向-->
<StackPanel Orientation="Vertical">
<Button Content="1"></Button>
<Button Content="2"></Button>
<TextBox Text="xiao"></TextBox>
</StackPanel>
</Grid>
</Window>
图示:
wrapPanel:将各个控件按照行或列的顺序摞列,当长度或高度不够是就会自动调整换列或行。
<Window x:Class="页面布局.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="586.604" Width="762.313">
<Grid>
<WrapPanel>
<Button Content="1" Width="163"></Button>
<Button Content="2" Width="197"></Button>
<TextBox Text="xiao" Width="199"></TextBox>
</WrapPanel>
</Grid>
</Window>
图示:
Grid:顾名思义网格,用ColumnDefinitions和RowDefinitions可以设计好多小格,把子控件放在里面。
<Window x:Class="页面布局.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="586.604" Width="762.313">
<Grid>
<Grid>
<!--定义表格的列数,3列-->
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!--定义表格的行数,3行-->
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<!--往空格里放控件,Grid.Row="1" Grid.Column="1"表示把button按钮放在第二行第二列(从0开始算)-->
<Button Grid.Row="1" Grid.Column="1"></Button>
</Grid>
</Grid>
</Window>
图示:
对于写前台界面来说,布局很重要。学会布局就相当于教会我们怎样设计前台的架构。