wpf布局之grid/stackpanel/Canvas

wpf为我们提供了一套界面展示的规范，类似的和html一样在wpf中提供了基础的结构语言，来展示界面，这里介绍三种基础的布局方法：grid/stackpanel/Canvas

 

1.grid:名字就很明显了，类似于html中的表格（固定的语法结构，呈现固定的样子），通过Grid.RowDefinitions和Grid.ColumnDefinitions自由定义行和列，然后通过 Grid. Column 和 Grid. Row来在特定的单元格中定位对象。

使用场景：一般用于整体界面的框架布局

说的多不如给一个例子：

我们要做一个表单，如下图：

基本上是一个很规范的布局，我们选择grid布局：

具体代码如下：

<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="120"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
                <ColumnDefinition Width="60" />
                <ColumnDefinition Width="90" />
                <ColumnDefinition Width="300" />
                <ColumnDefinition Width="90" />
                <ColumnDefinition Width="300" />
                <ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>  
<!-- 第1行-->
            <TextBlock Grid.Row="0" Grid.Column="1" Text="姓       名"   Style="{StaticResource UserInfoTextBlockStyle}"></TextBlock> 
            <TextBox x:Name="main_userInfo_name_tbx" Grid.Row="1" Grid.Column="2"  Style="{StaticResource UserInfoTextBoxStyle}"></TextBox>
            <TextBlock Grid.Row="0" Grid.Column="3"  Text="手机号码"   Style="{StaticResource UserInfoTextBlockStyle}" ></TextBlock>
            <TextBox x:Name="main_userInfo_phoneNO_tbx" Grid.Row="1" Grid.Column="4" Style="{StaticResource UserInfoTextBoxStyle}"></TextBox>

            <!-- 第2行-->
            <TextBlock Grid.Row="1" Grid.Column="1"  Text="所属区域" Style="{StaticResource UserInfoTextBlockStyle}"></TextBlock>
            <ComboBox x:Name="user_city_ComboBox" Grid.Row="1" Grid.Column="2"  Style="{StaticResource UserInfoComboBoxStyle}"
                      HorizontalAlignment="Left" PreviewTextInput="user_city_ComboBox_PreviewTextInput" 
                      PreviewKeyDown="user_city_ComboBox_PreviewKeyDown"                     
                      SelectionChanged="user_city_ComboBox_SelectionChanged" IsEditable="True" InputMethod.IsInputMethodEnabled="False">
                
            </ComboBox>
            <TextBlock Grid.Row="1" Grid.Column="3" Text="所属公司" Style="{StaticResource UserInfoTextBlockStyle}"></TextBlock>
            <ComboBox x:Name="user_country_ComboBox" Grid.Row="1" Grid.Column="4" 
                      Style="{StaticResource UserInfoComboBoxStyle}" HorizontalAlignment="Left"  IsEditable="True" 
                      PreviewTextInput="user_country_ComboBox_PreviewTextInput" PreviewKeyDown="user_country_ComboBox_PreviewKeyDown">
            </ComboBox>
            <!-- 第3行-->
            <TextBlock Grid.Row="2" Grid.Column="1"  Text="宽带账号" Style="{StaticResource UserInfoTextBlockStyle}"></TextBlock>
            <TextBox x:Name="main_userInfo_bandaccount_tbx" Grid.Row="2" Grid.Column="2" Style="{StaticResource UserInfoTextBoxStyle}"></TextBox>
            <TextBlock Grid.Row="2" Grid.Column="3" Text="宽带套餐" Style="{StaticResource UserInfoTextBlockStyle}" ></TextBlock>
            <ComboBox x:Name="user_bandpackage_cbx"  Grid.Row="2" Grid.Column="4" IsEditable="True"
                      SelectedIndex="0"  Style="{StaticResource UserInfoComboBoxStyle}"  
                      Width="250" Height="30" HorizontalAlignment="Left" PreviewTextInput="user_bandpackage_cbx_PreviewTextInput" PreviewKeyDown="user_bandpackage_cbx_PreviewKeyDown"
                      ></ComboBox>
            <!-- 第4行-->
            <TextBlock Grid.Row="3" Grid.Column="1"  Text="测试地址" Style="{StaticResource UserInfoTextBlockStyle}"></TextBlock>
            <TextBox x:Name="main_userInfo_address_tbx" Grid.Row="3" Grid.Column="2" Style="{StaticResource UserInfoTextBoxStyle}"></TextBox>
            <TextBlock Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="3" Text="注意：请填写小区详细地址" 
                       Foreground="Red"  Style="{StaticResource UserInfoTextBlockStyle}" HorizontalAlignment="Left" VerticalAlignment="Center"></TextBlock>
            <!-- 第5行-->
            <TextBlock Grid.Row="4" Grid.Column="1" Text="备       注" Style="{StaticResource UserInfoTextBlockStyle}"></TextBlock>
            <TextBox x:Name="main_userInfo_remark_tbx" Grid.Row="4" Grid.Column="2" Grid.ColumnSpan="3"  
                     Style="{StaticResource main_userInfo_remark_tbx}" Width="645" HorizontalAlignment="Left"></TextBox>   
</Grid>

 

2.stackpanel:看名字stack有“栈”的意思，这种布局里面的元素是一个挨着一个排列，按水平或者垂直方向排成一行（列）

适用场景：一般结合其他控件使用，用在局部布局

实例：这里想做一个横幅，类似下图：

分析：明显的要分成三个部分：信息，配置，一条黑线，它们依次紧凑排列，这里就适合使用stackpanel布局，代码如下：

<StackPanel Orientation="Horizontal"  VerticalAlignment="Bottom" Margin="0,0,0,20">
                <TextBlock Text="信息" Foreground="#FF34879E" ></TextBlock>
                <TextBlock Text="配置" Foreground="#FF333333" ></TextBlock>
                <Rectangle Height="1" Width="600" Margin="20,0,0,0" Fill="#8F666666" SnapsToDevicePixels="True" RenderOptions.EdgeMode="Aliased" />
</StackPanel>    

 

3.canvas：但看英文是“油画”的意思，这里可以理解为“画布”，这里定义了一个区域，允许你是用相对于该区域的明确的数字坐标来精准定位元素，可以使用

Canvas.Left:设置它到它的父控件(Canvas)左边界的距离，

Canvas.Top:设置它到它的父控件上边界的距离

Canvas.ZIndex:表示 Canvas 中对象的 z 顺序的值。说白了就是“绝对定位”

来个简单的例子：

想实现这种绝对定位的重合，就适合用canvas布局

代码如下：

<Canvas Margin="0,0,0,0" Background="White">

            <Rectangle Fill="Blue" 

                Stroke="Azure" 

                Width="250" 

                Height="200" 

                Canvas.Left="210" Canvas.Top="101"/>

            <Ellipse Fill="Red" 

                Stroke="Green" 

                Width="250" Height="100" 

                Panel.ZIndex="1" 

                Canvas.Left="65" Canvas.Top="45"/>

</Canvas>

至此，三种布局就介绍完了，下面讲具体实践，敬请期待！