How can I have a line separators on my grid in uwp

Question

I have a 3 row definitions on my grid:

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

How can I make this look like this:

As you can see my rows are separated by lines , how is that?

Thanks

Answer 1

You Can Use borders like this --

<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>

Output

Update

Using Only border may not look good so you need to use drop shadow using community toolkit but it requires you to use min 10.0.15063 so here is custom drop shadow effect better than community toolkit with thin corners and don't forget to adjust border shadow thickness in style according to your requirement currently i used "2", increase it if you want---

<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>

Output