#461 – Making a GridSplitter Look Three-Dimensional

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.

            <RowDefinition Height="Auto"/>

        <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">
                <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                    <GradientStop Color="#FF808385" Offset="0"/>
                    <GradientStop Color="#FFECF1F7" Offset="1"/>



About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

One Response to #461 – Making a GridSplitter Look Three-Dimensional

  1. Pingback: Dew Drop – December 29, 2011 (#1,229) | Alvin Ashcraft's Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: