WPF用于UI布局的面板

WPF用于UI布局的面板

开发工具与关键技术：WPF架构、.NET、Visual Studio
友好的用户界面和良好的用户体验离不开设计精良的布局，布局是静态的，用户体验就是用户在这动静之中与软件功能产生交互式的感受。合理的元素布局至关重要，它可以方便用户使用，并将信息清晰合理地展现给用户。
WPF用于布局的面板主要有6个，XAML常用五个布局元素与实例：
Grid：网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table。
XAML代码：

<Grid ShowGridLines="True">
        <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0">Top Left</Button>
        <Button Grid.Row="0" Grid.Column="1">Middle Left</Button>
        <Button Grid.Row="1" Grid.Column="2">Button Right</Button>
        <Button Grid.Row="1" Grid.Column="1">Button Middle</Button>
</Grid>

运行效果图：

StackPanel：栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。
XAML代码：

<StackPanel x:Name="stackpanel" Margin="0" Orientation="Vertical">
         <Button Content="第一个"></Button>
         <Button Content="第二个"></Button>
         <Button Content="第三个"></Button>
         <Button Content="第四个"></Button>
</StackPanel>

运行效果图：

Canvas：画布。内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form 的布局方式。
XAML代码：

<Canvas>
    <TextBox Width="100" BorderBrush="Blue"></TextBox>
    <TextBox Canvas.Left="200" Canvas.Top="50" Width="100" BorderBrush="Green"></TextBox>
    <Button Height="20" Canvas.Right="10" Canvas.Bottom="10" Content="按钮"></Button>
</Canvas>

运行效果图：

DockPanel：泊靠式面板。内部元素可以选择泊靠的方向（上下左右），类似于Winform中设置控件的Dock属性。
XAML代码：

<DockPanel>
    <Button DockPanel.Dock="Left" Content="ButtonLeft"></Button>
    <Button DockPanel.Dock="Top" Content="ButtonTop"></Button>
    <Button DockPanel.Dock="Right" Content="ButtonRight"></Button>
    <Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button>
    <Button  Content="ButtonTop"></Button>
</DockPanel>

运行效果图：

WrapPanel：自动折行面板。内部元素在排满一行后能够自动折行，类似于Html中的流式布局。
XAML代码：

<WrapPanel Orientation="Horizontal">
         <Button Width="100">按钮1</Button>
         <Button Width="100">按钮2</Button>
         <Button Width="100">按钮3</Button>
         <Button Width="100">按钮4</Button>
         <Button Width="100">按钮5</Button>
         <Button Width="100">按钮6</Button>
</WrapPanel>

运行效果图：