Styling GridSplitter wpf C#

wpf grid resize

Question

Quiero diseñar mi GridSplitter como agregar puntos en él (como se encuentra en http://msdn.microsoft.com/en-us/library/aa970265.aspx ).

También quiero cambiar el color del gridsplitter en mouseOver, o aplicar 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

Otra forma de agregar un botón / gráfico ''agarre'' a un GridSplitter, sin perder los eventos del mouse, sería usar una etiqueta simple en la parte superior del splitter.

 <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" Background="Gray"/>
<Label Grid.Column="1" Content="⁞" Foreground="White" VerticalAlignment="Center" FontSize="26" FontWeight="Bold" IsHitTestVisible="False"/>

Asegurarse de que el GridSplitter y la Etiqueta están en la misma columna, y que IsHitTestVisible = False está establecido en la Etiqueta.

Answer 2

Principalmente para mi propia referencia futura, aquí hay un divisor de cuadrícula vertical que tiene la forma redondeada de un botón (pero no reacciona al mouseover correctamente):

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

Un divisor horizontal podría usar "····" como el contenido del botón.

Answer 3

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

También puede guardar la imagen de Msnd Microsoft para obtener el mismo efecto, Más información