Search code examples
wpfwpf-controlsstylingtemplatinggridsplitter

Styling GridSplitter wpf C#


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>

Solution

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