SilverLight：布局（1） Border（边框）对象、Grid（网格）对象

最新推荐文章于 2025-12-11 11:59:04 发布

转载最新推荐文章于 2025-12-11 11:59:04 发布 · 218 阅读

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/359030

本文详细介绍了Silverlight中两种常用的布局方式：Border（边框）对象和Grid（网格）对象。对于Border布局，文章讲解了其属性如边框颜色、背景等，并通过示例代码展示如何设置这些属性。对于Grid布局，则不仅解释了基本用法，还进一步探讨了如何通过RowSpan和ColumnSpan实现单元格的合并。

ylbtech-SilverLight-Layout:布局（1） Border（边框）对象、Grid（网格）对象

A, Border（边框）对象
B, Grid（网格）对象
C, Grid（网格）对象之合并行、和并列

1.A, Border（边框）对象返回顶部

<Border BorderBrush="SteelBlue" Margin="25" Background="LightYellow" BorderThickness="8" CornerRadius="15">
            <Button Content="Button" Margin="10" />
</Border>

3,Margin,

Background, BorderBrush[边框颜色], BorderThickness[边框宽度], CornerRadius[圆角半径]

1.B, Grid（网格）对象返回顶部

<Grid ShowGridLines="True" Background="White">
    <!--定义表格的行和列 begin-->
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <!--定义表格的行和列 end-->

    <!--A 按钮位于第一行第一列-->
    <Button Grid.Row="0" Grid.Column="0" Content="A" Margin="3" FontSize="26"/>
    <Button Grid.Row="0" Grid.Column="1" Content="B" Margin="3" FontSize="26"/>
    <Button Grid.Row="1" Grid.Column="1" Content="C" Margin="3" FontSize="26"/>
    <Button Grid.Row="1" Grid.Column="2" Content="D" Margin="3" FontSize="26"/>
</Grid>

3,ShowGridLine[现实网格线], background,

Grid.RowDefinitions[定义网格行], Grid.ColumnDefinitions[定义网格列],

RowDefinition[行定义], ColumnDefinition[列定义],

Grid.Row[坐标行], Grid.Column[坐标列]

1.C, Grid（网格）对象之合并行、和并列返回顶部

<Grid ShowGridLines="False" Background="White">
    <!--定义表格的行和列 begin-->
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <!--定义表格的行和列 end-->
    <Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Content="A"/>
    <Button Grid.Row="0" Grid.Column="1" Content="B"/>
    <Button Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Content="C"/>
</Grid>