Styling GridSplitter wpf C#

Question

i want to style my GridSplitter like adding dots on it (as found on http://msdn.microsoft.com/en-us/library/aa970265.aspx).

i also want to change gridsplitter color on mouseOver, or apply Aero Theme.

<Style x:Key="GridSplitterStyle1" TargetType="{x:Type GridSplitter}">   <Setter Property="Background"           Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>   <Setter Property="PreviewStyle">     <Setter.Value>       <Style>         <Setter Property="Control.Template">           <Setter.Value>             <ControlTemplate>               <Rectangle Fill="#80000000"/>             </ControlTemplate>           </Setter.Value>         </Setter>       </Style>     </Setter.Value>   </Setter>   <Setter Property="Template">     <Setter.Value>       <ControlTemplate TargetType="{x:Type GridSplitter}">         <Border Background="{TemplateBinding Background}"                 BorderBrush="{TemplateBinding BorderBrush}"                 BorderThickness="{TemplateBinding BorderThickness}"/>       </ControlTemplate>     </Setter.Value>   </Setter> </Style>  <!--Theme--> <ResourceDictionary.MergedDictionaries>   <ResourceDictionary     Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml" /> </ResourceDictionary.MergedDictionaries>  <GridSplitter x:Name="gridSplitterTreeNodes" Width="10"               BorderThickness="1,0" Cursor="SizeWE"               RenderTransformOrigin="-1.2,0.507" ShowsPreview="True"                Style="{DynamicResource GridSplitterStyle1}">   <GridSplitter.Background>     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">       <GradientStop Color="#FFE3EFFF" Offset="0"/>       <GradientStop Color="#FFAFD2FF" Offset=".45"/>     </LinearGradientBrush>   </GridSplitter.Background> </GridSplitter> 

Answer 1

Mostly for my own future reference, here is a vertical grid splitter that has the rounded shape of a button (but doesn't react to mouseover properly):

<GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="8">     <GridSplitter.Template>         <ControlTemplate TargetType="{x:Type GridSplitter}">             <Grid>                 <Button Content="⁞" />                 <Rectangle Fill="#00FFFFFF" />             </Grid>         </ControlTemplate>     </GridSplitter.Template> </GridSplitter> 

A horizontal splitter could just use "····" as the Button's Content.

Answer 2

<GridSplitter x:Name="gridSplitterTreeNodes" Width="5" BorderThickness="1,0"       Cursor="SizeWE" RenderTransformOrigin="-1.2,0.507" ShowsPreview="True"      Style="{DynamicResource GridSplitterStyle1}">   <GridSplitter.Background>     <ImageBrush ImageSource="Images\gripDots.png" TileMode="FlipXY"                  Stretch="UniformToFill"/>   </GridSplitter.Background> </GridSplitter> 

You can also save image from Msnd Microsoft to get the same effect, More Info