#461 – Making a GridSplitter Look Three-Dimensional
December 29, 2011 1 Comment
You can make a GridSplitter element look like a more traditional three-dimensional element by using a Border and a gradient fill. This will make it more obvious to the user that it is something that they can grab with the mouse.
In the XAML snippet below, the GridSplitter has a dark grey border and a gradient fill that goes from white to gray.
<Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Label Content="Row 0 Col 0" Background="Azure" Grid.Row="0" Grid.Column="0" /> <Label Content="Row 0 Col 1" Background="Lavender" Grid.Row="0" Grid.Column="1" /> <Label Content="Row 2 Col 0" Background="Moccasin" Grid.Row="2" Grid.Column="0" /> <Label Content="Row 2 Col 1" Background="Honeydew" Grid.Row="2" Grid.Column="1" /> <GridSplitter Grid.Row="1" Grid.ColumnSpan="2" Height="6" BorderThickness="1" BorderBrush="DarkSlateGray" VerticalAlignment="Center" HorizontalAlignment="Stretch"> <GridSplitter.Background> <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1"> <GradientStop Color="#FF808385" Offset="0"/> <GradientStop Color="#FFECF1F7" Offset="1"/> </LinearGradientBrush> </GridSplitter.Background> </GridSplitter> </Grid>