Creating a flat checkbox style

Creating a flat checkbox style - c#

I'm trying to replicate the checkboxes seen in this image:
css-custom-checkboxes
I've been using the xaml from this example as a starting point:
web.archive.org - WPF CheckBox style (inspired by android)
My requirements:
Solid background.
No border.
Checkmark area and checkmark resizes with control.
Checkmark is centered in the checkbox area.
My Code:
<Style TargetType="{x:Type local:DMStyle2CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Height" Value="32" />
<Setter Property="Width" Value="138" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource MyFocusVisualStyte}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator>
<BulletDecorator.Bullet>
<Grid Background="{x:Null}" Height="{TemplateBinding Height}" Width="{Binding RelativeSource={RelativeSource Self}, Path=Height, UpdateSourceTrigger=PropertyChanged}"
MinHeight="30" MinWidth="30" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="4*" />
<RowDefinition Height="6*" />
<RowDefinition Height="1*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<!-- Checkmark Box -->
<Border Name="InnerBorder" Grid.Column="1" Grid.ColumnSpan="5" Grid.Row="2" Grid.RowSpan="5" BorderThickness="1"
BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/>
<!-- Checkmark -->
<Path x:Name="CheckMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,
1.52588e-005L 9.97498,1.22334 Z" Fill="{Binding CheckMarkColor, RelativeSource={RelativeSource Mode=TemplatedParent}}" Opacity="0"
Stretch="Uniform" Grid.Column="2" Grid.ColumnSpan="4" Grid.Row="3" Grid.RowSpan="3" />
<Path Name="InderminateMark" Grid.Column="3" Grid.Row="4" Data="M0,4 L1,5 5,1 4,0" Opacity="0"
Stretch="Fill" StrokeThickness="0" Fill="#808080" />
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" Duration="0:0:0.2" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" >
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckMark" Duration="0:0:0.2" To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InderminateMark" Duration="0:0:0.2" To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="4,0,4,0" VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="InnerBorder" Property="BorderBrush" Value="{Binding BorderBrush, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="CheckMark" Property="Fill" Value="{StaticResource Color.Black}" />
<Setter TargetName="CheckMark" Property="Stroke" Value="{StaticResource Color.Black}" />
<Setter TargetName="InderminateMark" Property="Fill" Value="{StaticResource Color.Black}" />
<Setter TargetName="InnerBorder" Property="BorderBrush" Value="{StaticResource Color.Black}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For the most part this code does what I want. The checkmark is the biggest issues for me. It's not centered or resizable and it overflows the checkmark area.
I've tried playing with the grid columns and rows that hold the checkmark but its becoming increasingly frustrating. Ideally I would like to get rid of the grid columns and rows but haven't had much luck with that either.
I've looked at every SO question about wpf checkbox styles I could find and have searched for any other online resources but most of them don't come close to what I want. I even attempted to modify the default template with Expression Blend but that didn't work out either.

