CODEWITHSUNDEEP
c#uwp
user7676403
user7676403

Reputation:

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

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: enter image description here

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

Thanks

Upvotes: 4

Views: 3530

Answers (1)

Shubham Sahu
Shubham Sahu

Reputation: 2015

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

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

Output

Upvotes: 7

Related Questions