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>

<强>输出

如何在uwp中的网格上有一个行分隔符

1 个答案: