Develop Reference

How to change the position of Expand / Collapse button in Tree View in WPF?

I have a tree view in WPF in C# with parent and child nodes. I want to bring the Expand/Collapse button to the right side. I tried the flow direction property but it is not working as expected.
How to change the position of the Expand/Collapse button in tree view?

Your best approch if you override the Treeview Control Template. Here is an example:
<Window.Resources>
<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>
<Style x:Key="{x:Type TreeView}"
TargetType="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"
CornerRadius="1"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}" />
</Border.Background>
<ScrollViewer Focusable="False"
CanContentScroll="False"
Padding="4">
<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">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Collapsed">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="Expanded">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Collapsed"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="1,1,1,1"
Data="M 4 0 L 8 4 L 4 8 Z">
<Path.Fill>
<SolidColorBrush Color="{DynamicResource GlyphColor}" />
</Path.Fill>
</Path>
<Path x:Name="Expanded"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="1,1,1,1"
Data="M 0 4 L 8 4 L 4 8 Z"
Visibility="Hidden">
<Path.Fill>
<SolidColorBrush Color="{DynamicResource GlyphColor}" />
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="0,0,0,0"
StrokeThickness="5"
Stroke="Black"
StrokeDashArray="1 2"
Opacity="0" />
</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 {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="FocusVisualStyle"
Value="{StaticResource TreeViewItemFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition MinWidth="19" Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)"
>
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="SelectedInactive">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ExpansionStates">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ItemsHost">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}"
ClickMode="Press"
Grid.Column="1"
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border x:Name="Bd"
Grid.Column="0"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="PART_Header"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander"
Property="Visibility"
Value="Hidden" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader" Value="false" />
<Condition Property="Width" Value="Auto" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinWidth"
Value="75" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader" Value="false" />
<Condition Property="Height" Value="Auto" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinHeight"
Value="19" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TreeView>
<TreeViewItem Header="Cold Drinks">
<TreeViewItem Header="Coke"></TreeViewItem>
<TreeViewItem Header="Pepsi"></TreeViewItem>
<TreeViewItem Header="Orange Juice"></TreeViewItem>
<TreeViewItem Header="Milk"></TreeViewItem>
<TreeViewItem Header="Iced Tea"></TreeViewItem>
<TreeViewItem Header="Mango Shake"></TreeViewItem>
</TreeViewItem>
</TreeView>
</Grid>
Here is the result:

Non-changeable navigation button

Introduction
I downloaded a template of a Universal Windows Platform (UWP) application and started making changes right away.
Problem
When I try to change the button responsible for shortening the left navigation page, I cannot make a change.
Source Code
<Page
x:Class="AVE_VSCODE_EXTENSION.Views.ShellPage"
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:i="using:Microsoft.Xaml.Interactivity"
xmlns:behaviors="using:AVE_VSCODE_EXTENSION.Behaviors"
xmlns:winui="using:Microsoft.UI.Xaml.Controls"
xmlns:helpers="using:AVE_VSCODE_EXTENSION.Helpers"
xmlns:views="using:AVE_VSCODE_EXTENSION.Views"
Loaded="OnLoaded"
mc:Ignorable="d">
<winui:NavigationView
x:Name="navigationView"
IsBackButtonVisible="Visible"
IsBackEnabled="{x:Bind IsBackEnabled, Mode=OneWay}"
SelectedItem="{x:Bind Selected, Mode=OneWay}"
ItemInvoked="OnItemInvoked"
IsSettingsVisible="True"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
<winui:NavigationView.MenuItems>
<!--
TODO WTS: Change the symbols for each item as appropriate for your app
More on Segoe UI Symbol icons: https://learn.microsoft.com/windows/uwp/style/segoe-ui-symbol-font
Or to use an IconElement instead of a Symbol see https://github.com/Microsoft/WindowsTemplateStudio/blob/release/docs/UWP/projectTypes/navigationpane.md
Edit String/en-US/Resources.resw: Add a menu item title for each page
-->
<winui:NavigationViewItem x:Uid="Shell_Main" Icon="Globe" helpers:NavHelper.NavigateTo="views:MainPage" />
<winui:NavigationViewItem x:Uid="Shell_Chart" Icon="Admin" helpers:NavHelper.NavigateTo="views:ChartPage" />
</winui:NavigationView.MenuItems>
<i:Interaction.Behaviors>
<behaviors:NavigationViewHeaderBehavior
DefaultHeader="{x:Bind Selected.Content, Mode=OneWay}">
<behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock
Text="{Binding}"
Style="{ThemeResource TitleTextBlockStyle}"
Margin="{StaticResource SmallLeftRightMargin}" />
</Grid>
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
</behaviors:NavigationViewHeaderBehavior>
</i:Interaction.Behaviors>
<Grid>
<Frame x:Name="shellFrame" />
</Grid>
</winui:NavigationView>
</Page>

