认识WPF布局容器,首先就要明白其出现的目的,就是可以容纳多个控件或者签到其它布局的控件,用于在UI上进行组织和排列,其实也就是对界面的规整。

     对于常用的WPF布局容器,每个有每个的特点,今天咱们只简单了解两个容器:

Grid:

     网络线格,可以自定义行和列,通过位置来调整控件的布局,有点类似于HTML中的Table控件,但是在此是为控件服务的,而且还有跨界的想法。

我们来实现一个小Demo,实现9宫格;

     当然我们可以通过页面编写的方式,写多个RowDefinitionhe和多个ColumnDefinition来实现,具体代码和图示如下:

 <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

     但是如果真的使用的话,我们必须要实现动态添加才能满足项目的需求,比如连连看小游戏:

先创建一个Grid,命名为gridGame:

<Grid Name="gridGame">
                
            </Grid>

当窗体加载时触发,所以在属性框中,点击事件中的Loaded,实现:

private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < 10; i++)      //动态加载十行十列
            {
                ColumnDefinition colDef = new ColumnDefinition();
                gridGame.ColumnDefinitions.Add(colDef);

                RowDefinition rowRef = new RowDefinition();
                gridGame.RowDefinitions.Add(rowRef);
            }

            for (int i = 0; i < 10;i++ )
            {
                for (int j = 0; j < 10; j++)
                {
                    Button btn = new Button();
                    btn.Content = i + "," + j;
                    //通过代码修改控件的Grid.Row属性
                    Grid.SetRow(btn, i);
                    Grid.SetColumn(btn, j);
                    gridGame.Children.Add(btn);
                }
            }
        }

最后实现的效果:

简而言之,他就是通过一条一条的线来控制控件的位置,比如登录的样式:


     通过横向,纵向居中的方式,保证控件的居中效果,通过Maigin的大小来控制其与Grid的间隔,其实也就是控件的大小。

StackPanel:

     样式面板,可以将包含元素排成一条直线或竖线,当添加或移除的时候,后生可畏,后边的控件可以自动的填补过来。

举例说明:我们可以实现触发鼠标移动父控件,动态添加的效果

代码:

     当创建新的XAML文件时,其是有一个总的Grid的,这个是默认的,不管添加什么都不用将其去掉,直接忽略即可,我们在Grid中建立一个StackPanel.取名为"sp1":

<StackPanel Name="sp1" Margin="0,0,110,55" MouseEnter="sp1_MouseEnter"></StackPanel>
后台控制代码,触发页面启动事件和鼠标移动事件:


     之前就提到过,布局控件主要体现的就是组合问题,就好像我自己住一套房太贵了,那么我可以选择合租,这样我们共同都位于一个房子内,控件也可以这样,比如我在一个Button上同时添加图片和按钮,该如何是好呢??

我们就可以使用StackPanel来将两者包围起来,实现效果,demo代码:

     整体来讲,WPF就是人性化服务,而布局就是其服务之一。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