I ended up figuring it out based on this template I found: Circle-checkbox-style-in-WPF
Style Template
<Style TargetType="{x:Type local:FlatCheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Height" Value="32" />
<Setter Property="Width" Value="138" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource MyFocusVisualStyte}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"
BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"
BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}"
CornerRadius="0" Width="20" Height="20" VerticalAlignment="Center">
<Grid>
<Path x:Name="CheckMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,
6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z" Fill="{Binding CheckMarkColor, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Margin="3" Opacity="0" Stretch="Fill" />
</Grid>
</Border>
<ContentPresenter Grid.Column="1" x:Name="content" Margin="5,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckMark" Property="Opacity" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Class for custom dependency properties
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace Control_Styles.Styles
{
public partial class FlatCheckBox : CheckBox
{
public static readonly DependencyProperty CheckMarkColorProperty =
DependencyProperty.Register("CheckMarkColor", typeof(Brush), typeof(FlatCheckBox));
public Brush CheckMarkColor
{
get { return (Brush)GetValue(CheckMarkColorProperty); }
set { SetValue(CheckMarkColorProperty, value); }
}
}
}

you can set a style
<Style TargetType="CheckBox" x:Key="Flat_CheckBox">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="MinWidth" Value="60"/>
<Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="TextElement.Foreground" Value="Black"/>
<Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="White" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightSkyBlue" />
</Trigger>
</Style.Triggers>
</Style>

Related

Why is my ScrollViewer's repeatbutton white at the bottom?

So I am curious to why the scrollviewers repeatbutton at the bottom is white, it should be transparent, I didnt notice this until I resized my scrollviewer to fit perfectly, how do I change it's color to transparent?
I was looking throught the
RepeatButton part of the style and tried changing the background property but that didn't work either, it did nothing.
I even tried hiding it like so
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false"
Visibility="Hidden"/>
But that didnt work either, it was still there.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ScrollBarTrackThumb"
TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Fill="Transparent" />
<Border x:Name="CornerScrollBarRectangle"
CornerRadius="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="0,1,0,1"
Background="{TemplateBinding Background}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag"
Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle"
Property="Width"
Value="Auto" />
<Setter Property="Background" Value="Transparent"/>
<Setter TargetName="CornerScrollBarRectangle"
Property="Height"
Value="6" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled"
Value="false" />
<Setter Property="Foreground"
Value="#ADABAB" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Width"
Value="7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot"
Width="7"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.00001*" />
</Grid.RowDefinitions>
<Track x:Name="PART_Track"
Grid.Row="0"
IsDirectionReversed="true"
Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarTrackThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Opacity="0"
Focusable="false"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb"
Property="IsMouseOver"
Value="true">
<Setter Value="{DynamicResource ButtonSelectBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger SourceName="Thumb"
Property="IsDragging"
Value="true">
<Setter Value="{DynamicResource DarkBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Thumb"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="Orientation"
Value="Horizontal">
<Setter TargetName="GridRoot"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="8" />
<Setter TargetName="Thumb"
Property="Tag"
Value="Horizontal" />
<Setter TargetName="PageDown"
Property="Command"
Value="ScrollBar.PageLeftCommand" />
<Setter TargetName="PageUp"
Property="Command"
Value="ScrollBar.PageRightCommand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And the actual scrollviewer
<ScrollViewer Height="380"
Margin="10">
<ListView ItemsSource="{Binding MessageViewModel.Messages}"
x:Name="MyListView"
Background="Transparent"
BorderThickness="0"
Height="380">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding Message}"
FontFamily="Consolas"
Foreground="#61d73d"
TextWrapping="Wrap"/>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

like Klaus, I think the issue is not with your repeatButton. Rather, you see the (white) background through your repeatButton.
try putting a red rectangle just behind your scrollButton to see the outcome
or even better : use snoop to check this kind of issue.
but also, Clemens is right : style/template the scrollviewer inside the listView, rather than outside.

ControlTemplate DataGridColumnHeader control visible outside columns

I am customizing the style of a DataGrid and I want to describe the ControlTemplate of the header of the columns.
It is basically a TextBlock and an Image but the problem is that when I add the Control Image I find it also in the bottom of my header ...
I have tried many things to fix the problem like using a DataTemplate instead but it does not work better ...
Here is the XAML code:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontFamily="{StaticResource LatoRegular}"
Text="{TemplateBinding Content}" />
<Image Grid.Column="1" Height="16" Width="16" Source="..\..\View\Image\search.png" RenderOptions.BitmapScalingMode="HighQuality" />
</Grid>
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Do you have an idea to correct or work around the problem please?
Thank you all!

I succeeded like this:
Without a key for datagrid default style
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the style for each column
<Style x:Key="styleDtgHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED" Background="red">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontFamily="{StaticResource LatoRegular}"
Text="{TemplateBinding Content}" />
<Image Grid.Column="1" Height="16" Width="16" Source="..\..\View\Image\search.png" RenderOptions.BitmapScalingMode="HighQuality" />
</Grid>
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But I doubt that this is a clean solution?

You need to do below two things which will solve the issue:
Set the width of last column to * so that the extra column will not be created.
In your DataGridColumnHeader control template set the Grids first column width to "auto" and the HorizontalAlingment of Image to Left.
Here is the code
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
Text="{TemplateBinding Content}" />
<Image Grid.Column="1" Height="16" Width="16" Source="C:\Users\a0711212\Desktop\profilePic.png"
HorizontalAlignment="Left" RenderOptions.BitmapScalingMode="HighQuality" />
</Grid>
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF TreeView Disable Children Selection

