WPF TreeView Disable Children Selection - c#

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>

Related

Thumb of scrollbar not working according to Content height for WPF

I working for a project and i have some trouble with Listview's scrollbar
Problem: this scrollbar thumb is shortly according to content height.
I find it. some solve but i didint find it.
what add to this style ? or discard anything
e.g content height 300 but thumb just going between up/down 0px and 30px
This is style of Scroolbar.xaml
<Style x:Key="ScrollBarTrackThumb" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid" Height="19">
<Rectangle HorizontalAlignment="Stretch" />
<Border
x:Name="CornerScrollBarRectangle"
Margin="0,1,0,1"
Background="{TemplateBinding Background}"
CornerRadius="50" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle" Property="Width" Value="Auto" />
<Setter TargetName="CornerScrollBarRectangle" Property="Height" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="True" />
<Setter Property="Foreground" Value="#5A3CB6" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Width" Value="19" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid
x:Name="GridRoot"
Width="19"
Height="300"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Rectangle
Width="1"
Margin="0,40"
VerticalAlignment="Stretch"
Stroke="LightGray" />
<Track
x:Name="PART_Track"
Focusable="false"
IsDirectionReversed="true">
<Track.Thumb>
<Thumb
x:Name="Thumb"
Height="19"
Margin="0,30,0,0"
VerticalAlignment="Top"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarTrackThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Focusable="false"
Opacity="0" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton
x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Focusable="false"
Opacity="0" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">
<Setter TargetName="Thumb" Property="Background" Value="{DynamicResource ButtonSelectBrush}" />
</Trigger>
<Trigger SourceName="Thumb" Property="IsDragging" Value="true">
<Setter TargetName="Thumb" Property="Background" Value="{DynamicResource DarkBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Thumb" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What can I do that?

How to resolve some design issues in my WPF datagrid

I have a datagrid in my window (WPF) with the below styling (image & XAML shown below)
datagrid
<!-- Style of data grid -->
<Style TargetType="{x:Type DataGrid}" x:Key="test">
<Setter Property="ColumnHeaderStyle" >
<Setter.Value>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Height" Value="35" />
<Setter Property="SeparatorBrush" Value="DarkRed" />
<Setter Property="FontWeight" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="columnHeaderBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="LightYellow" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="columnHeaderBorder"
BorderThickness="1"
Padding="3,0,3,0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#18aab8" />
<GradientStop Offset="1" Color="#10717a" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#661fe0" />
<GradientStop Offset="1" Color="#4e12b5" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="RowStyle" >
<Setter.Value>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Foreground" Value="#FFB3B3B3"/>
<Setter Property="Height" Value="25"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FF262626"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#FF383838"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#FF333333"/>
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Setter Property="CellStyle">
<Setter.Value>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="#121212">
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="SeaGreen"/>
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
<!-- Window.xaml -->
<DataGrid Background="#181735" Style="{StaticResource test}"
CanUserAddRows="false"
Grid.Column="4"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
Margin="15,0,10,5"
VerticalAlignment="Stretch" />
The problems are
There seems to be an extra column with no data for some reason in the datagrid. How do I get rid of that? I've tried adding something like
<Setter Property="Width" Value="*"/>` inside `<Setter Property="RowStyle"> <Setter.Value> <Style TargetType="{x:Type DataGridRow}">
but getting an error:
System.Windows.Markup.XamlParseException: 'Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception.' Line number #### and line position ###. ---> System.FormatException: '*' string cannot be converted to Length.`
There is a white type of border on extreme left side of the data grid(see 1st image), how do I get rid of that & also the scroll bar design needs to be changed as well.
Does anyone has a suggestion what type of scroll bar should go well with my design. If you have something like that please share.
scrollbar
I'm new to this, so please help.

For your first and second question, you can use the following properties on the Datagrid style directly:
<Style TargetType="{x:Type DataGrid}" x:Key="test">
<Setter Property="ColumnWidth" Value="*"></Setter>
<Setter Property="HeadersVisibility" Value="Column"></Setter>
...
</Style>
ColumnWidth set to "*" allows you to use equal width on all your columns. In case you use AutoGenerateColumns to false on your Grid, you can also define the widths of each column on a case-by-case basis.
HeadersVisibility set to "Column" hide the left row selector.
Concerning the Style of the Scrollbar, I share you a style I use:
<Style x:Key="ScrollBarCustomThumb" 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 TargetName="CornerScrollBarRectangle"
Property="Height"
Value="6" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ScrollBar">
<Setter Property="Stylus.IsFlicksEnabled" Value="false" />
<Setter Property="Foreground" Value="#c1c1c1" />
<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="10"
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 ScrollBarCustomThumb}" />
</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="#a8a8a8"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger SourceName="Thumb"
Property="IsDragging"
Value="true">
<Setter Value="#787878"
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>
It's up to you to judge whether or not it suits your design, but in any case it will give you a base that you can modify!

WPF - Hide Selected Item / Text Box portion from Combobox Control

