我怎么能在我的网格线分隔在UWP

Question

我有我的网格中的3个定义：

<Grid.RowDefinitions> 
    <RowDefinition Height=".1*"/> 
    <RowDefinition Height="*"/> 
    <RowDefinition Height=".1*"/> 
</Grid.RowDefinitions> 

我怎样才能让这个看起来像这样：

，你可以看到我的行被行隔开，那是怎么回事？

感谢

Answer 1

您可以使用边界这样的 -

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height=".1*"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height=".1*"/> 
    </Grid.RowDefinitions> 

    <Border Grid.Row="0" BorderThickness="1" BorderBrush="Gray" VerticalAlignment="Bottom"/> 
    <!-- Your Contents --> 

    <Border Grid.Row="1" BorderThickness="1" BorderBrush="Gray" VerticalAlignment="Bottom"/> 
</Grid> 

输出

更新

使用只有边框可能看起来不太好，所以你需要使用社区工具包的阴影，但它需要你使用min 10.0.15063，所以这里是自定义阴影效果比社区工具包更薄的角落，不要忘记调整边框根据您的要求在风格阴影厚度目前我使用的“2”，增加它，如果你想---

<Page.Resources> 
    <Style x:Key="DownwardDropShadow" TargetType="Border"> 
     <Setter Property="CornerRadius" Value="100" /> 
     <Setter Property="BorderThickness" Value="0,0,0,2" /> 
     <Setter Property="BorderBrush"> 
      <Setter.Value> 
       <LinearGradientBrush> 
        <GradientStop Color="#ccc" Offset="1" /> 
        <GradientStop Color="#ddd" Offset="0" /> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <Style x:Key="UpwardDropShadow" TargetType="Border"> 
     <Setter Property="CornerRadius" Value="100" /> 
     <Setter Property="BorderThickness" Value="0,2,0,0" /> 
     <Setter Property="BorderBrush"> 
      <Setter.Value> 
       <LinearGradientBrush> 
        <GradientStop Color="#ccc" Offset="1" /> 
        <GradientStop Color="#ddd" Offset="0" /> 
       </LinearGradientBrush> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height=".1*"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height=".1*"/> 
    </Grid.RowDefinitions> 

    <Border Grid.Row="0" Style="{StaticResource DownwardDropShadow}" BorderThickness="1.5" Opacity="0.9" BorderBrush="#ddd" VerticalAlignment="Bottom" Background="#FFC8D5DD" /> 

    <!-- Your Contents --> 

    <Border Grid.Row="1" Style="{StaticResource UpwardDropShadow}" BorderThickness="1.5" Opacity="0.9" BorderBrush="#ccc" VerticalAlignment="Bottom"/> 
</Grid> 

输出