I am looking for a way to disable a built in action of the WPF TreeView. In WPF, when you select a parent node of a TreeView, it also selects all children nodes in that group. I don't want this. What I want is a single selection. Here is an image showing what is currently happening:
Again, what I am wanting is to only select single rows.
Here is the XAML that I'm currently using:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="VoidwalkerTreeView" TargetType="{x:Type TreeView}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeView">
<Border
Name="Border"
Background="{DynamicResource Voidwalker_Brush_ContextArea}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer
Padding="4"
CanContentScroll="False"
Focusable="False">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid
Width="15"
Height="13"
Background="Transparent">
<Path
x:Name="Collapsed"
Margin="1,1,1,1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Data="M 4 0 L 8 4 L 4 8 Z"
Fill="{DynamicResource Voidwalker_Brush_ActiveTextForeground}" />
<Path
x:Name="Expanded"
Margin="1,1,1,1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Data="M 0 4 L 8 4 L 4 8 Z"
Fill="{DynamicResource Voidwalker_Brush_ActiveTextForeground}"
Visibility="Hidden" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Collapsed" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Expanded" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle
Margin="0,0,0,0"
Opacity="0"
Stroke="Black"
StrokeDashArray="1 2"
StrokeThickness="5" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding" Value="1,0,0,0" />
<Setter Property="Foreground" Value="{DynamicResource Voidwalker_Brush_ActiveTextForeground}" />
<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid x:Name="itemGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="19" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton
x:Name="Expander"
ClickMode="Press"
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource ExpandCollapseToggleStyle}" />
<Border
x:Name="Bd"
Grid.Column="1"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<ContentPresenter
x:Name="PART_Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentSource="Header"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ItemsPresenter
x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="itemGrid" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="IsSelectionActive" Value="false" />
</MultiTrigger.Conditions>
<Setter TargetName="itemGrid" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Does anyone know how to change this XAML, or point me in the correct direction as to how I can allow only single row selection? A good example of the desired behavior is how Visual Studio treats it's solution treeview. You can only do single selection, unless you deliberately hold down shift or something.

In your IsSelected trigger for the TreeViewItem style, you are changing the background colour of itemGrid. itemGrid contains everything - the header and child items. Try targeting to something more specific (e.g. the border Bd):
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>

HorizontalAlignment="Stretch" not working in TreeViewItem

Here's an example where it is not working:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<TreeView HorizontalAlignment="Stretch">
<TreeViewItem Header="Stuff" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1"></TextBox>
</Grid>
</TreeViewItem>
</TreeView>
</Window>
I want the text box to stretch to the width of the window, but instead you get this:
The textbox expands as you type, which is not what I want.
I am thinking now it might be possible to set a binding on the width of the 2nd column to the width of the TreeViewItem but I'm not sure how to do that.
I've tried putting the grid in assorted panels, but that doesn't work either. I have also set the HorizontalAlignment and HorizontalContentAlignment to Stretch on the textbox itself, but that also doesn't work.
Is this some limitation of the Grid control? Putting a textbox in a tree view by itself will make it expand as I want, but I need the label to be next to it and if there are multiple fields it looks MUCH better if all the textboxes are aligned.
UPDATE
Using a different ControlTemplate allows headers to stretch but contents still don't stretch.
<TreeView HorizontalAlignment="Stretch">
<TreeViewItem Style="{DynamicResource StretchableTreeViewItemTemplate}" HorizontalAlignment="Stretch" Header="Stuff">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1" HorizontalAlignment="Stretch"></TextBox>
</Grid>
</TreeViewItem>
</TreeView>
<Style x:Key="StretchableTreeViewItemTemplate" TargetType="TreeViewItem"
BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<!--
Note that the following do not work, but I believe the top 2 should?!
<ToggleButton IsChecked="{TemplateBinding IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Property=IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Path=IsExpanded}" ClickMode="Press" Name="Expander">
-->
<ToggleButton IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Name="Expander">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="UIElement.Focusable"
Value="false" />
<Setter Property="FrameworkElement.Width"
Value="16" />
<Setter Property="FrameworkElement.Height"
Value="16" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Padding="5,5,5,5"
Background="#00FFFFFF"
Width="16"
Height="16">
<Path Fill="#00FFFFFF"
Stroke="#FF989898"
Name="ExpandPath">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,0z" />
</Path.Data>
<Path.RenderTransform>
<RotateTransform Angle="135"
CenterX="3"
CenterY="3" />
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver"
Value="True">
<Setter TargetName="ExpandPath"
Property="Shape.Stroke"
Value="#FF1BBBFA" />
<Setter TargetName="ExpandPath"
Property="Shape.Fill"
Value="#00FFFFFF" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked"
Value="True">
<Setter TargetName="ExpandPath"
Property="UIElement.RenderTransform">
<Setter.Value>
<RotateTransform Angle="180"
CenterX="3"
CenterY="3" />
</Setter.Value>
</Setter>
<Setter TargetName="ExpandPath"
Property="Shape.Fill"
Value="#FF595959" />
<Setter TargetName="ExpandPath"
Property="Shape.Stroke"
Value="#FF262626" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Bd"
HorizontalAlignment="Stretch"
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Padding="{TemplateBinding Control.Padding}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True"
Grid.Column="1">
<ContentPresenter x:Name="PART_Header"
Content="{TemplateBinding HeaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentTemplateSelector="{TemplateBinding HeaderedItemsControl.HeaderTemplateSelector}"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Column="1"
Grid.Row="1" />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded"
Value="False">
<Setter TargetName="ItemsHost"
Property="UIElement.Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="ItemsControl.HasItems"
Value="False">
<Setter TargetName="Expander"
Property="UIElement.Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="TreeViewItem.IsSelected"
Value="True">
<Setter TargetName="Bd"
Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected"
Value="True" />
<Condition Property="Selector.IsSelectionActive"
Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled"
Value="False">
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Results:
Trying with Pikoh's solution:
<local:StretchingTreeView HorizontalAlignment="Stretch">
<local:StretchingTreeViewItem HorizontalAlignment="Stretch" Header="Stuff">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1" HorizontalAlignment="Stretch"></TextBox>
</Grid>
</local:StretchingTreeViewItem>
</local:StretchingTreeView>

