Styling GridSplitter wpf C#

AZ_ picture AZ_ · Nov 3, 2009 · Viewed 28.7k times · Source

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

Burton Radons picture Burton Radons · Jul 4, 2011

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.