WPF真入门教程09--UI布局6

最新推荐文章于 2024-07-25 13:32:22 发布

hqwest

最新推荐文章于 2024-07-25 13:32:22 发布

阅读量686

点赞数

分类专栏： WPF真入门教程文章标签： wpf ui

本文链接：https://blog.csdn.net/hqwest/article/details/128247347

版权

WPF真入门教程专栏收录该内容

34 篇文章 160 订阅

订阅专栏

这节来学习Grid控件，这个内容有些多，也比较细致，Grid网格布局，

Grid顾名思义就是“网格”，以表格形式布局元素，对于整个面板上的元素进行布局，它的子控件被放在一个一个事先定义好的小格子里面，整齐配列。 Grid和其他各个Panel比较起来，功能最多也最为复杂。要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素，从而定义行数和列数。而放置在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列，这两个属性的值都是从0开始的索引数，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。由于Grid的组成并非简单的添加属性标记来区分行列，这也使得用户在实际应用中可以具体到某一单元格中，所以布局起来就很精细了。列宽和行高，分别可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。

Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。与Canvas一样，同一个单元格中的子元素不会与其他元素交互布局，信息——它们仅仅是重叠而已。

Grid面板将元素分割到不可见的行列网格中。尽管可以在一个单元格中放置多个元素（这时这些元素会相互重叠），但在每个单元格中只放置一个元素通常更合理。当然，在Grid单元格中的元素本身也可能是另一个容器，该容器组织它所包含的一组控件。

注意：尽管Grid面板被设计成不可见的，但可将Grid.ShowGridLines属性设置为True，从而更清晰的观察Grid面板，方便调试，可以更准确地控制Grid面板如何选择列宽和行高。

演示代码如下：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Background="{DynamicResource {x:Static SystemColors.HotTrackBrushKey}}" Margin="50,50,50,50">
        <Button Content="Button" HorizontalAlignment="Left" Margin="50,41,0,0" VerticalAlignment="Top" Width="242" Height="104"/>
    </Grid>
</Window>

1、Grid的列宽与行高可采用固定、自动、按比例，三种方式定义

操作方式如下：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="300" />
    </Grid.ColumnDefinitions>
</Grid>

注意：这里介绍一下Grid高度、宽度的几种定义方式

名称	说明
绝对尺寸	就是给一个实际的数字，但通常将此值指定为整数，像上图中中那样
自动(Autosizing)	值为Auto，实际作用就是取实际控件所需的最小值
StarSizing	值为或N，实际作用就是取尽可能大的值，当某一列或行被定义为则是尽可能大，当出现多列或行被定义为则是代表几者之间按比例方设置尺寸

第一种，固定长度——宽度不够，会裁剪，不好用。单位pixel。

第二种，自动长度——自动匹配列中最长元素的宽度。

第三种，比例长度——*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；像上面的一个2*，一个*，表示前者2/3宽度。

2、跨越多行和多列

<Rectangle Fill="Silver" Grid.Column="1" Grid.ColumnSpan="3"/>

Rectangle，画一个矩形，然后使用Grid.ColumnSpan和Grid.RowSpan附加属性可以让相互间隔的行列合并，所以元素也可以跨越多个单元格

3、使用GridSplitter分割窗口

使用GridSplitter控件结合Grid控件实现类似于WinForm中SplitContainer的功能。演示代码如下

<Grid ShowGridLines="True" Margin="0,0,0,1">
    <Grid.RowDefinitions>
        <RowDefinition ></RowDefinition>
        <RowDefinition ></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="50"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Margin="5">Left</Button>
    <Button Grid.Row="0" Grid.Column="2" Margin="5">Right</Button>
    <Button Grid.Row="1" Grid.Column="0" Margin="5">Left</Button>
    <Button Grid.Row="1" Grid.Column="2" Margin="5">Right</Button>

    <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="30" VerticalAlignment="Stretch"
                  HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
</Grid>

介绍了上面的知识后，来做个记录，在xaml文件中添加2个Grid，完整代码是：