Try something like this:
<TextBox Grid.Column="1" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Mode=OneWay}"></TextBox>
Edit
Ok,i've found one solution Here. It basically creates a new class inheriting Treeview:
class StretchingTreeView : TreeView
{
protected override DependencyObject GetContainerForItemOverride()
{
return new StretchingTreeViewItem();
}
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is StretchingTreeViewItem;
}
}
class StretchingTreeViewItem : TreeViewItem
{
public StretchingTreeViewItem()
{
this.Loaded += new RoutedEventHandler(StretchingTreeViewItem_Loaded);
}
private void StretchingTreeViewItem_Loaded(object sender, RoutedEventArgs e)
{
// The purpose of this code is to stretch the Header Content all the way accross the TreeView.
if (this.VisualChildrenCount > 0)
{
Grid grid = this.GetVisualChild(0) as Grid;
if (grid != null && grid.ColumnDefinitions.Count == 3)
{
// Remove the middle column which is set to Auto and let it get replaced with the
// last column that is set to Star.
grid.ColumnDefinitions.RemoveAt(1);
}
}
}
protected override DependencyObject GetContainerForItemOverride()
{
return new StretchingTreeViewItem();
}
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is StretchingTreeViewItem;
}
}
Example usage:
<Window x:Class="WpfApplication2.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication2"
Title="Window2" Height="300" Width="300">
<Grid>
<local:StretchingTreeView HorizontalAlignment="Stretch" >
<local:StretchingTreeViewItem Header="Stuff" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<Grid HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1" ></TextBox>
</Grid>
</local:StretchingTreeViewItem>
</local:StretchingTreeView>
</Grid>

The core of the issue (and the way to fix it) is described here:
The default ControlTemplate for the TreeViewItem uses a grid of 3 columns x 2 rows, defined such that the content cannot stretch horizontally. The author also gives a modified style, that changes the grid so that the content can stretch.
Note that the modified style sets the HorizontalContentAlignment of TreeViewItem to Center, and that the ControlTemplate uses this property for aligning the content.
To achieve the desired effect, either set HorizontalContentAlignment to Stretch in the modified style, or override just that property on the TreeView (or specific TreeViewItems).
Missing the BasedOn="{StaticResource {x:Type TreeViewItem}}" part causes the TreeViewItem to revert to using the default ControlTemplate, with the non-stretchable grid.
<Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
In a HierarchicalDataTemplate, the effect would be achieved by using the ItemContainerStyle property.
#pikoh's method of deriving from TreeView and TreeViewItem achieves the same, by modifying the grid from code.
Complete example:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<!-- Note that the following do not work, but I believe the top 2 should?! -->
<ToggleButton IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Name="Expander">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="UIElement.Focusable" Value="false" />
<Setter Property="FrameworkElement.Width" Value="16" />
<Setter Property="FrameworkElement.Height" Value="16" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Padding="5,5,5,5" Background="#00FFFFFF" Width="16" Height="16">
<Path Fill="#00FFFFFF" Stroke="#FF989898" Name="ExpandPath">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,0z" />
</Path.Data>
<Path.RenderTransform>
<RotateTransform Angle="135" CenterX="3" CenterY="3" />
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF1BBBFA" />
<Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#00FFFFFF" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="ExpandPath" Property="UIElement.RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" CenterX="3" CenterY="3" />
</Setter.Value>
</Setter>
<Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#FF595959" />
<Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF262626" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Bd"
HorizontalAlignment="Stretch"
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Padding="{TemplateBinding Control.Padding}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True"
Grid.Column="1">
<ContentPresenter x:Name="PART_Header"
Content="{TemplateBinding HeaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentTemplateSelector="{TemplateBinding HeaderedItemsControl.HeaderTemplateSelector}"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.Row="1" />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded" Value="False">
<Setter TargetName="ItemsHost" Property="UIElement.Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter TargetName="Expander" Property="UIElement.Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="TreeViewItem.IsSelected" Value="True">
<Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TreeView HorizontalAlignment="Stretch">
<TreeView.Resources>
<Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</TreeView.Resources>
<TreeViewItem Header="Stuff" HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1"></TextBox>
</Grid>
</TreeViewItem>
</TreeView>
</Window>

