【WPF】—StackPanel && Grid 初识布局容器(1)

     认识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就是人性化服务，而布局就是其服务之一。