<Window x:Class="WpfApp6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp6"
        mc:Ignorable="d"
        Title="WPF基础控件" Height="758.275" Width="1078.5" Icon="images/22i.jpg" WindowStartupLocation="CenterScreen"  Loaded="Window_Loaded">
    <Grid Name="mygrid" >

        <Button Name="btnlogin"  IsDefault="True" Click="btnlogin_Click" Background="YellowGreen" BorderThickness="3"  BorderBrush="Red" Content="登录"  HorizontalAlignment="Left" Margin="166,95,0,0" VerticalAlignment="Top" Width="74" RenderTransformOrigin="-0.2,0.368"/>
        <Label Content="帐号" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="54,23,0,0" VerticalAlignment="Top" Width="102"/>
        <TextBox Name="txtname" HorizontalAlignment="Left" Height="23" Margin="142,23,0,0" TextWrapping="Wrap" Text="admin" VerticalAlignment="Top" Width="120"/>
        <Label Content="密码" HorizontalAlignment="Left" Margin="276,23,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.088,0.6"/>
        <PasswordBox Name="txtpass" HorizontalAlignment="Left" Height="22" Margin="330,23,0,0"  Password="123456" PasswordChar="#" VerticalAlignment="Top" Width="120"/>
        <Button Name="btncancle" IsCancel="True" Foreground="Chartreuse"  FontSize="14" Click="btncancle_Click" Content="取消" HorizontalAlignment="Left" Margin="266,95,0,0" VerticalAlignment="Top" Width="74">
            <Button.Background>
                <ImageBrush  ImageSource="images/32s.jpg"></ImageBrush>
            </Button.Background>
        </Button>
        <RadioButton Content="老师"  GroupName="role" HorizontalAlignment="Left" Margin="156,65,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked"/>
        <RadioButton Content="学生"  GroupName="role" HorizontalAlignment="Left" Margin="230,65,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.14,0.357" Checked="RadioButton_Checked"/>
        <RadioButton Content="管理员"   GroupName="role" HorizontalAlignment="Left" Margin="303,65,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked"/>
        <!-- IsThreeState属性指定 ToggleButton 是否有两种或三种状态:true,false,null,即选中 、清除 和不确定-->
        <CheckBox Content="汽车" Name="chkexcel" IsChecked="True" IsThreeState="True"  HorizontalAlignment="Left" Margin="45,138,0,0" VerticalAlignment="Top"/>
        <CheckBox Content="阅读"   HorizontalAlignment="Left" Margin="118,138,0,0" VerticalAlignment="Top"/>
        <CheckBox Content="唱歌" HorizontalAlignment="Left" Margin="181,138,0,0" VerticalAlignment="Top"/>
        <CheckBox Content="体育" HorizontalAlignment="Left" Margin="241,138,0,0" VerticalAlignment="Top"/>
        <Button Content="获取复选框" HorizontalAlignment="Left" Margin="301,135,0,0" VerticalAlignment="Top" Width="91" Click="Button_Click"/>
        <Button Content="创建复选框" HorizontalAlignment="Left" Margin="409,134,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
        <!--Image图片控件，Stretch指定拉伸模式 -->
        <Image HorizontalAlignment="Left"  Name="myimg" Height="83" Margin="45,184,0,0" VerticalAlignment="Top" Width="85" Source="images/6p.jpg" Stretch="Fill" RenderTransformOrigin="0.541,0.157"/>
        <Button Content="相对替换" HorizontalAlignment="Left" Margin="152,187,0,0" VerticalAlignment="Top" Width="69" Height="32" Click="Button_Click_2"/>
        <Button Content="绝对替换" HorizontalAlignment="Left" Margin="152,240,0,0" VerticalAlignment="Top" Width="69" Height="28" RenderTransformOrigin="0.536,0.815" Click="Button_Click_3"/>
        <!-- Border边框控件，与布局面板一起使用，里面只能有一个子元素，BorderThickness边框粗细，BorderBrush边框颜色，CornerRadius圆角大小，Background背景色-->
        <Border BorderBrush="red" BorderThickness="3" HorizontalAlignment="Left" Height="32" Margin="266,184,0,0" VerticalAlignment="Top" Width="100">
            <Label Content="我有边框" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
        <Border BorderBrush="BlueViolet" BorderThickness="5" CornerRadius="9" Background="Bisque" HorizontalAlignment="Left" Height="38" Margin="266,229,0,0" VerticalAlignment="Top" Width="100">
            <Label Content="我有圆角" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="16,1,16,3"/>
        </Border>
        <!--ComboBox下拉框，IsDropDownOpen指定是否展开，默认不展开 -->
        <ComboBox HorizontalAlignment="Left" Name="hecbm" IsDropDownOpen="False" Margin="403,187,0,0" VerticalAlignment="Top" Width="81" Height="22">
            <ComboBoxItem Content="请选择" IsSelected="True" Background="#FF26D365"/>
            <ComboBoxItem Content="亚洲"/>
            <ComboBoxItem Content="非洲"/>
            <ComboBoxItem Content="欧洲"/>
        </ComboBox>
        <ComboBox Name="mycbm" HorizontalAlignment="Left" Margin="403,241,0,0" VerticalAlignment="Top" Width="81" Height="27" RenderTransformOrigin="0.247,0.481"/>
        <ListBox HorizontalAlignment="Left" Height="95" Margin="45,290,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.21,0.484">
            <ListBoxItem Content="茶杯" IsSelected="True"/>
            <ListBoxItem Content="茶叶"/>
            <ListBoxItem Content="茶水"/>
            <ListBoxItem Content="茶桌"/>
        </ListBox>
        <ListBox Name="mylist" HorizontalAlignment="Left" Height="95" Margin="166,290,0,0" VerticalAlignment="Top" Width="100"/>
        <!-- DatePicker日期控件-->
        <DatePicker Focusable="False"  HorizontalAlignment="Left"  Margin="301,290,0,0" VerticalAlignment="Top" Width="106" SelectedDateFormat="Long" />
        <!--Slider 滑动控件，Orientation刻度方向(默认水平)，TickPlacement刻度位置（默认没有）：both/left/right/none，TickFrequency刻度间隔，IsSnapToTickEnabled表示数值变化形式(true代表整形，false代表浮点)-->
        <Slider Name="sd1" HorizontalAlignment="Left" Margin="303,327,0,0" TickPlacement="Both" TickFrequency="1" IsSnapToTickEnabled="true" Maximum="100" Minimum="1" Value="1" VerticalAlignment="Top" Width="104"/>
        <!--Label控件， Content指定内容：Binding绑定，ElementName绑定控件名称，Path绑定控件的value值，Mode=OneWay指单向影响-->
        <Label Content="当前值：" HorizontalAlignment="Left" Margin="304,362,0,0" VerticalAlignment="Top"/>
        <Label Content="{Binding ElementName=sd1,Path=Value,Mode=OneWay}" Name="mylbl" HorizontalAlignment="Left" Margin="360,362,0,0" VerticalAlignment="Top" Width="47"/>
        <Slider HorizontalAlignment="Left" Name="sd2" Margin="421,282,0,0" TickPlacement="BottomRight" TickFrequency="5"  Orientation="Vertical" Maximum="100" Minimum="1" Value="10" VerticalAlignment="Top" Height="103" Width="33" Background="#FFCCFB2D" BorderBrush="#FF4118B0"/>
        <!--TextBlock文字块 -->
        <TextBlock FontSize="{Binding ElementName=sd2,Path=Value,Mode=OneWay}"  HorizontalAlignment="Left"  Margin="459,290,0,0" TextWrapping="Wrap" Text="看我" VerticalAlignment="Top" Height="86" Width="61"/>
        <!--ProgressBar进度条:Orientation方向（Horizontal/Vertical，水平/垂直）,IsIndeterminate指定连续进度 -->
        <ProgressBar  Orientation="Horizontal"  IsIndeterminate="true" Value="30"  HorizontalAlignment="Left" Height="18" Margin="48,394,0,0" VerticalAlignment="Top" Width="327"/>
        <ProgressBar Name="ps2"  Orientation="Vertical" Value="0" Minimum="0" Maximum="120" HorizontalAlignment="Left" Height="149" Margin="402,394,0,0" VerticalAlignment="Top" Width="29"/>
        <Button Content="加载进度" HorizontalAlignment="Left" Margin="441,434,0,0" VerticalAlignment="Top" Width="60" Click="Button_Click_4"/>
        <Label Content="当前:" HorizontalAlignment="Left" Margin="438,469,0,0" VerticalAlignment="Top"/>
        <Label Content="" Name="ps2lbl" HorizontalAlignment="Left" Margin="474,469,0,0" VerticalAlignment="Top"/>
        <!--StackPanel堆栈布局控件，默认对齐是垂直方向 -->
        <Label Content="堆积面板 (StackPanel)" HorizontalAlignment="Left" Margin="54,422,0,0" VerticalAlignment="Top" RenderTransformOrigin="-3.825,0.04"/>
        <StackPanel HorizontalAlignment="Left" Height="109" Cursor="ArrowCD" Margin="56,446,0,0" VerticalAlignment="Top" Width="143">
            <Button>吉利</Button>
            <Button>长城</Button>
            <Button Margin="0,2,0,2">奇瑞</Button>
            <Button>红旗</Button>
            <Button>比亚迪</Button>
        </StackPanel>
        <Border BorderBrush="Crimson"  BorderThickness="1" HorizontalAlignment="Left" Height="92" Margin="219,450,0,0" VerticalAlignment="Top" Width="154">
            <StackPanel Margin="0,0,0,0" Orientation="Horizontal" >
                <Button Margin="5,0,5,0" Background="#FFA6C321">华山</Button>
                <Button Margin="5,0,5,0">峨眉</Button>
                <Button Margin="5,0,5,0">
                    <Button.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black" Offset="0"/>
                            <GradientStop Color="#FFF7F0EA" Offset="1"/>
                        </LinearGradientBrush>
                    </Button.Background> 昆山
                </Button>
                <Button Margin="5,0,5,0">武当</Button>
            </StackPanel>
        </Border>
        <Label Content="换行面板 (WrapPanel)" HorizontalAlignment="Left" Margin="54,555,0,0" VerticalAlignment="Top"/>
        <!--WrapPanel流布局控件，默认对齐是垂直方向,Orientation元素布局方式 -->
        <Border BorderBrush="red"  BorderThickness="4" CornerRadius="12" Margin="56,560,569,26" Height="100">
            <WrapPanel Orientation="Horizontal" ItemHeight="30" ItemWidth="40" Margin="0,0,0,22"  >
                <Button Content="海王星"/>
                <Button Content="海王星"/>
                <Button Content="海王星"/>
                <Button Content="海王星"/>
                <Button Content="海王星"/>
                <Button Content="海王星"/>
                <Button Content="海王星"/>
                <Button Content="海王星"/>
                <Button Content="海王星"/>
                <Button Content="海王星"/>
                <Button Content="森林星"/>
                <Button Content="森林星"/>
                <Button Content="森林星"/>
                <Button Content="森林星"/>
                <Button Content="森林星"/>
                <Button Content="森林星"/>
                <Button Content="森林星"/>
                <Button Content="森林星"/>
            </WrapPanel>
        </Border>
        <Label Content="表格式面板 (Grid)" HorizontalAlignment="Left" Margin="584,27,0,0" VerticalAlignment="Top"/>
        <Grid HorizontalAlignment="Left" Height="171" Margin="584,48,0,0"  VerticalAlignment="Top" Width="464" >
            <!--RowDefinitions 设置行:3行-->
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <!--RowDefinitions 设置列:3列-->
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <!--Row 的值表示行坐标，Column 的值表示列坐标-->
            <Button Grid.Row="0" Grid.Column="0">A1</Button>
            <Button Grid.Row="0" Grid.Column="1">A2</Button>
            <Button Grid.Row="0" Grid.Column="2">A3</Button>
            <Button Grid.Row="1" Grid.Column="0">A4</Button>
            <Button Grid.Row="1" Grid.Column="1">A5</Button>
            <Button Grid.Row="1" Grid.Column="2">A6</Button>
            <Button Grid.Row="2" Grid.Column="0">A7</Button>
            <Button Grid.Row="2" Grid.Column="1">A8</Button>
            <Button Grid.Row="2" Grid.Column="2">A9</Button>
        </Grid>
        <Label Content="表格式面板 (Grid)元素跨行设置 (RowSpan/ColumnSpan)" HorizontalAlignment="Left" Margin="592,248,0,0" VerticalAlignment="Top"/>
        <Grid HorizontalAlignment="Left" Height="100" Margin="603,282,0,0" VerticalAlignment="Top" Width="445">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <!--绿色的RowSpan跨2行-->
            <Rectangle  Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Fill="Green" />
            <!--黄色的RowSpan跨2行，ColumnSpan跨2列-->
            <Rectangle Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Yellow" />
            <!--红色的ColumnSpan跨2列-->
            <Rectangle Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Fill="Red" />
            <!--兰色的不跨行和列，位于第3行第3列-->
            <Rectangle Grid.Row="2" Grid.Column="2"   Fill="Blue" />
        </Grid>  
    </Grid>
</Window>

运行程序，效果显示如图：

小结

Grid控件常用于界面表格网格的布局，Grid和其他各个Panel比较起来，功能最多也最为复杂。同时此面板可承载任意元素，包括控件，图形，甚至文字。各种元素依据屏幕坐标确定位置。在WPF创建的是系统默认的布局是Grid布局。可以看到，功能全面，使用简单的Grid是布局控件中的瑞士军力。

振作精神，迎接挑战，开创未来，再战佳绩。

hqwest

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
WPF真入门教程09--UI布局6

在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列，这两个属性的值都是从0开始的索引数，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。注意：尽管Grid面板被设计成不可见的，但可将Grid.ShowGridLines属性设置为True，从而更清晰的观察Grid面板，方便调试，可以更准确地控制Grid面板如何选择列宽和行高。
复制链接

扫一扫