I have a little WPF I am creating (Self taught).
It was created in VS2021 I believe however my PC died (Motherboard).
I have reinstalled everything on a new PC and brought over the backups and have since installed VS2022.
Upon opening I am getting heaps of errors (30) on my app.xml style section.
This was working fine and weirdly still will run and compile but obviously I'm not doing something right.
Interstingly some sections are working and others aren't.
The main ones not working are referencing the SOLIDCOLORBRUSH at the top which is setting my colours for the app.
the main errors are:
Error XDG0062 'StaticResourceExtension' is not valid for Setter.Value.
The only supported MarkupExtension types are DynamicResourceExtension
and BindingBase or derived types.
Error XDG0062 The resource "brdrTeal" has an incompatible type.
Error XDG0062 'txtTitle' resource not found.
These are all referenced with {StaticResource XXXXX}
Finally this section has this error:
Error:
Error XDG0062 '{DependencyProperty.UnsetValue}' is not a valid value
for the 'System.Windows.Controls.Control.Template' property on a
Setter.
Code:
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Border" Value="{StaticResource Teal2}"/>
<Setter Property="BorderBrush" TargetName="Border" Value="#00827b"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Border" Value="{StaticResource Teal2}"/>
<Setter Property="BorderBrush" TargetName="Border" Value="#00827b"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've included a chunk of the app.xaml file below, to see how I have laid everything out.
Keen to do this properly if this is an incorrect way to do this, as I meantioned I'm just learning this now.
<Application.Resources>
<ResourceDictionary>
<SolidColorBrush x:Key="Teal1" Color="#67DAD5" />
<SolidColorBrush x:Key="Teal2" Color="#39c0c0" />
<SolidColorBrush x:Key="Teal3" Color="#00bab3" />
<SolidColorBrush x:Key="Teal4" Color="#00a09b" />
<SolidColorBrush x:Key="Teal5" Color="#00827b" />
<SolidColorBrush x:Key="mintGreen" Color="#a4e9c6" />
<SolidColorBrush x:Key="Teal2Light" Color="#c9e9ea" />
<SolidColorBrush x:Key="LightGrey" Color="#f6f6f6" />
<SolidColorBrush x:Key="MidGrey" Color="#aaaaad" />
<SolidColorBrush x:Key="DarkGrey" Color="#56565b" />
<SolidColorBrush x:Key="Burgundy1" Color="#8C0F57" />
<SolidColorBrush x:Key="Burgundy2" Color="#deb9c7" />
<SolidColorBrush x:Key="activeAreaColour" Color="#c9e9ea"/>
<Style TargetType="{x:Type Window}">
<Setter Property="ShowInTaskbar" Value="false"/>
</Style>
<Style TargetType="{x:Type Image}" x:Key="toolTipImage">
<Setter Property="RenderOptions.BitmapScalingMode" Value="Fant" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Height" Value="20"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="10 10 0 0"/>
</Style>
<Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}" >
<Setter Property="Background" Value="{DynamicResource Teal2}" />
<Setter Property="Foreground" Value="white" />
<Setter Property="BorderBrush" Value="{DynamicResource Teal5}"/>
<Setter Property="BorderThickness" Value="1 1 1 1"/>
<Setter Property="Margin" Value="-1,-1,0,0" />
<Setter Property="Height" Value="28" />
<Setter Property="Width" Value="auto"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
<Style TargetType="DataGridCell">
<Setter Property="HorizontalContentAlignment" Value="Right" />
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource Teal2Light}" />
<Setter Property="BorderBrush" Value="{DynamicResource Teal5}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="black" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="12"/>
</Trigger>
</Style.Triggers>
</Style>
<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="{DynamicResource Teal5}"
BorderBrush="{DynamicResource Teal5}"
BorderThickness="2" />
<Border x:Name="lrgBorder"
Grid.Column="0"
CornerRadius="2,0,0,2"
Margin="1"
Background="{DynamicResource Teal2Light}"
BorderBrush="{DynamicResource Teal2Light}"
BorderThickness="0,0,1,0" />
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="White"
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="BorderBrush" Value="{StaticResource Burgundy1}" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource Teal5}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource Burgundy2}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource Burgundy1}" />
<Setter TargetName="lrgBorder" Property="Background" Value="{StaticResource LightGrey}" />
<Setter Property="Foreground" Value="{StaticResource Burgundy1}"/>
<Setter TargetName="Arrow" Property="Fill" Value="{StaticResource Burgundy2}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<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"
Background="Transparent"
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 Teal2Light}"
BorderThickness="1"
BorderBrush="{StaticResource Teal5}"/>
<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 Burgundy1}"/>
</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 TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Border" Value="{StaticResource Teal2}"/>
<Setter Property="BorderBrush" TargetName="Border" Value="#00827b"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#c9e9ea" Offset="0.0"/>
<GradientStop Color="#67DAD5" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="activeBackground" TargetType="Grid">
<Setter Property="Background" Value="{DynamicResource Teal2}"/>
</Style>
<sys:Double x:Key="fntButton">18</sys:Double>
<sys:Double x:Key="fntButtonSmall">12</sys:Double>
<sys:Double x:Key="ftnTextBox">15</sys:Double>
<Style x:Key="brdrTeal" TargetType="{x:Type Border}">
<Setter Property="BorderBrush" Value="{StaticResource Teal2}"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
<Style x:Key="activeArea" TargetType="{x:Type Grid}">
<Setter Property="Background" Value="{StaticResource activeAreaColour}"/>
</Style>
<Style x:Key="brdrBurgundy" TargetType="{x:Type Border}">
<Setter Property="BorderBrush" Value="{StaticResource Burgundy1}"/>
<Setter Property="BorderThickness" Value="1"/>
</Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Margin" Value="0 10 0 0"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="DemiBold"/>
</Style>
<!--#region TxtBoxes and passwordbox-->
<Style x:Key="txtWhite" TargetType="{x:Type TextBox}">
<Setter Property="FontSize" Value="{StaticResource ftnTextBox}"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="{StaticResource brdrTeal}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="5"/>
</Style>
<Style x:Key="txtGrey" TargetType="{x:Type TextBox}">
<Setter Property="FontSize" Value="{StaticResource ftnTextBox}"/>
<Setter Property="Background" Value="{StaticResource LightGrey}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="5 0 0 0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Margin" Value="0 10 0 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ResourceKey=MidGrey}"/>
<Setter Property="BorderThickness" TargetName="border" Value="2"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ResourceKey=Teal2}"/>
<Setter Property="BorderThickness" TargetName="border" Value="2"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ResourceKey=Teal2}"/>
<Setter Property="Background" TargetName="border" Value="{StaticResource ResourceKey=Teal2Light}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource ResourceKey=Burgundy1}"/>
<Setter Property="FontWeight" Value="DemiBold"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="txtPassGrey" TargetType="{x:Type PasswordBox}">
<Setter Property="FontSize" Value="{StaticResource ftnTextBox}"/>
<Setter Property="Background" Value="{StaticResource LightGrey}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type PasswordBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ResourceKey=Teal2}"/>
<Setter Property="BorderThickness" TargetName="border" Value="2"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource ResourceKey=Teal2}"/>
<Setter Property="Background" TargetName="border" Value="{StaticResource ResourceKey=Teal2Light}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource ResourceKey=Burgundy1}"/>
<Setter Property="FontWeight" Value="DemiBold"/>
</Trigger>
</Style.Triggers>
</Style>
<!--#endregion -->
</ResourceDictionary>
</Application.Resources>
I´ve tried to change the IsMouseOver & IsFocused BorderBrush of a TextBox.
But it seems not to take affect, I always get this ugly standart blue color.
My style is inside a ResourceDictionary.
It´s working perfectly fine, except the problem with changing the BorderBrush.
<Style x:Key="TextBoxA" TargetType="TextBox" >
<Setter Property="Foreground" Value="#FFF0E6D2"/>
<Setter Property="FontSize" Value="15" />
<Setter Property="BorderBrush" Value="#FF785A28"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="#FF000306"/>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF040B11" Offset="1"/>
<GradientStop Color="#FF11171B" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF785A28" Offset="1"/>
<GradientStop Color="#FFC8C36E" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#FF785A28"/>
</Trigger>
</Style.Triggers>
</Style>
You need to modify the ControlTemplate. Right-click on the TextBox in design mode in Visual Studio and choose Edit Template->Edit a Copy to copy the default template into your XAML markup and then edit it as per your requirements:
<TextBox>
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="#FFF0E6D2"/>
<Setter Property="FontSize" Value="15" />
<Setter Property="BorderBrush" Value="#FF785A28"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="#FF000306"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF785A28"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF040B11" Offset="1"/>
<GradientStop Color="#FF11171B" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF785A28" Offset="1"/>
<GradientStop Color="#FFC8C36E" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Unless you edit the template of the control, you are pretty limited in what you can change. Here is the default template for the WPF TextBox, so change it to fit your desired style: https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/textbox-styles-and-templates
I programmatically add tabitems to a tabcontrol. I have a custom tabItem with two buttons in the header, one to close the tab, the other to do some other functionality (it triggers an ascending or descending sort). The content of close button is a constant, the content of the other button changes based on a boolean value in the tab's datacontext. Only the buttons in the selected tab show in the tab header.
Initially, both buttons will show on the tab created last. The problem I'm experiencing is that as I select tabs, the content of the close button on the newly selected tab will be visible, as it should be, but the content of the bound button is gone (the button is there).
I should point out the content of the problemmatic button is one of two polygons depending on the value of the binding source.
I should also point out that if i click the empty button the appropriate image appears on the tab header.
Adding more confusion is that the tooltip property attached to the button, behaves correctly - it displays the appropriate tooltip text based on the binding source.
The custom TabItem is mostly created from a ResourceDictionary which I've included.
Please help, I admit my wpf knowledge is limited.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TreeView.Helpers">
<Style x:Key="TabItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle SnapsToDevicePixels="true" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
<LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EAF6FD" Offset="0.15"/>
<GradientStop Color="#D9F0FC" Offset=".5"/>
<GradientStop Color="#BEE6FD" Offset=".5"/>
<GradientStop Color="#A7D9F5" Offset="1"/>
</LinearGradientBrush>
<!--Brushes (for Sort Button -->
<!--Light brush, to highlight.-->
<LinearGradientBrush x:Key="lightBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7EFFFFFF" Offset="0"/>
<GradientStop Color="#03FFFFFF" Offset=".4"/>
<GradientStop Color="#00030000" Offset=".5"/>
<GradientStop Color="#0AFFFFFF" Offset=".55"/>
<GradientStop Color="#7EFFFFFF" Offset="1"/>
</LinearGradientBrush>
<!--Normal brush, little darker than light brush.-->
<LinearGradientBrush x:Key="normalBrushBack" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7EF0F0F0" Offset="0"/>
<GradientStop Color="#03FFFFFF" Offset=".4"/>
<GradientStop Color="#00030000" Offset=".5"/>
<GradientStop Color="#0AFFFFFF" Offset=".55"/>
<GradientStop Color="#3EFFFFFF" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
<SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
<SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
<SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
<Style TargetType="{x:Type local:CloseableTabItem}" >
<Style.Resources>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ButtonOverBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFAFAFA" Offset="0"/>
<GradientStop Color="#FFE0E0E3" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ButtonPressedBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFE0E0E2" Offset="0"/>
<GradientStop Color="#FFF8F8F8" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF969696"/>
<local:VisibilityConverter x:Key="converter" />
<Style x:Key="CloseableTabItemButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}, Path=IsSelected, Converter={StaticResource converter}}"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border SnapsToDevicePixels="true" x:Name="Chrome"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="2" Opacity="0" />
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SortableButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}, Path=IsSelected, Converter={StaticResource converter}}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="Content">
<Setter.Value>
<Polygon Points="1,1 4,7.5 7.5,1" Stroke="Black" Fill="Black" />
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="Sort the Tree Descending" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border SnapsToDevicePixels="true" x:Name="Chrome"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="2" Opacity="0" />
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}, Path=DataContext.SortDirectionIsAscending}" Value="false">
<Setter Property="Content">
<Setter.Value>
<Polygon Points="1,8 4,1.5 7.5,8" Stroke="Black" Fill="Black" />
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="Sort the Tree Ascending" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CloseableTabItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" >
<DockPanel x:Name="ContentPanel">
<Grid DockPanel.Dock="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="PART_Sort"
HorizontalAlignment="Center"
Margin="3,0,3,0"
VerticalAlignment="Center"
Width="16"
Height="16"
Style="{DynamicResource SortableButtonStyle}"
Command="{Binding SortTabCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">
</Button>
<Button Grid.Column="1" x:Name="PART_Close"
HorizontalAlignment="Center"
Margin="3,0,3,0"
VerticalAlignment="Center"
Width="16"
Height="16"
Style="{DynamicResource CloseableTabItemButtonStyle}"
ToolTip="Close Tab"
Command="{Binding CloseTabCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">
<Path x:Name="Path"
Stretch="Fill"
StrokeThickness="0.5"
Stroke="#FF333333"
Fill="#FF969696"
Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z "
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Button>
</Grid>
<ContentPresenter x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
</DockPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" SourceName="PART_Close" Value="True">
<Setter Property="Fill" TargetName="Path" Value="#FFB83C3D"/>
</Trigger>
<Trigger Property="IsPressed" SourceName="PART_Close" Value="True">
<Setter Property="Fill" TargetName="Path" Value="#FF9D0000"/>
</Trigger>
<Trigger Property="IsMouseOver" SourceName="PART_Sort" Value="True">
<Setter Property="Fill" TargetName="Path" Value="#FFB83C3D"/>
</Trigger>
<Trigger Property="IsPressed" SourceName="PART_Sort" Value="True">
<Setter Property="Fill" TargetName="Path" Value="#FF9D0000"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Panel.ZIndex" Value="1"/>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
</MultiTrigger>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Top"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-2,-2,-1"/>
<Setter Property="Margin" TargetName="ContentPanel" Value="0,0,0,1"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Bottom"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-1,-2,-2"/>
<Setter Property="Margin" TargetName="ContentPanel" Value="0,1,0,0"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Left"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-2,-1,-2"/>
<Setter Property="Margin" TargetName="ContentPanel" Value="0,0,1,0"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Right"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-1,-2,-2,-2"/>
<Setter Property="Margin" TargetName="ContentPanel" Value="1,0,0,0"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I solved my own problem. In my attempt at solving this, I went with a togglebutton and an image instead of a regular button and a polygon. I then realized I was missing the trigger condition for the selected state of the tabitem. The final solution is included here, for anyone interested. By the way, the idea, and the majority of the style, to create a control that inherits from a tabitem came from this site: http://www.c-sharpcorner.com/uploadfile/dpatra/closable-tab-control-in-wpf/.
Lastly, for those presumptuous folks out there, this problem had nothing to do with MVVM.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TreeView.Helpers">
<ImageSource x:Key="Image_DescendingGreySortButton">../Images/imgSortDescendingButtonGrey.PNG</ImageSource>
<ImageSource x:Key="Image_AscendingGreySortButton">../Images/imgSortAscendingButtonGrey.PNG</ImageSource>
<Style x:Key="TabItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle SnapsToDevicePixels="true" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
<LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EAF6FD" Offset="0.15"/>
<GradientStop Color="#D9F0FC" Offset=".5"/>
<GradientStop Color="#BEE6FD" Offset=".5"/>
<GradientStop Color="#A7D9F5" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
<SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
<SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
<SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
<Style TargetType="{x:Type local:CloseableTabItem}" >
<Style.Resources>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ButtonOverBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFAFAFA" Offset="0"/>
<GradientStop Color="#FFE0E0E3" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ButtonPressedBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFE0E0E2" Offset="0"/>
<GradientStop Color="#FFF8F8F8" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ToggleButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ToggleButtonOverBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFAFAFA" Offset="0"/>
<GradientStop Color="#FFE0E0E3" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ToggleButtonPressedBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFE0E0E2" Offset="0"/>
<GradientStop Color="#FFF8F8F8" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF969696"/>
<SolidColorBrush x:Key="ToggleButtonNormalBorder" Color="#FF969696"/>
<local:VisibilityConverter x:Key="converter" />
<Style x:Key="CloseableTabItemButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}, Path=IsSelected, Converter={StaticResource converter}}"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border SnapsToDevicePixels="true" x:Name="Chrome"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="2" Opacity="0" />
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ToggleButton}" x:Key="ToggleButtonStyle">
<Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}, Path=IsSelected, Converter={StaticResource converter}}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{StaticResource ToggleButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ToggleButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="ToolTip" Value="Sort the Tree Descending" />
<Setter Property="Content" Value="{DynamicResource Image_DescendingGreySortButton}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<Border SnapsToDevicePixels="true" x:Name="Chrome"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="2" Opacity="0" />
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" TargetName="Chrome" Value="1"/>
<Setter Property="Background" TargetName="Chrome" Value="{DynamicResource ButtonPressedBackground}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CloseableTabItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" >
<DockPanel x:Name="ContentPanel">
<Grid DockPanel.Dock="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0" x:Name="PART_Sort"
HorizontalAlignment="Center"
Margin="3,0,3,0"
VerticalAlignment="Center"
Width="16"
Height="16"
Style="{DynamicResource ToggleButtonStyle}"
IsThreeState="False"
Command="{Binding SortTabCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">
</ToggleButton>
<Button Grid.Column="1" x:Name="PART_Close"
HorizontalAlignment="Center"
Margin="3,0,3,0"
VerticalAlignment="Center"
Width="16"
Height="16"
Style="{DynamicResource CloseableTabItemButtonStyle}"
ToolTip="Close Tab"
Command="{Binding CloseTabCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">
<Path x:Name="Path"
Stretch="Fill"
StrokeThickness="0.5"
Stroke="#FF333333"
Fill="#FF969696"
Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z "
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Button>
</Grid>
<ContentPresenter x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
</DockPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" SourceName="PART_Close" Value="True">
<Setter Property="Fill" TargetName="Path" Value="#FFB83C3D"/>
</Trigger>
<Trigger Property="IsPressed" SourceName="PART_Close" Value="True">
<Setter Property="Fill" TargetName="Path" Value="#FF9D0000"/>
</Trigger>
<Trigger Property="IsMouseOver" SourceName="PART_Sort" Value="True">
<Setter Property="Fill" TargetName="Path" Value="#FFB83C3D"/>
</Trigger>
<Trigger Property="IsPressed" SourceName="PART_Sort" Value="True">
<Setter Property="Fill" TargetName="Path" Value="#FF9D0000"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Panel.ZIndex" Value="1"/>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemSelectedBackground}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
</MultiTrigger>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Top"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-2,-2,-1"/>
<Setter Property="Margin" TargetName="ContentPanel" Value="0,0,0,1"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Bottom"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-1,-2,-2"/>
<Setter Property="Margin" TargetName="ContentPanel" Value="0,1,0,0"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Left"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-2,-1,-2"/>
<Setter Property="Margin" TargetName="ContentPanel" Value="0,0,1,0"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Right"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-1,-2,-2,-2"/>
<Setter Property="Margin" TargetName="ContentPanel" Value="1,0,0,0"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsChecked" SourceName="PART_Sort" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Content" TargetName="PART_Sort">
<Setter.Value>
<Image>
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source" Value="{DynamicResource Image_AscendingGreySortButton}" />
</Style>
</Image.Style>
</Image>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" TargetName="PART_Sort" Value="Sort the Tree Ascending" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsChecked" SourceName="PART_Sort" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Content" TargetName="PART_Sort">
<Setter.Value>
<Image>
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source" Value="{DynamicResource Image_DescendingGreySortButton}" />
</Style>
</Image.Style>
</Image>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" TargetName="PART_Sort" Value="Sort the Tree Descending" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Update: using Expression Blend 3
I'm trying to style the IsPressed & IsEnabled(false) property triggers for a class of buttons in a WPF application.
Here's a UserControl with a Button using the style...
<UserControl
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"
mc:Ignorable="d"
x:Class="Kiosk.ButtonTest"
x:Name="UserControl">
<Grid x:Name="LayoutRoot">
<Button HorizontalAlignment="Left" Style="{DynamicResource BlueButton}" VerticalAlignment="Top" Width="155" Content="Button" Height="52.9"/>
</Grid>
</UserControl>
And here's the style fragment...
<!-- Blue Button -->
<Style x:Key="BlueButton" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource BlueGradient3}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{DynamicResource DarkGradient1}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BlueGradient3}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource DarkGradient1}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BlueGradient1}"/>
</Trigger>
</Style.Triggers>
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{DynamicResource BlueGradient1}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BlueGradient2}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="TextBox.TextAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Effect" Value="{DynamicResource KioskStandardDropShadow}" />
</Style>
<LinearGradientBrush x:Key="BlueGradient1" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3FA2FD" Offset="0"/>
<GradientStop Color="#FF014782" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BlueGradient2" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF014782" Offset="0"/>
<GradientStop Color="#FF3FA2FD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BlueGradient3" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF014782" Offset="1"/>
<GradientStop Color="#FF0B2135" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DarkGradient1" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2A2A2A" Offset="0"/>
<GradientStop Color="#FF474747" Offset="0.478"/>
<GradientStop Color="#FF323232" Offset="0.487"/>
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF282828" Offset="0.681"/>
</LinearGradientBrush>
<!-- Regular Drop Shadow -->
<DropShadowEffect x:Key="KioskStandardDropShadow" Opacity="0.6" BlurRadius="10" ShadowDepth="5" Direction="308"/>
<!-- fragment end -->
The Default and Mouse over changes work fine, but isEnabled false and isPressed true still show the Button default colors.
What am I doing wrong?
I fixed it after studying the code at http://mark-dot-net.blogspot.com/2007/07/creating-custom-wpf-button-template-in.html...
This is what I ended up with, which works great.
<!-- Blue Button -->
<Style x:Key="BlueButton" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="2"
Padding="4,2"
BorderBrush="{DynamicResource BlueGradient2}"
CornerRadius="5"
Background="{TemplateBinding Background}">
<Grid >
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Name="content"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource BlueGradient3}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{DynamicResource DarkGradient1}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BlueGradient3}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource DarkGradient1}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BlueGradient1}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{DynamicResource BlueGradient1}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BlueGradient2}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="TextBox.TextAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="FontSize" Value="15pt"/>
<Setter Property="Effect" Value="{DynamicResource KioskStandardDropShadow}" />
</Style>
You need to replace the ControlTemplate to change the background color of your button.
Here is one I copied from MSDN that works well with your code.
You can merge your specific overrides to this style.
EDIT:
To make the following style work, as is, you need to download the Styling with Control Templates Sample from Microsoft. If you include Button.xaml and Shared.xaml from the sample the following style should work because these two files contain all the StaticResoruces listed the XAML below. I am testing in Visual Studio 2008.
Here is how I chanaged the user conttrol:
<UserControl x:Class="ButtonPressed.Views.KioskButton"
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"
mc:Ignorable="d"
Height="300" Width="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="Button.xaml">
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Width="155" Content="Button" Height="52.9"/>
</Grid>
</UserControl>
Here is part of the button style from Button.xaml:
<Style TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Border"
CornerRadius="2"
BorderThickness="1"
Background="{StaticResource NormalBrush}"
BorderBrush="{StaticResource NormalBorderBrush}">
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DefaultedBorderBrush}" />
</Trigger>
<Trigger Property="IsDefaulted" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DefaultedBorderBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>