When I try to change the button responsible for shortening the left navigation page, I cannot make a change.
The shortening button of navigation page is PaneToggleButton, and it has independent style to descript the content, you could place the following style in your app's resource and edit the Icon
Textblock to approach like the following.
<Application.Resources>
<Style x:Key="PaneToggleButtonStyle" TargetType="Button">
<Setter Property="FontSize" Value="16" />
<Setter Property="FontFamily" Value="{StaticResource SymbolThemeFontFamily}" />
<Setter Property="MinHeight" Value="{StaticResource PaneToggleButtonHeight}" />
<Setter Property="MinWidth" Value="{StaticResource PaneToggleButtonWidth}" />
<Setter Property="Padding" Value="0" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
<Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
<Setter Property="BorderThickness" Value="{ThemeResource NavigationViewToggleBorderThickness}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid
x:Name="LayoutRoot"
Height="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{ThemeResource PaneToggleButtonHeight}" />
</Grid.RowDefinitions>
<Viewbox
x:Name="IconHost"
Width="16"
Height="16"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw">
<TextBlock
x:Name="Icon"
AutomationProperties.AccessibilityView="Raw"
FontSize="{TemplateBinding FontSize}"
Text="" />
</Viewbox>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
VerticalContentAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
FontSize="{TemplateBinding FontSize}" />
<Border
x:Name="RevealBorder"
Grid.ColumnSpan="2"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundChecked}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundChecked}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckedPointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckedPressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckedDisabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>

CheckBox changed background on mouse over and in checked state

I'm writing template for CheckBox control.
Here is CheckBox template code:
<Style x:Key="{x:Type CheckBox}"
TargetType="{x:Type CheckBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Border x:Name="Border"
Width="15"
Height="15"
CornerRadius="1"
BorderThickness="1"
BorderBrush="DarkGray"
Background="White">
</Border>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource DefaultButtonBlueBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource DefaultButtonBlueBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="4,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
RecognizesAccessKey="True" />
</BulletDecorator>
</Setter.Value>
</Setter>
</Style>
I want to change border background color when checkbox in checked state and mouse over. I tried to specify MultiTrigger like that:
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="Border" Property="Background" Value="Red" />
</MultiTrigger.Setters>
</MultiTrigger>
But this don't work.
Is this even possible in wpf?
Thank you.

WPF (opposed to UWP) has stricter limitations regarding the possibilities when using the VisualStateManager. You can only target a property once per state. Which makes quite sense. When in the Checked state, the property BorderBackground is animated to the corresponding value. When your MultiTrigger is activated it tries to modify the Border.Background property, which is currently blocked by the active animation.
You can either replace the relevant visual states with triggers or let animation and trigger target different elements.
Simply overlay the content of the BulletDecorator with an additional Border and toggle its Background instead:
<Style x:Key="{x:Type CheckBox}" TargetType="{x:Type CheckBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid>
<Border x:Name="MouseOverBorder"
Panel.ZIndex="1"
Background="Transparent"
CornerRadius="1"
BorderThickness="1" />
<Border x:Name="Border"
Width="15"
Height="15"
CornerRadius="1"
BorderThickness="1"
BorderBrush="DarkGray"
Background="White" />
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource DefaultButtonBlueBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource DefaultButtonBlueBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="4,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
RecognizesAccessKey="True" />
</BulletDecorator>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="MouseOverBorder"
Property="Background"
Value="Red" />
</MultiTrigger.Setters>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

TreeViewItem toggle doesn't work with custom style

