I do not get selected item displayed in ComboBox ever since I have overwritten the default style with this one:
<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="Blue" Offset="0.0"/>
<GradientStop Color="White" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="White" />
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="1" Background="#5089ba" BorderThickness="1" BorderBrush="White"/>
<Border Grid.Column="0" CornerRadius="1" Margin="1" Background="{StaticResource WindowBackgroundBrush}" BorderThickness="0,0,1,0" />
<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" Fill="White" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
</ToggleButton>
<ContentPresenter Name="ContentSite" IsHitTestVisible="True" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" Background="{StaticResource WindowBackgroundBrush}" BorderThickness="1"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
Selection still works fine and does what it is supposed to do. It is just that I don't get the selected item displayed in header. What could be the reason?
This solved the problem:
<ContentPresenter Name="ContentSite" IsHitTestVisible="True" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}"/>
I was missing the content template binding.
<ContentPresenter Name="ContentSite" IsHitTestVisible="True" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding ComboBox.SelectionBoxItem}"
ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"/>
Now it will work ;)
IT's in your Content presenter.
You need to add a textblock.
<ContentPresenter Name="ContentSite" IsHitTestVisible="True" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text=" " />
</ContentPresenter >
Related
Good Evening Guys, I am new to WPF application. I have a trouble with Indeterminate progress bar design. I had researched a lot of progress bar related topic via online but I still not clear about the progress bar styling concept.
I had tried on changing the value of corner radius and set true for clip to bounds on every possible element that affected the corner radius (PART_Indicator,PART_Track,Indicator,Animation), but still no luck with this.
The Child Border always overlap it's parent. Shown as below
What I want to achieve on Progress bar shown as below.
Below is my code:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="150">
<Grid>
<StackPanel Orientation="Vertical">
<ProgressBar Height="36" Name="progBar" VerticalAlignment="Top" IsIndeterminate="True" Foreground="Orange" BorderBrush="Gray" BorderThickness="1" >
<ProgressBar.Style>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar" >
<Grid Name="TemplateRoot" SnapsToDevicePixels="True">
<Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
<Border CornerRadius="10" Margin="1,1,1,1">
<Border.Background>
<SolidColorBrush Color="Transparent"/>
</Border.Background>
</Border>
<Border BorderThickness="1" BorderBrush="gray" Margin="1,1,1,1" CornerRadius="10">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="WhiteSmoke" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle Name="PART_Track" Margin="1,1,1,1" ClipToBounds="True"/>
<Decorator Name="PART_Indicator" Margin="3,2,3,2" HorizontalAlignment="Left" ClipToBounds="True">
<Grid Name="Foreground" ClipToBounds="True">
<Rectangle RadiusX="10" RadiusY="10" Name="Indicator" ClipToBounds="True"/>
<Grid Name="Animation" ClipToBounds="True">
<Border Name="PART_GlowRect" Width="50" Margin="1" HorizontalAlignment="Left" Background="Orange" CornerRadius="10" />
</Grid>
<Grid Name="Overlay">
</Grid>
</Grid>
</Decorator>
<Border BorderThickness="0" CornerRadius="0" BorderBrush="Transparent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ProgressBar.Style>
</ProgressBar>
</StackPanel>
</Grid>
</Window>
What had I did wrong on the code? Please for guide me regarding this issue.
Thank you.
Check out Clip property:
<Image
Source="sampleImages\Waterlilies.jpg"
Width="200" Height="150" HorizontalAlignment="Left">
<Image.Clip>
<EllipseGeometry
RadiusX="100"
RadiusY="75"
Center="100,75"/>
</Image.Clip>
</Image>
You can put any geometry inside Clip property. In your case it can be RectangleGeometry with RadiusX and RadiusY properties set.
More info: https://msdn.microsoft.com/ru-ru/library/system.windows.uielement.clip(v=vs.110).aspx
Thanks for Mikolaytis's answer, I am currently using RectangleGeometry.
I believe the Rect in RectangleGeometry it will not inherit the width from the parent width, I think I need to use code behind to recalculate the rect for different resolution.
I am sharing my code below in case somone facing the same issue as I was.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="400">
<ProgressBar Height="36" Width="358" Name="progBar" VerticalAlignment="Top" IsIndeterminate="True" Foreground="Orange" BorderBrush="Gray" BorderThickness="1" >
<ProgressBar.Style>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar" >
<Grid Name="TemplateRoot" SnapsToDevicePixels="True">
<Rectangle RadiusX="2" RadiusY="2" Fill="Transparent" />
<Border CornerRadius="10" Margin="1,1,1,1">
<Border.Background>
<SolidColorBrush Color="Transparent"/>
</Border.Background>
</Border>
<Border BorderThickness="1" BorderBrush="Blue" Margin="1,1,1,1" CornerRadius="10">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Red" Offset="0.0" />
<GradientStop Color="Red" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle Name="PART_Track" Margin="0" ClipToBounds="True" />
<Border Background="black" Name="PART_Indicator" Margin="0" HorizontalAlignment="Left" ClipToBounds="True">
<Border.Clip>
<RectangleGeometry Rect="2,2,354,32" RadiusX="9" RadiusY="9.5" />
</Border.Clip>
<Grid Name="Foreground">
<Rectangle RadiusX="10" RadiusY="10" Name="Indicator" ClipToBounds="True"/>
<Grid Name="Animation" ClipToBounds="True">
<Border Name="PART_GlowRect" Width="50" Margin="1" HorizontalAlignment="Left" Background="Orange" CornerRadius="10" />
</Grid>
<Grid Name="Overlay">
</Grid>
</Grid>
</Border>
<Border BorderThickness="0" CornerRadius="0" BorderBrush="Transparent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ProgressBar.Style>
</ProgressBar>
</Window>
I have a custom textbox in WPF and I want to change its width while resizing it in designer view. I used Binding ActualHeight but it doesn't work.
As the picture shows I resized the TextBox in design mode but it is still in the same width, not changed. How can I change that control's Width(only) property according to resizing?
DottedTextBox
<UserControl x:Class="Easy_Message.DottedTextBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="400">
<Viewbox>
<TextBox x:Name="roottxt" Background="White"
BorderThickness="0" Width="{Binding ActualWidth,RelativeSource={RelativeSource TemplatedParent}}" Height="20">
<TextBox.Template>
<ControlTemplate TargetType="TextBox">
<Grid>
<Border x:Name="b" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
BorderThickness="1,0,1,0" BorderBrush="#c2c4cb">
<Border BorderThickness="0,1,0,0" BorderBrush="#9da0aa">
<Border BorderThickness="0,0,0,1" BorderBrush="#d9dae0">
<DockPanel>
<TextBox x:Name="orgbox" VerticalContentAlignment="Center"
HorizontalAlignment="Left"
BorderThickness="0"
FontSize="{TemplateBinding FontSize}"
Background="White"
Width="{Binding Path=Width,ElementName=b,Converter={StaticResource wconv}}" SelectionBrush="{TemplateBinding SelectionBrush}"
Height="20">
</TextBox>
<Border x:Name="brdDot" Background="{TemplateBinding Background}" Grid.Column="1"
Width="16" Height="{TemplateBinding Height}" HorizontalAlignment="Right"
BorderThickness="0">
<Canvas HorizontalAlignment="Right"
Width="10" Height="6"
Margin="0,0,2.5,2.5">
<Rectangle Width="1.5" Height="1.5" Fill="Black">
<Rectangle.RenderTransform>
<TranslateTransform X="0" Y="2"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="1.5" Height="1.5" Fill="Black">
<Rectangle.RenderTransform>
<TranslateTransform X="4" Y="2"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="1.5" Height="1.5" Fill="Black">
<Rectangle.RenderTransform>
<TranslateTransform X="8" Y="2"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
</Border>
</DockPanel>
</Border>
</Border>
</Border>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=brdDot}" Value="True">
<Setter TargetName="brdDot" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="White" Offset="-0.1"/>
<GradientStop Color="#ccdfff" Offset="0.6" />
<GradientStop Color="White" Offset="1.1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="brdDot" Property="BorderThickness" Value="1,0,0,0" />
<Setter TargetName="brdDot" Property="BorderBrush" Value="#ccc9c9"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Viewbox>
I am using the following ProgressBar Style:
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="400" Background="{TemplateBinding Background}">
<Border x:Name="PART_Track" CornerRadius="2" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="#FFFFFF" />
</Border.BorderBrush>
</Border>
<Border x:Name="PART_Indicator" CornerRadius="2" BorderThickness="1" HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}" Margin="0,-1,0,1">
<Grid ClipToBounds="True" x:Name="Animation">
<Rectangle x:Name="PART_GlowRect" Width="200" HorizontalAlignment="Left"
Fill="#3399FF" Margin="0,0,0,0" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#404040"/>
</Style>
It's working fine but I want to display three rectangles with different colors at a time (Left, Center, Right) as the indicator part, how can I achieve this?
You should change your PART_GlowRect to be a Border instead of a Rectangle, and add the desired rectangles inside that:
<Border x:Name="PART_Indicator" CornerRadius="2" BorderThickness="1" HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}" Margin="0,-1,0,1">
<Grid ClipToBounds="True" x:Name="Animation">
<Border x:Name="PART_GlowRect" Width="150" HorizontalAlignment="Left"
Background="Transparent" Margin="0,0,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Red" />
<Rectangle Grid.Column="1" Fill="Green" />
<Rectangle Grid.Column="2" Fill="Blue" />
</Grid>
</Border>
</Grid>
</Border>
This is how it will look like:
I'm trying to customize the WPF datepicker so that the user doesn't have to click a button to open the picker but that it is always visible.
I've set the PART_Popup to IsOpen = true and StaysOpen = true but that doesn't do the trick..
<Window x:Class="WPFDatePickerSample.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300">
<Window.Resources>
<Style TargetType="DatePicker">
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="IsTodayHighlighted" Value="True" />
<Setter Property="SelectedDateFormat" Value="Short" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="3,2,0,2"/>
<!--<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint=".5,0" StartPoint=".5,1">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>-->
<Setter Property="BorderThickness" Value="0" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}">
<Border.Child>
<Grid x:Name="PART_Root"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.Resources>
<!-- Main DatePicker Brushes -->
<SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF" />
<!-- Button Template -->
<ControlTemplate x:Key="DropDownButtonTemplate" TargetType="Button">
<Grid>
<!--Start UI-->
<Grid Height="20" Width="20" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Background="#11FFFFFF" FlowDirection="LeftToRight">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="23*"/>
<RowDefinition Height="19*"/>
<RowDefinition Height="19*"/>
<RowDefinition Height="19*"/>
</Grid.RowDefinitions>
<Border Margin="-1" Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderThickness="1" BorderBrush="#FF45D6FA" Opacity="0" CornerRadius="0,0,1,1" x:Name="Highlight"/>
<Border x:Name="Background" Margin="0,-1,0,0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderThickness="1" BorderBrush="#FFFFFFFF" Opacity="1" CornerRadius=".5" Background="#FF1F3B53"/>
<Border x:Name="BackgroundGradient" Margin="0,-1,0,0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderThickness="1" BorderBrush="#BF000000" Opacity="1" CornerRadius=".5">
<Border.Background>
<LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="#F9FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.625" />
<GradientStop Color="#C6FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.48,-1" StartPoint="0.48,1.25">
<GradientStop Color="#FF494949"/>
<GradientStop Color="#FF9F9F9F" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.3,-1.1" StartPoint="0.46,1.6">
<GradientStop Color="#FF4084BD"/>
<GradientStop Color="#FFAFCFEA" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Path HorizontalAlignment="Center" Margin="4,3,4,3" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Grid.Column="0" Grid.Row="1" Fill="#FF2F2F2F" Stretch="Fill" Data="M11.426758,8.4305077 L11.749023,8.4305077 L11.749023,16.331387 L10.674805,16.331387 L10.674805,10.299648 L9.0742188,11.298672 L9.0742188,10.294277 C9.4788408,10.090176 9.9094238,9.8090878 10.365967,9.4510155 C10.82251,9.0929432 11.176106,8.7527733 11.426758,8.4305077 z M14.65086,8.4305077 L18.566387,8.4305077 L18.566387,9.3435936 L15.671368,9.3435936 L15.671368,11.255703 C15.936341,11.058764 16.27293,10.960293 16.681133,10.960293 C17.411602,10.960293 17.969301,11.178717 18.354229,11.615566 C18.739157,12.052416 18.931622,12.673672 18.931622,13.479336 C18.931622,15.452317 18.052553,16.438808 16.294415,16.438808 C15.560365,16.438808 14.951641,16.234707 14.468243,15.826504 L14.881817,14.929531 C15.368796,15.326992 15.837872,15.525723 16.289043,15.525723 C17.298809,15.525723 17.803692,14.895514 17.803692,13.635098 C17.803692,12.460618 17.305971,11.873379 16.310528,11.873379 C15.83071,11.873379 15.399232,12.079271 15.016094,12.491055 L14.65086,12.238613 z" Grid.ColumnSpan="4" Grid.RowSpan="3"/>
<Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#FFFFFFFF" StrokeThickness="0" Grid.ColumnSpan="4" Width="3" Height="3"/>
<Border Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderThickness="1" BorderBrush="#B2FFFFFF" Opacity="0" CornerRadius="0,0,.5,.5" x:Name="DisabledVisual"/>
</Grid>
<!--End UI-->
</Grid>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox x:Name="PART_TextBox"
Grid.Row="0" Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
BorderThickness="1"
Text="Selecteer datum" MinHeight="20"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center" >
</TextBox>
<Grid x:Name="PART_DisabledVisual"
Opacity="0"
IsHitTestVisible="False"
Grid.Row="0" Grid.Column="0"
Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" RadiusX="1" RadiusY="1" Fill="#A5FFFFFF"/>
<Rectangle Grid.Row="0" Grid.Column="1" RadiusX="1" RadiusY="1" Fill="#A5FFFFFF" Height="18" Width="19" Margin="3,0,3,0" />
<Popup x:Name="PART_Popup"
PlacementTarget="{Binding ElementName=PART_TextBox}"
Placement="Bottom"
IsOpen="True"
StaysOpen="True"
AllowsTransparency="True" />
</Grid>
</Grid>
</Border.Child>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<DatePicker></DatePicker>
</Grid>
I used Calendar instead of DatePicker to achieve my goal.
You have direct Dependency property in DatePicker for this. Please make use of the property in IsDropDownOpen = true. Hope your question is answered.
<DatePicker IsDropDownOpen="True" ></DatePicker>
Regards,
Abdul Rahman A.H.
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.