xaml Grid概述

时间:2014-01-21 09:39:37

标签: xaml grid row winrt-xaml outline

首先,我想告诉您,我并没有真正了解所有XAML功能。我正在Windows 8 .Xaml区域创建我的第一个应用程序之一。

现在我正在创建一个图例,其中解释了可以在应用程序中找到的所有点。 对于这个图例,我使用Grid defenitions来定义正在显示的行和列。

我的问题是,有人知道如何勾画网格中定义的行和列吗?

(我用来创建图例的一些代码:

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="7*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>

            <TextBlock x:Name="lText1" Grid.Column="1" Grid.Row="0" Text="Definition 1" FontSize="33"/>
            <TextBlock x:Name="lText2" Grid.Column="1" Grid.Row="1" Text="Definition 2" FontSize="33"/>
            <TextBlock x:Name="lText3" Grid.Column="1" Grid.Row="2" Text="Definition 3" FontSize="33"/>
            <TextBlock x:Name="lText4" Grid.Column="1" Grid.Row="3" Text="Definition 4" FontSize="33"/>
            <TextBlock x:Name="lText5" Grid.Column="1" Grid.Row="4" Text="Definition 5" FontSize="33"/>

2 个答案:

答案 0 :(得分:2)

最简单的方法是将网格的ShowGridLines属性设置为True

ShowGridLines="True"

还有其他选项,具体取决于您希望如何准确显示轮廓。其中一些选项在此SO post中进行了解释。

更新:

由于您在没有ShowGridLines属性的Win RT平台上开发,您应该自己制作大纲。我能想到的最小努力是为跨越所有列的每一行添加Rectangle,并为跨越所有行的每列添加Rectangle。这种方式将需要比为每个单元格创建矩形更少的矩形,如上面的链接所示。例如,检查this other SO post。例如:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
</Grid.RowDefinitions>

<TextBlock x:Name="lText1" Grid.Column="1" Grid.Row="0" Text="Definition 1" FontSize="33"/>
<TextBlock x:Name="lText2" Grid.Column="1" Grid.Row="1" Text="Definition 2" FontSize="33"/>
<TextBlock x:Name="lText3" Grid.Column="1" Grid.Row="2" Text="Definition 3" FontSize="33"/>
<TextBlock x:Name="lText4" Grid.Column="1" Grid.Row="3" Text="Definition 4" FontSize="33"/>
<TextBlock x:Name="lText5" Grid.Column="1" Grid.Row="4" Text="Definition 5" FontSize="33"/>

<!-- Horizontal Lines -->
<Rectangle Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="1" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="2" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="3" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<Rectangle Grid.Row="4" Grid.ColumnSpan="2" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
<!-- Vertical Lines -->
<Rectangle Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
<Rectangle Grid.Column="1" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>

答案 1 :(得分:1)

只需将ShowGridLines="True"添加到您的网格

即可

例如

<Grid Name="grdValues"  Height="155"  ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
</Grid>

<强>更新

<Border  BorderThickness="1" Grid.Column="1" Grid.Row="0" Name="brdUsrName"  HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="60" Background="Black">
<TextBlock x:Name="lText1"  Text="Definition 1" FontSize="33"/>
</Border>