Xaml布局元素-Grid

Grid:网格.可以自定义行和列并通过行列的数量,行高列宽来调整控件的布局.近似Html中的table;

StackPanel:栈式面板,内部元素可以选择泊靠的方向(上下左右),类似于Winform中设置控件的Dock属性;

那么这两个属性怎么使用呢，这下面是我写的一个例子;

<!--ScrollViewer增加滚动条,在较小的区域内调整水平或者竖直方向上的滚动条查看所有内容-->
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <Grid HorizontalAlignment="Left" Width="800" Margin="0,0,-8,0"  >

            <Grid.ColumnDefinitions>
                <ColumnDefinition ></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <StackPanel   Grid.Column="0">
                <Image Height="auto" Source="./img/1.jpeg"></Image>
                <Image  Height="auto" Source="./img/2.jpeg"></Image>
                <Image  Height="auto" Source="./img/3.jpeg"></Image>
                <Image  Height="auto" Source="./img/4.jpeg"></Image>
            </StackPanel>

            <StackPanel VerticalAlignment="Center" Grid.Column="1">
                <Image  Height="auto" Source="./img/5.jpeg"></Image>
                <Image  Height="auto" Source="./img/6.jpeg"></Image>
                <Image  Height="auto" Source="./img/7.jpeg"></Image>
                <Image  Height="auto" Source="./img/8.jpeg"></Image>
            </StackPanel>
            <StackPanel VerticalAlignment="Center" Grid.Column="2">
                <Image  Height="auto" Source="./img/9.jpeg"></Image>
                <Image  Height="auto" Source="./img/10.jpeg"></Image>
                <Image Height="auto" Source="./img/13.jpeg"></Image>
                <Image Height="auto" Source="./img/12.jpeg"></Image>
            </StackPanel>

        </Grid>
</ScrollViewer>

 在这个例子中我通过Grid与StackPanel两个布局元素将该例设置成类似照片墙的效果,如下

 

首先是Grid元素,Grid元素顾名思义就是”网格”,它的子控件被放在一个个实现定义好的小格子里面,整齐排列,在该例中我通过ColumnDefinitions元素定义了三列;

那么问题来了,怎么当我们将三个StackPanel写入时发现页面中只显示了最后一个StackPanel,怎么办呢;这时候就需要动员Grid中的Column值了;

Grid.Column的定义是这样的读取或设置指定FrameworkElement的附加属性Grid.Column的值;

嗯,看不懂,不过知道它的作用就可以了,就是当某个控件上Grid.Column=”0”时该，控件就会被放在第一列,当Grid.Column=”1”时该控件就会被放在第二列;Grid中还有Row属性这个属性在这里就不介绍了;

现在让我们看一下StackPanel栈式面板,在栈式面板中定义了很多Image控件;通过Image控件中的Source属性,我们可一个在例子中添加图像;然后在Image控件中我们定义了Height=”auto”,

在xaml中Auto的实际作用就是取实际控件所需的最小值,然后又因为StackPanel默认是垂直方向排成一条线,所有该例就完成了;

VerticalAlignment:  获取或设置在父元素（如面板或项控件）中组合此元素时所应用的垂直对齐特征。

在这个例子的外围添加ScrollViewer标签是因为Grid中的内容超出了窗口的高度了;

不过在Grid元素中需要注意的是在Grid中还有Grid.ColumnSpan与Grid.RowSpan两个属性

这两个属性分别规定控件跨几行与几列