I'm looking for a way to hide the Selected Item / Textbox portion of the wpf combobox, leaving only the drop down button so users can still interact with the list.
I cannot find a property to toggle this behaviour, I was curious to know if there is a way to change visibility of certain portions of this control?
If anyone has any suggestions, It'd be greatly appreciated.

The easiest way to hide the text part is probably to set the Width of the ComboBox:
<ComboBox Width="20" />
Otherwise, you could always define your own custom ControlTemplate and set the Template property to this one but this requires some more effort.

EDIT - To use the below code you will need to use ComboBoxStyleWithoutText as a style on your combobox
To achieve this I had to re-create a combo-box and edit the template itself whilst tweaking the individual styles to suit the colour scheme of our app.
This is the result
In the application
Please feel free to use the code below, it likely has some custom colours I've used from other dictionaries (Change these to whatever suits your app)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Shared.xaml" />
<ResourceDictionary Source="Colours.xaml" />
<ResourceDictionary Source="Brushes.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- SimpleStyles: ComboBox -->
<ControlTemplate x:Key="ComboBoxToggleButton"
TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="2"
Background="{StaticResource ScreenBackgroundBrush}"
BorderBrush="{StaticResource GridBorderBrush}"
BorderThickness="2" />
<Border Grid.Column="0"
CornerRadius="2,0,0,2"
Margin="1"
Background="{StaticResource ScreenBackgroundBrush}"
BorderBrush="{StaticResource GridBorderBrush}"
BorderThickness="1,1,1,1" />
<Path x:Name="Arrow"
Grid.Column="1"
Fill="{StaticResource SecondaryControlBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DataGridHeaderRowBackgroundBrush}" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DataGridHeaderRowBackgroundBrush}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Opacity"
Value="0.25" />
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
<Setter TargetName="Arrow"
Property="Fill"
Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="TextBox">
<Border x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="ComboBoxStyleWithoutText" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Background" Value="Green" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0"></ColumnDefinition>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<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="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,3,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,3,3"
Focusable="True"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<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 TextBoxBrush}"
BorderThickness="2"
BorderBrush="{StaticResource SolidBorderBrush}" />
<ScrollViewer Margin="4,6,2,2"
SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="DropDownBorder"
Property="MinHeight"
Value="95" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
<Trigger SourceName="Popup"
Property="Popup.AllowsTransparency"
Value="true">
<Setter TargetName="DropDownBorder"
Property="CornerRadius"
Value="4" />
<Setter TargetName="DropDownBorder"
Property="Margin"
Value="0,2,0,0" />
</Trigger>
<Trigger Property="IsEditable"
Value="true">
<Setter Property="IsTabStop"
Value="false" />
<Setter TargetName="PART_EditableTextBox"
Property="Visibility"
Value="Visible" />
<Setter TargetName="ContentSite"
Property="Visibility"
Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type ComboBox}"
TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="true" />
<Setter Property="MinWidth"
Value="120" />
<Setter Property="MinHeight"
Value="20" />
<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="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<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 TextBoxBrush}"
BorderThickness="2"
BorderBrush="{StaticResource SolidBorderBrush}" />
<ScrollViewer Margin="4,6,4,6"
SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="DropDownBorder"
Property="MinHeight"
Value="95" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
<Trigger SourceName="Popup"
Property="Popup.AllowsTransparency"
Value="true">
<Setter TargetName="DropDownBorder"
Property="CornerRadius"
Value="4" />
<Setter TargetName="DropDownBorder"
Property="Margin"
Value="0,2,0,0" />
</Trigger>
<Trigger Property="IsEditable"
Value="true">
<Setter Property="IsTabStop"
Value="false" />
<Setter TargetName="PART_EditableTextBox"
Property="Visibility"
Value="Visible" />
<Setter TargetName="ContentSite"
Property="Visibility"
Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
<!-- SimpleStyles: ComboBoxItem -->
<Style x:Key="{x:Type ComboBoxItem}"
TargetType="ComboBoxItem">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Background"
Value="{StaticResource ScreenBackgroundBrush}"/>
<Setter Property="Foreground"
Value="{StaticResource PrimaryTextBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border Name="Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DataGridRowSelectedBrush}" />
<Setter TargetName="Border"
Property="CornerRadius"
Value="2" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How do I change the colour of a WPF Checkbox tick?

I would like to change the colour of the tick in my WPF CheckBox from black to white. I have tried to do this in the CheckBoxdeclaration as such:
<CheckBox Background="black" Foreground="White" BorderBrush="#262626"/>
The background and border successfully change, but not the tick itself.

