如何在Grid行周围添加透明边框?

时间:2014-05-16 14:43:02

标签: xaml windows-store-apps

在网格内部有一个网格。需要内部网格具有透明边框,以便显示外部网格的背景颜色。

到目前为止:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Fill="#999999" Grid.Column="0" ></Rectangle>
    <Rectangle Fill="White" Grid.Column="1"></Rectangle>

    <Grid x:Name="gridLeft" Grid.Column="0" Background="#DFDFDF">
<Border BorderBrush="Transparent" BorderThickness="30" Grid.ColumnSpan="4" Grid.RowSpan="1"></Border>

        <Rectangle Grid.RowSpan="4" Grid.ColumnSpan="4" Style="{StaticResource RightGridLine}"/>
        <Rectangle Grid.Column="0" Grid.RowSpan="3" Style="{StaticResource RightGridLine}"></Rectangle>
        <Rectangle Grid.Column="1" Grid.RowSpan="3" Style="{StaticResource RightGridLine}"></Rectangle>
        <Rectangle Grid.Column="2"  Grid.RowSpan="3" Style="{StaticResource RightGridLine}"></Rectangle>

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

  <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
 </Grid>

但是,由于上面的透明边框位于内部网格中,因此它只显示内部网格的背景颜色,而不是外部网格的背景颜色。

enter image description here

1 个答案:

答案 0 :(得分:0)

好的,如果我理解正确,你想要什么就像你通常使用Opacity Mask一样,但你在WinRT应用程序中没有这个选项。因此,您可以根据自己的需要进行组织。所以作为一个简单的例子,更像这样的东西适合你。

<Grid Width="500" Background="Gray">

  <Grid Margin="20">
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition Height="10"/>
      <RowDefinition/>
      <RowDefinition Height="10"/>
      <RowDefinition/>
      <RowDefinition Height="10"/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition Width="5"/>
      <ColumnDefinition/>
      <ColumnDefinition Width="5"/>
      <ColumnDefinition/>
      <ColumnDefinition Width="5"/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.Resources>
      <Style TargetType="Rectangle">
        <Setter Property="Fill" Value="#FF0066FF"/>
      </Style>
    </Grid.Resources>

    <Rectangle/>
    <Rectangle Grid.Column="2"/>
    <Rectangle Grid.Column="4"/>
    <Rectangle Grid.Column="6"/>
    <Rectangle Grid.Row="2"/>
    <Rectangle Grid.Row="2" Grid.Column="2"/>
    <Rectangle Grid.Row="2" Grid.Column="4"/>
    <Rectangle Grid.Row="2" Grid.Column="6"/>
    <Rectangle Grid.Row="4"/>
    <Rectangle Grid.Row="4" Grid.Column="2"/>
    <Rectangle Grid.Row="4" Grid.Column="4"/>
    <Rectangle Grid.Row="4" Grid.Column="6"/>
    <Rectangle Grid.Row="6"/>
    <Rectangle Grid.Row="6" Grid.Column="2"/>
    <Rectangle Grid.Row="6" Grid.Column="4"/>
    <Rectangle Grid.Row="6" Grid.Column="6"/>

    <TextBlock Text="Something"/>
    <TextBlock Grid.Row="2" Text="Something"/>
    <TextBlock Grid.Row="4" Text="Something"/>
    <TextBlock Grid.Row="6" Text="Something"/>

  </Grid>

</Grid>

enter image description here