我怎麼能在我的網格線分隔在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> 

輸出