You could copy the entire checkbox style from the MSDN server but because its very confusing to work with in the beginning of any WPF carreer, I compiled the (in my opinion) neccessary bits into one style thats a little easier to understand:
<Style TargetType="{x:Type CheckBox}">
<Setter Property="Background" Value="White" />
<Setter Property="BorderBrush" Value="#FF262E34"/>
<Setter Property="Foreground" Value="#FF262E34"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
<Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Width="15" Height="15">
<!-- your color here -->
<Path Stretch="Uniform" Width="15" Height="10" Fill="HotPink" Name="eliCheck" 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 " Visibility="Collapsed"/>
</Border>
<TextBlock Margin="5,0,0,0" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}"></TextBlock>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#FF9C9E9F" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="LightGray" />
<Setter Property="Foreground" Value="Gray" />
<Setter Property="BorderBrush" Value="Gray"/>
<Setter TargetName="eliCheck" Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="eliCheck" Property="Visibility" Value="Visible"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

The CheckBox control has various visual states with different colors for background, border and option mark glyph. You can refer to the documentation for the required parts and visual states.
If you want to edit the colors, you have to change the default style and control template. You can extract it using Blend or Visual Studio. Below is the default template. What you need to do is copy these resources to a resource dictionary in scope, e.g. the application resources and adapt the SolidColorBurshes.
<SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FFF3F9FF"/>
<SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF5593FF"/>
<SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FFD9ECFF"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FFE6E6E6"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2"
SnapsToDevicePixels="true"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeDashArray="1 2"
StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="OptionMarkFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0"
SnapsToDevicePixels="true"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeDashArray="1 2"
StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CheckBoxStyle"
TargetType="{x:Type CheckBox}">
<Setter Property="FocusVisualStyle"
Value="{StaticResource FocusVisual}" />
<Setter Property="Background"
Value="{StaticResource OptionMark.Static.Background}" />
<Setter Property="BorderBrush"
Value="{StaticResource OptionMark.Static.Border}" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid x:Name="templateRoot"
Background="Transparent"
SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="checkBoxBorder"
Margin="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="markGrid">
<Path x:Name="optionMark"
Margin="1"
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="{StaticResource OptionMark.Static.Glyph}"
Opacity="0"
Stretch="None" />
<Rectangle x:Name="indeterminateMark"
Margin="2"
Fill="{StaticResource OptionMark.Static.Glyph}"
Opacity="0" />
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Focusable="False"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent"
Value="true">
<Setter Property="FocusVisualStyle"
Value="{StaticResource OptionMarkFocusVisual}" />
<Setter Property="Padding"
Value="4,-1,0,0" />
</Trigger>
<Trigger Property="IsMouseOver"
Value="true">
<Setter TargetName="checkBoxBorder"
Property="Background"
Value="{StaticResource OptionMark.MouseOver.Background}" />
<Setter TargetName="checkBoxBorder"
Property="BorderBrush"
Value="{StaticResource OptionMark.MouseOver.Border}" />
<Setter TargetName="optionMark"
Property="Fill"
Value="{StaticResource OptionMark.MouseOver.Glyph}" />
<Setter TargetName="indeterminateMark"
Property="Fill"
Value="{StaticResource OptionMark.MouseOver.Glyph}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="checkBoxBorder"
Property="Background"
Value="{StaticResource OptionMark.Disabled.Background}" />
<Setter TargetName="checkBoxBorder"
Property="BorderBrush"
Value="{StaticResource OptionMark.Disabled.Border}" />
<Setter TargetName="optionMark"
Property="Fill"
Value="{StaticResource OptionMark.Disabled.Glyph}" />
<Setter TargetName="indeterminateMark"
Property="Fill"
Value="{StaticResource OptionMark.Disabled.Glyph}" />
</Trigger>
<Trigger Property="IsPressed"
Value="true">
<Setter TargetName="checkBoxBorder"
Property="Background"
Value="{StaticResource OptionMark.Pressed.Background}" />
<Setter TargetName="checkBoxBorder"
Property="BorderBrush"
Value="{StaticResource OptionMark.Pressed.Border}" />
<Setter TargetName="optionMark"
Property="Fill"
Value="{StaticResource OptionMark.Pressed.Glyph}" />
<Setter TargetName="indeterminateMark"
Property="Fill"
Value="{StaticResource OptionMark.Pressed.Glyph}" />
</Trigger>
<Trigger Property="IsChecked"
Value="true">
<Setter TargetName="optionMark"
Property="Opacity"
Value="1" />
<Setter TargetName="indeterminateMark"
Property="Opacity"
Value="0" />
</Trigger>
<Trigger Property="IsChecked"
Value="{x:Null}">
<Setter TargetName="optionMark"
Property="Opacity"
Value="0" />
<Setter TargetName="indeterminateMark"
Property="Opacity"
Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Since there are different colors for the Static, MouseOver, Pressed and Disabled states, you might have to derive a small color palette from your background, border and foreground colors.
In order to use the adapted check box style, you can reference it explicitly by key:
<CheckBox Style="{StaticResource CheckBoxStyle}" />
You can also define an implicit style like below after the other resources, so the style will automatically be applied to all CheckBoxes in scope of the containing resource dictionary.
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource CheckBoxStyle}"/>
In this case you do not reference the style explicitly anymore.
<CheckBox />

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}" />

Categories