Due to an odd design decision by Microsoft when creating WPF, tree items can't stretch without replacing the control template.
See http://leecampbell.blogspot.com/2009/01/horizontal-stretch-on-treeviewitems.html
The required style is:
<Style TargetType="TreeViewItem"
BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<!--
Note that the following do not work, but I believe the top 2 should?!
<ToggleButton IsChecked="{TemplateBinding IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Property=IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Path=IsExpanded}" ClickMode="Press" Name="Expander">
-->
<ToggleButton IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Name="Expander">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="UIElement.Focusable"
Value="false" />
<Setter Property="FrameworkElement.Width"
Value="16" />
<Setter Property="FrameworkElement.Height"
Value="16" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Padding="5,5,5,5"
Background="#00FFFFFF"
Width="16"
Height="16">
<Path Fill="#00FFFFFF"
Stroke="#FF989898"
Name="ExpandPath">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,0z" />
</Path.Data>
<Path.RenderTransform>
<RotateTransform Angle="135"
CenterX="3"
CenterY="3" />
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver"
Value="True">
<Setter TargetName="ExpandPath"
Property="Shape.Stroke"
Value="#FF1BBBFA" />
<Setter TargetName="ExpandPath"
Property="Shape.Fill"
Value="#00FFFFFF" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked"
Value="True">
<Setter TargetName="ExpandPath"
Property="UIElement.RenderTransform">
<Setter.Value>
<RotateTransform Angle="180"
CenterX="3"
CenterY="3" />
</Setter.Value>
</Setter>
<Setter TargetName="ExpandPath"
Property="Shape.Fill"
Value="#FF595959" />
<Setter TargetName="ExpandPath"
Property="Shape.Stroke"
Value="#FF262626" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Bd"
HorizontalAlignment="Stretch"
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Padding="{TemplateBinding Control.Padding}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True"
Grid.Column="1">
<ContentPresenter x:Name="PART_Header"
Content="{TemplateBinding HeaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentTemplateSelector="{TemplateBinding HeaderedItemsControl.HeaderTemplateSelector}"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Column="1"
Grid.Row="1" />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded"
Value="False">
<Setter TargetName="ItemsHost"
Property="UIElement.Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="ItemsControl.HasItems"
Value="False">
<Setter TargetName="Expander"
Property="UIElement.Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="TreeViewItem.IsSelected"
Value="True">
<Setter TargetName="Bd"
Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected"
Value="True" />
<Condition Property="Selector.IsSelectionActive"
Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled"
Value="False">
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

It seems like Grid's HorizontalAlignment Issue. I've tried it in .Net Framework 4 and it all works fine. Seems like in 4.5 even though you specify HorizontalAlignment as Stretch, it actually doesn't stretch it. So you can do a binding like below:
<Grid HorizontalAlignment="Stretch"
Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}},Path=ActualWidth,Mode=OneTime}"
>
Cause you can see in the run time that TreeViewItem has Width expected but Grid doesn't.

All you need to do is add Grid.ColumnSpan='2' to the ControlTemplate of the TreeViewItem as shown below.
Thats it!
Explanation:
The default ControlTemplate places the Header Content in a Grid column that does not stretch. The Grid.ColumnSpan='2' instructs the Header content to span to the rest of the Grid.