I need to make border for all items of treeListView, up and down split line.
I use this code(little edited default template):
<Style x:Key="CustomTreeViewBorder" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="0 1 0 1" />
<Setter Property="BorderBrush" Value="{StaticResource LogTreeViewDataBorderBrush}" />
</Style>
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="1,0,0,0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Border x:Name="PROBLEM BORDER" Style="{StaticResource CustomTreeViewBorder}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<vs:VisualStateManager.VisualStateGroups>
<vs:VisualStateGroup x:Name="SelectionStates">
<vs:VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ExpanderBorder" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Panel.Background). (SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vs:VisualState>
<vs:VisualState x:Name="Unselected" />
<vs:VisualState x:Name="SelectedInactive">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="ExpanderBorder" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Bd" Storyboard.TargetProperty="(Panel.Background). (SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</vs:VisualState>
</vs:VisualStateGroup>
<vs:VisualStateGroup x:Name="ExpansionStates">
<vs:VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vs:VisualState>
<vs:VisualState x:Name="Collapsed" />
</vs:VisualStateGroup>
</vs:VisualStateManager.VisualStateGroups>
<Border x:Name="ExpanderBorder">
<Border.Background>
<SolidColorBrush Color="Transparent" />
</Border.Background>
<ToggleButton x:Name="Expander"
ClickMode="Press"
IsChecked="{Binding IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource ExpandCollapseToggleStyle}" />
</Border>
<Border x:Name="Bd"
Grid.Row="0"
Grid.Column="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="PART_Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentSource="Header" />
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1"
Visibility="Collapsed" /></Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader" Value="false" />
<Condition Property="Width" Value="Auto" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header" Property="MinWidth" Value="75" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader" Value="false" />
<Condition Property="Height" Value="Auto" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header" Property="MinHeight" Value="19" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If add "Problem Border" than my toggle buttons stop working. Without it all works fine. How can i add a border to all items?

When you add Border, which becomes root element of your template, you need to move VisualStateGroups from Grid to that Border (top level element of your ControlTemplate)
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<!-- other setters -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Border x:Name="PROBLEM BORDER" Style="{StaticResource CustomTreeViewBorder}">
<vs:VisualStateManager.VisualStateGroups>
<!-- visual states -->
</vs:VisualStateManager.VisualStateGroups>
<Grid>
<!-- Grid content -->
</Grid>
</Border>
<ControlTemplate.Triggers>
<!-- template triggers -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Change Button Background color on EventTrigger in WPF

I am trying to change the Background color of my Button when the user clicks it. I am using triggers to achieve it.
My XAML is:
<UserControl.Resources>
<Style x:Key="myBtnStyle" TargetType="{x:Type Button}">
<!--VerticalAlignment="Top" VerticalContentAlignment="Top" Background="Blue" HorizontalAlignment="Right"
Height="24" Width="25" FontSize="16" FontWeight="Bold" -->
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="Blue" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Height" Value="24" />
<Setter Property="Width" Value="25" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold" />
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
<!--
<ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}">
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True" >
<Setter Property="Background" Value="Cyan" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate> -->
</UserControl.Resources>
<Button DockPanel.Dock="Right" Style="{StaticResource myBtnStyle}" Name="btnVert" Click="btnVert_Click"
Margin="10,10,10,0" ToolTip="Vertical" Content="V" />
I tried various settings, but couldn't get the Background color changed on the Button when mouse is clicked. Also referred various sites - MSDN, SharpCorner, CodeProject and many others too. Couldn't get where am I going wrong?
How to get the Background color changed of Button on clicked event?
Thanks.

In this situation, you need to use EventTrigger with Storyboard, because [Source]:
EventTrigger - represents a trigger that applies a set of actions (animation storyboards) in response to an event.
Example:
<Window.Resources>
<SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" />
<Storyboard x:Key="ChangeBackgroundStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ChangeBackgroundButton"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource ButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Grid.Triggers>
<EventTrigger SourceName="ChangeBackgroundButton"
RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource ChangeBackgroundStoryboard}" />
</EventTrigger>
</Grid.Triggers>
<Button Name="ChangeBackgroundButton"
Content="TestButton"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Grid>
Here Storyboard defined in resources, which defines the color ButtonBrush, which is set at the Click event. For more information, please see:
MSDN: EventTrigger
Edit
Yes, EventTrigger can be used in the template like this:
<Window.Resources>
<SolidColorBrush x:Key="IsMouseOverBackground" Color="AliceBlue" />
<SolidColorBrush x:Key="IsPressedBrush" Color="Gainsboro" />
<SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" />
<Storyboard x:Key="ChangeBackgroundStoryboard">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Style x:Key="FlatButtonBaseStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="60" />
<Setter Property="Height" Value="20" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter Name="Content"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextBlock.FontFamily="{TemplateBinding FontFamily}"
TextBlock.FontSize="{TemplateBinding FontSize}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource IsMouseOverBackground}" />
<Setter Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource IsPressedBrush}" />
</Trigger>
<!-- Here -->
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource ChangeBackgroundStoryboard}" />
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<WrapPanel>
<Button Content="Fisrt"
Style="{StaticResource FlatButtonBaseStyle}"
Margin="10" />
<Button Content="Second"
Style="{StaticResource FlatButtonBaseStyle}"
Margin="10" />
<Button Content="Third"
Style="{StaticResource FlatButtonBaseStyle}"
Margin="10" />
</WrapPanel>
As for the possibility of contact to the other buttons through one Storyboard, you can do so:
<Window.Resources>
<SolidColorBrush x:Key="ButtonBrush" Color="OrangeRed" />
<SolidColorBrush x:Key="DefaultButtonBrush" Color="BlueViolet" />
</Window.Resources>
<WrapPanel>
<WrapPanel.Triggers>
<EventTrigger SourceName="FisrtButton"
RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FisrtButton"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource ButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondButton"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource DefaultButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ThirdButton"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0:0:0"
Value="{StaticResource DefaultButtonBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</WrapPanel.Triggers>
<Button Name="FisrtButton"
Content="Fisrt"
Margin="10" />
<Button Name="SecondButton"
Content="Second"
Margin="10" />
<Button Name="ThirdButton"
Content="Third"
Margin="10" />
</WrapPanel>
In this case, you just need to specify TargetName for every Button, when you click on the first Button, the color of the remaining changes to default BlueViolet:

In WPF, you can animate objects by using Storyboard.