我怎样才能在 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>

输出