How to change width for a scroll bar in WPF?

In my WPF application I need to change the width size for a SurfaceScrollViewer. At the moment I am using this code with no success.
Any idea how to sole this?
<Window.Resources>
<Style TargetType="ScrollBar">
<Setter Property="Width" Value="25"/>
</Style>
</Window.Resources>

What you need to do is create a style based on the SurfaceListBox (or whatever element you are using to hold your scrollable items).
This will generate a (very verbose unfortunately) complete listing of elements, including the SurfaceScrollViewer and its associated properties. In here you can find the scrollbar element and change it.
If you're not sure what I mean, have a look into a tutorial on restyling WPF checkboxes as it should give you some context.
I've attached a sample layout below:
<UserControl.Resources>
<!-- Base Grid style for 55 dpi -->
<Style TargetType="{x:Type Control}" x:Key="ControlBaseStyle">
<Setter Property="FocusVisualStyle"
Value="{x:Null}"/>
<Setter Property="SnapsToDevicePixels"
Value="False"/>
<Setter Property="FontFamily"
Value="Segoe360"/>
<Setter Property="FontWeight"
Value="Normal"/>
<Setter Property="FontSize"
Value="17"/>
<Setter Property="Padding"
Value="6,2,10,10"/>
<Setter Property="MinHeight"
Value="38"/>
<Setter Property="MinWidth"
Value="38"/>
<Setter Property="Margin"
Value="1"/>
<Setter Property="HorizontalContentAlignment"
Value="Left"/>
<Setter Property="VerticalContentAlignment"
Value="Top"/>
<Setter Property="BorderThickness"
Value="2"/>
</Style>
<!-- public section -->
<SolidColorBrush x:Key="ControlHitAreaBrush"
Color="#00FFFFFF"/>
<Style x:Key="UnstyledContainer" TargetType="{x:Type controls:SurfaceListBoxItem}" BasedOn="{StaticResource ControlBaseStyle}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static controls:SurfaceColors.ListBoxItemForegroundBrushKey}}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceListBoxItem}">
<Grid x:Name="Grid" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="10,0">
<Border x:Name="ButtonBody"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Border x:Name="PressOverlay"
Opacity="0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<ContentPresenter x:Name="Content"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Minimum HitArea Base Style for 55 dpi-->
<Style x:Key="SurfaceHitAreaBaseStyle"
TargetType="{x:Type Control}">
<Setter Property="SnapsToDevicePixels"
Value="False"/>
<Setter Property="Background"
Value="{StaticResource ControlHitAreaBrush}"/>
<Setter Property="IsTabStop"
Value="False"/>
<Setter Property="Focusable"
Value="False"/>
<Setter Property="FocusVisualStyle"
Value="{x:Null}"/>
<Setter Property="MinWidth"
Value="40" />
<Setter Property="MinHeight"
Value="40" />
</Style>
<Style x:Key="SurfaceVertScrollBarRepeatButton"
TargetType="{x:Type controls:SurfaceRepeatButton}" >
<Setter Property="Interval"
Value="150" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
<Setter Property="Background"
Value="{StaticResource ControlHitAreaBrush}" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceRepeatButton}">
<Grid Width="40" Background="{TemplateBinding Background}">
<Rectangle HorizontalAlignment="Center"
x:Name="Line"
MinWidth="2"
Fill="{DynamicResource {x:Static controls:SurfaceColors.TrackBackgroundBrushKey}}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Line"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar Vert Thumb -->
<Style x:Key="SurfaceScrollBarThumbStyle"
TargetType="{x:Type controls:SurfaceThumb}"
BasedOn="{StaticResource SurfaceHitAreaBaseStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceThumb}">
<ControlTemplate.Resources>
<Storyboard x:Key="Touch">
<DoubleAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Width"
To="16"/>
<ThicknessAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="-1,0,-1,0" />
</Storyboard>
<Storyboard x:Key="Release">
<DoubleAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Width"
To="14"/>
<ThicknessAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="0,0,0,0" />
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="Grid"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Rectangle x:Name="Thumb"
Height="Auto"
Width="14"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{DynamicResource {x:Static controls:SurfaceColors.ThumbEnabledBrushKey}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="controls:TouchExtensions.AreAnyInputDevicesCapturedWithin"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Touch}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Release}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Thumb"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar RepeatButton -->
<Style x:Key="SurfaceHorzScrollBarRepeatButton"
TargetType="{x:Type controls:SurfaceRepeatButton}" >
<Setter Property="Interval"
Value="150" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
<Setter Property="Background"
Value="{StaticResource ControlHitAreaBrush}" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceRepeatButton}">
<Grid Height="40" Background="{TemplateBinding Background}">
<Rectangle VerticalAlignment="Center"
x:Name="Line"
MinHeight="2"
Fill="{DynamicResource {x:Static controls:SurfaceColors.TrackBackgroundBrushKey}}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Line"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SurfaceScrollBarHorizThumbStyle"
TargetType="{x:Type controls:SurfaceThumb}"
BasedOn="{StaticResource SurfaceHitAreaBaseStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceThumb}">
<ControlTemplate.Resources>
<!-- Vertical orientation -->
<Storyboard x:Key="Touch">
<DoubleAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Height"
To="16"/>
<ThicknessAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="0,-1,0,-1" />
</Storyboard>
<Storyboard x:Key="Release">
<DoubleAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Height"
To="14"/>
<ThicknessAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="0,0,0,0" />
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="Grid"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" >
<Rectangle x:Name="Thumb"
Width="Auto"
Height="14"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{DynamicResource {x:Static controls:SurfaceColors.ThumbEnabledBrushKey}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="controls:TouchExtensions.AreAnyInputDevicesCapturedWithin"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Touch}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Release}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Thumb"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar -->
<Style x:Key="SurfaceScrollBarStyle"
TargetType="{x:Type controls:SurfaceScrollBar}"
>
<Style.Resources>
<System:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">38</System:Double>
<System:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">38</System:Double>
</Style.Resources>
<Setter Property="Stylus.IsPressAndHoldEnabled"
Value="False"/>
<Setter Property="Stylus.IsFlicksEnabled"
Value="False"/>
<Setter Property="Width"
Value="38"/>
<Setter Property="Height"
Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<!-- vertical scroll bar -->
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollBar}">
<Grid x:Name="GridRoot" Background="{TemplateBinding Background}">
<Border x:Name="Track"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Track x:Name="PART_Track"
IsDirectionReversed="True">
<Track.IncreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="IncreaseRepeat"
Background="{TemplateBinding Background}"
HorizontalAlignment="Center"
Style="{StaticResource SurfaceVertScrollBarRepeatButton}"
Command="ScrollBar.PageDownCommand"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="DecreaseRepeat"
Background="{TemplateBinding Background}"
HorizontalAlignment="Center"
Style="{StaticResource SurfaceVertScrollBarRepeatButton}"
Command="ScrollBar.PageUpCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<controls:SurfaceThumb Style="{StaticResource SurfaceScrollBarThumbStyle}"
Background="{TemplateBinding Background}"
HorizontalAlignment="Center"
x:Name="Thumb"/>
</Track.Thumb>
</Track>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!-- Animates Scrollbar from small to large state -->
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="IsEnabled"
TargetName="PART_Track"
Value="False"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.BasedOn>
<StaticResource ResourceKey="SurfaceHitAreaBaseStyle"/>
</Style.BasedOn>
<Style.Triggers>
<!-- Horizontal orientation -->
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width"
Value="Auto"/>
<Setter Property="Height"
Value="38"/>
<!-- change the whole template -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollBar}">
<Grid x:Name="GridRoot" Background="{TemplateBinding Background}">
<Border x:Name="Track"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Track x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="DecreaseRepeat"
Background="{TemplateBinding Background}"
VerticalAlignment="Center"
Style="{StaticResource SurfaceHorzScrollBarRepeatButton}"
Command="ScrollBar.PageLeftCommand" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="IncreaseRepeat"
Background="{TemplateBinding Background}"
VerticalAlignment="Center"
Style="{StaticResource SurfaceHorzScrollBarRepeatButton}"
Command="ScrollBar.PageRightCommand"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<controls:SurfaceThumb Style="{StaticResource SurfaceScrollBarHorizThumbStyle}"
Background="{TemplateBinding Background}"
VerticalAlignment="Center"
x:Name="Thumb"/>
</Track.Thumb>
</Track>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!-- Animates Scrollbar from small to large state -->
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Opacity"
TargetName="IncreaseRepeat"
Value="0.33"/>
<Setter Property="Opacity"
TargetName="DecreaseRepeat"
Value="0.33"/>
<Setter Property="IsEnabled"
TargetName="PART_Track"
Value="False"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- ScrollViewerBase -->
<Style x:Key="SurfaceScrollViewerStyle"
TargetType="{x:Type controls:SurfaceScrollViewer}">
<Setter Property="Elasticity"
Value="0.4,0.4" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollViewer}">
<Grid Background="{TemplateBinding Background}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="PART_ElasticBorder"
Background="{TemplateBinding Background}">
<ScrollContentPresenter
Margin="-1,-1,-1,-1"
Grid.Column="0"
Grid.ColumnSpan="1"
Grid.Row="0"
Grid.RowSpan="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</Border>
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
x:Name="PART_HorizontalScrollBar"
Grid.Column="0"
Grid.Row="1"
Orientation="Horizontal"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="HorizontalScrollBar"
Height="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ViewportSize="{TemplateBinding ViewportWidth}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Foreground="{x:Null}"/>
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Grid.Row="0"
Orientation="Vertical"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="VerticalScrollBar"
Width="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ViewportSize="{TemplateBinding ViewportHeight}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Foreground="{x:Null}"
IsEnabled="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="IsEnabled"
TargetName="PART_HorizontalScrollBar"
Value="False" />
<Setter Property="IsEnabled"
TargetName="PART_VerticalScrollBar"
Value="False" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Listbox ScrollView -->
<Style x:Key="SurfaceListBoxScrollViewerStyle"
TargetType="{x:Type controls:SurfaceScrollViewer}"
BasedOn="{StaticResource SurfaceScrollViewerStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollViewer}">
<Grid
HorizontalAlignment="Stretch"
Margin="{TemplateBinding BorderThickness}"
VerticalAlignment="Stretch"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border x:Name="PART_ElasticBorder"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
BorderBrush="Transparent"
>
<ScrollContentPresenter Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
Grid.ColumnSpan="1"
Grid.RowSpan="1"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
x:Name="PART_HorizontalScrollBar"
Grid.Row="1"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ViewportWidth}"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Background="{TemplateBinding Background}"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="HorizontalScrollBar"
Height="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ClipToBounds="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Grid.Row="0"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="VerticalScrollBar"
Width="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ClipToBounds="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Border x:Name="Container"
Grid.Column="1"
Grid.Row="1"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
BorderBrush="Transparent"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="IsEnabled"
TargetName="PART_HorizontalScrollBar"
Value="False"/>
<Setter Property="IsEnabled"
TargetName="PART_VerticalScrollBar"
Value="False"/>
<Setter Property="BorderBrush"
TargetName="PART_ElasticBorder"
Value="{DynamicResource {x:Static controls:SurfaceColors.ControlBorderDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ListBox -->
<Style x:Key="UnstyledList" TargetType="{x:Type controls:SurfaceListBox}"
BasedOn="{StaticResource ControlBaseStyle}">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="False" />
<Setter Property="controls:SurfaceScrollViewer.Elasticity"
Value="0,0.4" />
<Setter Property="MinHeight"
Value="80" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static controls:SurfaceColors.ButtonForegroundBrushKey}}"/>
<Setter Property="BorderBrush"
Value="{DynamicResource {x:Static controls:SurfaceColors.ListBoxBorderBrushKey}}"/>
<Setter Property="Padding"
Value="0" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="Margin"
Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceListBox}">
<Grid SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" >
<controls:SurfaceScrollViewer
Style="{StaticResource SurfaceListBoxScrollViewerStyle}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
Focusable="False"
Foreground="{TemplateBinding Foreground}"
Width="Auto"
Height="Auto"
MinHeight="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"
x:Name="scrollViewer"
Elasticity="{TemplateBinding controls:SurfaceScrollViewer.Elasticity}">
<ItemsPresenter ClipToBounds="False"
MinHeight="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"/>
</controls:SurfaceScrollViewer>
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping"
Value="True">
<Setter Property="ScrollViewer.CanContentScroll"
Value="False" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<s:SurfaceListBox x:Name="someList" Background="{x:Null}" Foreground="{x:Null}" BorderBrush="{x:Null}" ItemContainerStyle="{DynamicResource UnstyledContainer}" Style="{DynamicResource UnstyledList}" />

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Creating a flat checkbox style - c#

Related

Why is my ScrollViewer's repeatbutton white at the bottom?

ControlTemplate DataGridColumnHeader control visible outside columns

WPF TreeView Disable Children Selection

HorizontalAlignment="Stretch" not working in TreeViewItem

How to change width for a scroll bar in WPF?

Categories

Resources