Grid网格面板

Grid翻译成中文就是“网格”的意思，可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table。

Grid的特点：

1）可以定义任意数量的行和列，非常灵活。

2）行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定，并可以设置最大和最小值。

3）内部元素可以设置自己所在的行和列，还可以设置自己纵向跨几行，横向跨几列。

4）可以设置Children元素的对齐方向。

Grid适用于UI布局的大框架设计，大量UI元素需要成行或者成列对齐的情况，UI尺寸改变的时候，元素需要保留固有的宽度和高度比列，UI后期可能有较大的变更或扩展。

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

<Grid >

        <Canvas x:Name="画布" Background="Black">

            <Border BorderBrush="Red" CornerRadius="10" Width=" 450" Height="450" Canvas.Left="100" Canvas.Top="100" BorderThickness="20" HorizontalAlignment="Center" VerticalAlignment="Center">

                <Border BorderBrush="Orange" BorderThickness="20">

                    <Border BorderBrush="Yellow" BorderThickness="20">

                        <Border BorderBrush="Green" BorderThickness=" 20">

                            <Border BorderBrush="Cyan"  BorderThickness="20">

                                <Border BorderBrush="Blue" BorderThickness="20">

                                    <Border BorderBrush="#FF920EF9"  BorderThickness="20">

                                        <Border>

                                            <Border.Background>

                                                <ImageBrush ImageSource="Image/show_fengjingta_238817_m.jpg"/>

                                            </Border.Background>

                                        </Border>

                                    </Border>

                                </Border>

                            </Border>

                        </Border>

                    </Border>

                </Border>

            </Border>

        </Canvas>

    </Grid>

这第一个图。定义4个椭圆，给这4个椭圆填充背景色，绘画一个杯子，在填充背景色。

<Grid Background="#FFB75050">

        <Ellipse HorizontalAlignment="Left" Height="175" Margin="130,50,0,0" VerticalAlignment="Top" Width="115" Fill="White" />

        <Ellipse Fill="Yellow"  HorizontalAlignment="Left" Height="65" Margin="170,95,0,0" VerticalAlignment="Top" Width="60"/>

        <Ellipse HorizontalAlignment="Left" Height="175" Margin="10,50,0,0" VerticalAlignment="Top" Width="115" Fill="White" />

        <Ellipse Fill="Yellow"  HorizontalAlignment="Left" Height="65" Margin="30,95,0,0" VerticalAlignment="Top" Width="60"/>

        <Ellipse HorizontalAlignment="Left" Height="75" Margin="485,525,0,0" VerticalAlignment="Top" Width="136" Fill="White" />

        <Ellipse HorizontalAlignment="Left" Height="75" Margin="484,150,0,0" VerticalAlignment="Top" Width="136" Fill=""/>

        <Border BorderBrush="White" CornerRadius="10" BorderThickness="1" HorizontalAlignment="Left" Height="390" Margin="484,180,0,0" VerticalAlignment="Top" Width="137" Background="White" />

</Grid>

第三个图，定义一个标签项，在给这个标签项定义一个名称，然后在标签项里面定义一个文本，在文本里面填写需要的字符或字符串等。然后在这个标签项里添加文本项这个按钮，点击按钮弹出文本项里面的内容。

<Grid >

        <TabControl TabStripPlacement="Top" SelectedIndex="2" Margin="-6,-1,-0.4,0.4">

            <TabItem Header="按钮1" Width="150" Height ="100" FontSize="24">

                <TextBlock Margin="0,0,-0.2,0.2">按钮1</TextBlock>

            </TabItem>

            <TabItem Header="按钮2" Width="100" Height ="100" FontSize="24">

                <TextBlock Margin="0,0,-0.2,0.2">按钮2</TextBlock>

            </TabItem>

            <TabItem Header="按钮3" Width="100" Height ="100" FontSize="24">

                <TextBlock Margin="0,0,-0.2,0.2">按钮3</TextBlock>

            </TabItem>

        </TabControl>

    </Grid>