I add theme for application.
I set style for textbox, and set Validation.ErrorTemplate for it.
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource TextBoxValidationToolTipTemplate}"
in validation template.
<ControlTemplate x:Key="TextBoxValidationToolTipTemplate">
<Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
<Grid.RenderTransform>
<TranslateTransform x:Name="xform" X="-25" />
</Grid.RenderTransform>
<Border Background="StaticResource ValidationToolTipTemplateShadowBrush}" />
<Border Background="StaticResource ValidationToolTipTemplateShadowBrush}" />
<Border Background="StaticResource ValidationToolTipTemplateShadowBrush}" />
<Border Background="StaticResource ValidationToolTipTemplateShadowBrush}" />
<Border Background="StaticResource ValidationErrorElement}" />
<Border>
<TextBlock Forground="{StaticResource LightBrush}" Text="{Binding (Validation.Errors).CurrentItem.ErrorContent}" UseLayoutRounding="false" />
</Border>
</Grid>
</ControlTemplate>
When i remove Validation.ErrorTemplate of TextBox style, it show default validation. But when i use template don't show validation.
EDIT
I use this for set Validation.ErrorTemplate
here is a somethings that in my opinion can help you; TRY to use the AdornedElementPlaceholder in your ControlTemplate, it helped me before. Here is the my ControlTemplate example (a tooltip will display the error).
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel>
<Grid DockPanel.Dock="Right" Width="16" Height="16" VerticalAlignment="Center" Margin="3 0 0 0">
<Ellipse Width="16" Height="16" Fill="Red" ToolTip="{Binding ElementName=AdornedElementPlaceholder, Path=AdornedElement.(Validation.Errors).CurrentItem.ErrorContent}"/>
<Ellipse Width="3" Height="8" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0 2 0 0" Fill="White"/>
<Ellipse Width="2" Height="2" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0 0 0 2" Fill="White"/>
</Grid>
<Border BorderBrush="Red" BorderThickness="2" CornerRadius="2">
<AdornedElementPlaceholder x:Name="AdornedElementPlaceholder"/>
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Regards,
Related
I just want to know the Drop Shadow shadow depth, Direction, Blur radius, opacity of the tooltip? And what is the Hex Color code of a windows 10 Tooltip
You can get/set the values in the Tooltip's ControlTemplate.In my code, I set the name for the DropShadowEffect and get the value by using ElementName, then show the values in a Grid which included in parent grid.
<Window.Resources>
<Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid x:Name="grid" Background="White" >
<Border x:Name="Border" Margin="0,0,0,0" BorderThickness="0.5" Width="{TemplateBinding Width}" Height="150">
<Border.BorderBrush>
<SolidColorBrush Color="Gray" />
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect x:Name="Myeffect" ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
</Border.Effect>
<ContentPresenter Margin="4,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="60"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0">ShadowDepth:</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=ShadowDepth}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">Direction:</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Direction}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">Color:</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Color}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">Opacity:</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Opacity}"><!--Useful information goes here.--></TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">BlurRadius:</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=BlurRadius}"><!--Useful information goes here.--></TextBlock>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="True" >
<Setter TargetName="Border" Property="CornerRadius" Value="0" />
<Setter TargetName="Border" Property="SnapsToDevicePixels" Value="true" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Width="200" Height="50" HorizontalAlignment="Center" Content="Click Here">
<Button.Template >
<ControlTemplate TargetType="{x:Type Button}" >
<Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
<Border.Background>#FFDDDDDD</Border.Background>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
</Border>
</ControlTemplate>
</Button.Template>
<Button.ToolTip>
<ToolTip>
</ToolTip>
</Button.ToolTip>
</Button>
</Grid>
The result is as below picture shown:
I have a custom WindowChrome style for my WPF app (ripped from here: http://www.bdevuyst.com/wpf-custom-title-bar-and-taskbar/).
Code here:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">
<!-- Simple style without anything to remove the title bar -->
<Style x:Key="Style.Window.WindowStyleNoneWithTaskbar.Base" TargetType="{x:Type Window}">
<Setter Property="shell:WindowChrome.WindowChrome" >
<Setter.Value>
<shell:WindowChrome GlassFrameThickness="0" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding Foreground}" BorderThickness="1" >
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Simple style with system buttons upper right -->
<Style TargetType="{x:Type Window}" BasedOn="{StaticResource Style.Window.WindowStyleNoneWithTaskbar.Base}" x:Key="Style.Window.WindowStyleNoneWithTaskbar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding Foreground}" BorderThickness="1">
<Grid>
<ContentPresenter
Content="{TemplateBinding Content}" />
<Canvas Grid.Column="2" HorizontalAlignment="Right" Margin="0,6,10,0" VerticalAlignment="Top" >
<Button x:Name="MinimizeButton" Style="{DynamicResource Style.Button.Core.Transparent}" Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" Width="24" Height="24" Canvas.Right="55" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close" >
<Rectangle Margin="2" Fill="{DynamicResource appbar.reduce}" Opacity=".5" Width="15" Height="15" />
</Button>
<Button x:Name="NormalizeButton" Style="{DynamicResource Style.Button.Core.Transparent}" Visibility="Collapsed" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" Width="24" Height="24" Canvas.Right="30" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Restore" >
<Rectangle Margin="2" Fill="{DynamicResource appbar.normal}" Opacity=".5" Width="15" Height="15" />
</Button>
<Button x:Name="MaximizeButton" Style="{DynamicResource Style.Button.Core.Transparent}" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" Width="24" Height="24" Canvas.Right="30" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Maximize" >
<Rectangle Margin="2" Fill="{DynamicResource appbar.maximize}" Opacity=".5" Width="15" Height="15" />
</Button>
<Button x:Name="CloseButton" Style="{DynamicResource Style.Button.Core.Transparent}" Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" Width="24" Height="24" Canvas.Right="5" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close" >
<Rectangle Margin="2" Fill="{DynamicResource appbar.close}" Opacity=".5" Width="15" Height="15" />
</Button>
</Canvas>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="WindowState" Value="Maximized">
<Setter Property="Visibility" Value="Collapsed" TargetName="MaximizeButton" />
<Setter Property="Visibility" Value="Visible" TargetName="NormalizeButton" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I removed references to "shell:" because it's deprecated, but for some reason I am unable to click the buttons in the title bar. I downloaded the sample solution from the website I linked, and the buttons worked from me.
So next, I added the references to "shell" back, but I was still unable to click the buttons.
I'm not sure what I'm doing wrong here. I pretty much completely copied the sample solution into my project and it still didn't work. I have IsHitTestVisibleInChrome set to "true" for each button but it's not making a difference.
I've tried several other, much more simple approaches, with basic buttons and no styling, all to no avail. I feel like I'm missing something obvious here.
Small addition to the correct answer. If you have something like:
<Button shell:WindowChrome.IsHitTestVisibleInChrome="True"
And your buttons do not react to clicks - just REMOVE "shell:"
<Button WindowChrome.IsHitTestVisibleInChrome="True"
This will make them work
It is your command bindings that are the issue here. Don't bind the Command properties. Simply set them:
<Canvas Grid.Column="2" HorizontalAlignment="Right" Margin="0,6,10,0" VerticalAlignment="Top" >
<Button x:Name="MinimizeButton" Style="{DynamicResource Style.Button.Core.Transparent}" Command="{x:Static SystemCommands.MinimizeWindowCommand}" Width="24" Height="24" Canvas.Right="55" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close" >
<Rectangle Margin="2" Fill="{DynamicResource appbar.reduce}" Opacity=".5" Width="15" Height="15" />
</Button>
<Button x:Name="NormalizeButton" Style="{DynamicResource Style.Button.Core.Transparent}" Visibility="Collapsed" Command="{x:Static SystemCommands.RestoreWindowCommand}" Width="24" Height="24" Canvas.Right="30" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Restore" >
<Rectangle Margin="2" Fill="{DynamicResource appbar.normal}" Opacity=".5" Width="15" Height="15" />
</Button>
<Button x:Name="MaximizeButton" Style="{DynamicResource Style.Button.Core.Transparent}" Command="{x:Static SystemCommands.MaximizeWindowCommand}" Width="24" Height="24" Canvas.Right="30" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Maximize" >
<Rectangle Margin="2" Fill="{DynamicResource appbar.maximize}" Opacity=".5" Width="15" Height="15" />
</Button>
<Button x:Name="CloseButton" Style="{DynamicResource Style.Button.Core.Transparent}" Command="{x:Static SystemCommands.CloseWindowCommand}" Width="24" Height="24" Canvas.Right="5" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close" >
<Rectangle Margin="2" Fill="{DynamicResource appbar.close}" Opacity=".5" Width="15" Height="15" />
</Button>
</Canvas>
You will also need a command binding for each of the commands and execute them programmatically as suggested by #Louis Kottmann here:
In WPF, can I have a borderless window that has regular minimize, maximise and close buttons?
I have a custom button Style written in XAML. It is a button with image and text.
But the Image should be customizable. I need to change the Source property in designer.
My code:
<Window.Resources>
<ResourceDictionary>
<Style x:Key="SSbutton" TargetType="{x:Type Button}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Viewbox Stretch="Uniform">
<Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--I want to change this Source property-->
<Image Source="img/desktop.png" Width="30" HorizontalAlignment="Left" />
<TextBlock Margin="3,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center"
Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}"/>
</StackPanel>
</Border>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="1" Background="LightGreen">
<StackPanel >
<Button Style="{StaticResource SSbutton}" Width="90" Height="30" Content="Desktop" FontSize="13"
Foreground="White"/>
</StackPanel>
</Border>
</Grid>
How can I do that?
Piggy back in to the property using an arbitrary template binding with the handy dandy Tag property;
<Style x:Key="SSbutton" TargetType="{x:Type Button}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="Green"/>
<!-- Set a default -->
<Setter Property="Tag" Value="img/desktop.png"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Viewbox Stretch="Uniform">
<Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--I want to change this Source property-->
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Width="30" HorizontalAlignment="Left" />
<TextBlock Margin="3,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center"
Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}"/>
</StackPanel>
</Border>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then at the instance;
<Button Style="{StaticResource SSbutton}"
Tag="Some/Other/Image.png"
Width="90" Height="30"
Content="Desktop"
FontSize="13" Foreground="White"/>
Hope this helps, cheers.
Edit: Updated to reflect path considerations for templatebinding in wpf as per OP's comments.
I have two separate styles in which I am trying to include the same basic elements. For example, HorizontalButton has this style:
<Style x:Key="HorizontalButton" TargetType="{x:Type custom:SampleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type custom:DispatchButton}">
<Border Name="outerBorder" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type custom:SampleGrid}}, Path=ActualWidth, Converter={StaticResource MathConverter}, ConverterParameter=x/7}">
<Border Name="innerBorder" BorderThickness="1" BorderBrush="WhiteSmoke" CornerRadius="1" Background="{TemplateBinding Background}">
<Grid Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{TemplateBinding Id}"></TextBlock>
<TextBlock Text="{TemplateBinding Code}" Margin="4,0,0,0"></TextBlock>
</StackPanel>
<TextBlock Text="{TemplateBinding Address}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
<Rectangle Grid.Row="1" Height="1" Margin="2,0,2,0" Stroke="DarkGray" />
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
<Grid>
<Ellipse VerticalAlignment="Center" HorizontalAlignment="Center" Width="15" Height="15" Fill="{TemplateBinding SampleColor}" />
<TextBlock Foreground="{TemplateBinding Background}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Sample}"></TextBlock>
</Grid>
<Image Width="16" Height="16" Source="{TemplateBinding SymbolImage}" Margin="2,0,0,0" />
</StackPanel>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center" Name="content" />
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And VerticalButton has this style:
<Style x:Key="VerticalButton" TargetType="{x:Type custom:SampleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type custom:DispatchButton}">
<Border Name="outerBorder" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type custom:SampleGrid}}, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=x/7}">
<Border Name="innerBorder" BorderThickness="1" BorderBrush="WhiteSmoke" CornerRadius="1" Background="{TemplateBinding Background}">
<Grid Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="4*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{TemplateBinding Id}"></TextBlock>
<TextBlock Text="{TemplateBinding Code}" Margin="4,0,0,0"></TextBlock>
</StackPanel>
<TextBlock Text="{TemplateBinding Address}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
<Rectangle Grid.Row="1" Height="1" Margin="2,0,2,0" Stroke="DarkGray" />
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
<Grid>
<Ellipse VerticalAlignment="Center" HorizontalAlignment="Center" Width="15" Height="15" Fill="{TemplateBinding SampleColor}" />
<TextBlock Foreground="{TemplateBinding Background}" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{TemplateBinding Sample}"></TextBlock>
</Grid>
<Image Width="16" Height="16" Source="{TemplateBinding SymbolImage}" Margin="2,0,0,0" />
</StackPanel>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center" Name="content" />
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, outerBorder has different attributes set depending on whether or not the button is vertical or horizontal, but all of the inner elements from innerBorder inwards are identical. Is there a way I can do some kind of an include or reference in xaml so that I would only have to make changes to one instance of the inner elements to get the same results?
You might be able to use a ContentControl with the ContentTemplate set to a DataTemplate containing all your shared elements
<DataTemplate x:Key="MySharedXaml">
<!-- Shared XAML here -->
</DataTemplate>
then in your controls, simply use this wherever you want your shared XAML
<ContentControl ContentTemplate="{StaticResource MySharedXAML}">
<ContentPresenter />
</ContentControl>
The only thing I'm not sure of is the Bindings. You might need to tweak your XAML a bit to make sure the bindings get set correctly.
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>
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.
<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
Another way of adding a 'gripper' button/graphic to a GridSplitter, without losing mouse events, would be to use a simple label on top of the 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"/>
Making sure the GridSplitter and Label are in the same Column, and that IsHitTestVisible=False is set in the Label.
For a different type of style you can do the below.
Produces a nice overlaping style. The Gridsplitter overlaps both the left and right content.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Background="#777"/>
<GridSplitter
Grid.Column="1"
HorizontalAlignment="Stretch"
ResizeDirection="Columns"
ResizeBehavior="PreviousAndNext"
Panel.ZIndex="2">
<GridSplitter.Template>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Grid>
<Rectangle IsHitTestVisible="False" Fill="Black"/>
<Border
Background="White"
Width="25" Height="25" c
CornerRadius="25" Margin="-13 0">
<Path Stroke="Black" StrokeThickness="0.5" Width="17" Height="7" Data="m 4.4549201,1048.4664 -4.33056515,1.9095 4.33056515,1.9094 0,-3.8189 z m 3.0901599,0 0,3.8189 4.330565,-1.9094 -4.330565,-1.9095 z m -3.2239449,0.2053 0,3.4083 -3.86518514,-1.7041 3.86518514,-1.7042 z m 3.3577349,0 3.865185,1.7042 -3.865185,1.7041 0,-3.4083 z" Stretch="Fill"/>
</Border>
</Grid>
</ControlTemplate>
</GridSplitter.Template>
</GridSplitter>
<Border Grid.Column="2" Background="#777"/>
</Grid>
Sample Output
In response to Burton Radons's answer, I personally prefer the styling:
<GridSplitter
Width="8"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<GridSplitter.Template>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Grid>
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="⁞" />
<Rectangle Fill="#00FFFFFF" />
</Grid>
</ControlTemplate>
</GridSplitter.Template>
</GridSplitter>
This implementation produces the same aesthetic effect whilst also maintaining functionality.