TextBox EventTrigger not setting the Property - wpf

I am trying to clear the text of a TextBox on click event of a clear button which was added to the TextBox ControlTemplate :
<Window x:Class="WpfApp1.TextBoxClearing"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="TextBoxClearing" Height="300" Width="300">
<Window.Resources>
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFE2E3EA"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FFC5DAED"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FFB5CFE7"/>
<Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<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}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnMouseLeftButtonDown1">
<!-- Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="PART_ContentHost"-->
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Text"
Storyboard.Target="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TextBox}}}" >
<DiscreteStringKeyFrame KeyTime="0:0:0.0" Value=""/>
</StringAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<DockPanel>
<Button x:Name="MYPART_Clear" DockPanel.Dock="Right">X</Button>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" RenderTransformOrigin="0.5,0.5" />
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="MYPART_Clear">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeftButtonDown1}"/>
</EventTrigger>
<Trigger Property="Text" Value="">
<Setter TargetName="MYPART_Clear" Property="Visibility" Value="Collapsed" />
</Trigger>
<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="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</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>
</Window.Resources>
<Grid>
<TextBox VerticalAlignment="Center" HorizontalAlignment="Center" Width="150" Style="{DynamicResource TextBoxStyle1}"></TextBox>
</Grid>
Everything seems logically alright but I can't understand why it doesn't clear the text.
I have tried accessing the element by its name(PART_ContentHost) or finding the parent TextBox but all of them were in vane.
Is it achievable via pure XAML?
I don't like installing Blend SDK. This should be possible with this primary tools.
Also custom ActionTriger which doesn't require any Nuget installation is OK.
Please pay attention that answers to similar questions require Nuget installation which is not desirable to me.

What I have found so on the MSDN Site
Under the Remarks section:
This property does not support animation.
https://msdn.microsoft.com/en-us/library/system.windows.controls.textbox.text.aspx
Solution (working)
The following code is working so far. I use the Tag property for a placeholder that I want to delete the Text.
<Window x:Class="TestBase.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestBase"
mc:Ignorable="d"
Title="Window2"
SizeToContent="WidthAndHeight" d:DesignWidth="236" d:DesignHeight="187"
MinWidth="300"
MinHeight="300">
<Window.Resources>
<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFE2E3EA"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FFC5DAED"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FFB5CFE7"/>
<Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<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">
<DockPanel>
<Button x:Name="MYPART_Clear" DockPanel.Dock="Right">X</Button>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" RenderTransformOrigin="0.5,0.5" />
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="MYPART_Clear">
<BeginStoryboard Name="FocusTrueStoryboard">
<Storyboard>
<StringAnimationUsingKeyFrames
Storyboard.TargetProperty="(TextBlock.Tag)"
Storyboard.Target="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TextBox}}}">
<DiscreteStringKeyFrame KeyTime="0:0:0" Value="delete"/>
<DiscreteStringKeyFrame KeyTime="0:0:0.1" Value=""/>
</StringAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="Tag" Value="delete">
<Setter Property="Text" Value=""/>
</Trigger>
<Trigger Property="Text" Value="">
<Setter TargetName="MYPART_Clear" Property="Visibility" Value="Collapsed" />
</Trigger>
<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="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</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>
</Window.Resources>
<Grid>
<TextBox x:Name="asd" VerticalAlignment="Center" HorizontalAlignment="Center" Width="150" Style="{DynamicResource TextBoxStyle1}"></TextBox>
<TextBlock Text="{Binding ElementName=asd, Path=Tag}" VerticalAlignment="Bottom"/>
</Grid>
Preview

Related

'StaticResourceExtension' is not valid for Setter.Value. - new error after installing VS2022

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>

Is there a way to change Foreground of a TextBox ScrollViewer in xaml whithout change the local property?

Is there a way to change the Foreground of a custom TextBox in xaml with triggers or visualstates without change the local main Foreground property?
Here is the xaml style of a generic custom TextBox with randomly chosen colors:
<Style TargetType="{x:Type local:CustomTextBox}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomTextBox}">
<Border x:Name="PART_Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1">
<ScrollViewer x:Name="PART_ContentHost"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
Focusable="False"/>
</Border>
<ControlTemplate.Triggers>
<!-- Can be IsMouseOver, IsFocused, etc... -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Border"
Property="Background" Value="Green"/>
<Setter TargetName="PART_Border"
Property="BorderBrush" Value="DarkGreen"/>
<!-- The only method I know that works is this one
that changes the local property -->
<Setter Property="Foreground" Value="Yellow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've tried to use these lines in trigger but everyone fails (does nothing):
<Setter TargetName="PART_ContentHost" Property="Foreground" Value="Yellow"/>
<Setter TargetName="PART_ContentHost" Property="TextBlock.Foreground" Value="Yellow"/>
<Setter TargetName="PART_ContentHost" Property="TextElement.Foreground" Value="Yellow"/>
<Setter TargetName="PART_Border" Property="TextBlock.Foreground" Value="Yellow"/>
<Setter TargetName="PART_Border" Property="TextElement.Foreground" Value="Yellow"/>
In Buttons the Foreground color can be changed by changing TextBlock.Foreground of the parent element (e.g. TextBlock.Foreground of PART_Border), but this not works with TextBoxes.
Changing the local property as this line does...
<Setter Property="Foreground" Value="Yellow"/>
...has the problem that if I change later the main Foreground property (from Black to Gray for example), the trigger cannot change it anymore to Yellow, for example with this:
<local:CustomTextBox ... Foreground="Gray"/>
VisualStates cannot interact even with the main Foreground property.
So is there another way I don't know to accomplish this in xaml or is it a limitation of wpf?
What if you completely override the ControlTemplate?
<TextBox Text="Hiho" Foreground="Red">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<TextBox Name="TheContent" Text="{TemplateBinding Text}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="TheContent" Property="Foreground" Value="Yellow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
You could animate the property using a Storyboard. This will take effect over local values:
<Window ...>
<Window.Resources>
<Style TargetType="{x:Type local:CustomTextBox}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomTextBox}">
<Border x:Name="PART_Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1">
<ScrollViewer x:Name="PART_ContentHost"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
Focusable="False"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Border" Property="Background" Value="Green"/>
<Setter TargetName="PART_Border" Property="BorderBrush" Value="DarkGreen"/>
<Trigger.EnterActions>
<BeginStoryboard x:Name="sb">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Brushes.Yellow}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="sb" />
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<local:CustomTextBox Margin="10" Text="sample text" Foreground="Red" />
</StackPanel>
</Window>

WPF TextBox has Blue Outline while in focus

So I am working on a program in WPF, and I made a textbox that has no border when out of focus, and (should) have a black line while focused. However, the line is showing up blue. I looked around Google, and nothing seems to work.
<Window x:Class="RequestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:RequestApp"
mc:Ignorable="d"
Title="MainWindow" Height="900.156" Width="1414.292">
<Window.Resources>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Text" Value="Come Jam wit me man" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="7*"/>
<RowDefinition Height="18*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1067*"/>
<ColumnDefinition Width="433*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="Request" HorizontalAlignment="Left" Margin="37,130,0,0" BorderThickness="0" Text="Request" VerticalAlignment="Top" RenderTransformOrigin="-2.971,0.656" Height="39" Width="594" FontFamily="Modern Sans" FontSize="25" InputScope="Default" GotFocus="Request_GotFocus" LostFocus="Request_LostFocus" SelectionBrush="{x:Null}" BorderBrush="Black" Foreground="Gray"/>
</Grid>
PS: I don't know the first thing about XAML
Below is the default style for a TextBox. The behavior you are fighting is caused by these two ControlTemplate triggers - IsMouseOver and IsKeyboardFocused. Just edit the solid color brush definitions as you wish:
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<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="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</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>
I found this question after searching for a way to get rid of the border in a WPF textbox what is shown blue and didn't fit into my design.
I have done this by setting the Border-Thickness to "0":
<TextBox x:Name="textBoxSearch" BorderThickness="0"/>

Wpf Custom control MouseOver and selected

Hello I have googled this and found many issues like what I am trying to accomplish, however I cannot get this to work. I have build a control that has a listbox in it and when I pass my mouse over the item or select an item I would like to change the background color of the list item to a color.
MyControl:
<ListBox x:Name="Appointments"
ItemsSource="{TemplateBinding ItemSource}"
DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
SelectedValuePath="{TemplateBinding SelectedValuePath}">
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
</Style>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<DataTrigger Binding="{Binding AppointmentState}"
Value="{x:Static enums:AppointmentState.Accepted}">
<Setter Property="Background"
Value="Green" />
<Setter Property="Foreground"
Value="White" />
</DataTrigger>
<DataTrigger Binding="{Binding AppointmentState}"
Value="{x:Static enums:AppointmentState.Decliend}">
<Setter Property="Background"
Value="Red" />
<Setter Property="Foreground"
Value="White" />
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Blue" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource AccentColor}"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
what I've tried to do is just put under Listbox.Resorces ListBox.ItemContainerStyle ListBox.DataTemplate. thank you for your help
edit: new control
<Style TargetType="{x:Type local:MonthCalenderDay}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MonthCalenderDay}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel>
<TextBlock x:Name="DayNumber"
FontSize="15"
Foreground="{DynamicResource AccentColorBrush}"
Text="{Binding DayNumber,RelativeSource={RelativeSource TemplatedParent}}"/>
<ListBox x:Name="Appointments"
ItemsSource="{TemplateBinding ItemSource}"
DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
SelectedValuePath="{TemplateBinding SelectedValuePath}">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="border"
Value="Blue" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="border"
Value="{DynamicResource AccentColorBrush}" />
<Setter Property="BorderBrush"
TargetName="border"
Value="{StaticResource Item.SelectedInactive.Border}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive"
Value="True" />
<Condition Property="IsSelected"
Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="border"
Value="{DynamicResource AccentColorBrush}" />
<Setter Property="BorderBrush"
TargetName="border"
Value="{DynamicResource AccentColorBrush}" />
</MultiTrigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="TextElement.Foreground"
TargetName="border"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!--<DataTrigger Binding="{Binding AppointmentState}"
Value="{x:Static enums:AppointmentState.Accepted}">
<Setter Property="Background"
Value="Green" />
<Setter Property="Foreground"
Value="White" />
</DataTrigger>
<DataTrigger Binding="{Binding AppointmentState}"
Value="{x:Static enums:AppointmentState.Decliend}">
<Setter Property="Background"
Value="Red" />
<Setter Property="Foreground"
Value="White" />
</DataTrigger>-->
</Style.Triggers>
</Style>
</ListBox.Resources>
</ListBox>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to modify the control template:
<ListBox x:Name="Appointments"
ItemsSource="{TemplateBinding ItemSource}"
DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
SelectedValuePath="{TemplateBinding SelectedValuePath}">
<ListBox.Resources>
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Blue"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource AccentColor}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource AccentColor}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!--<DataTrigger Binding="{Binding AppointmentState}"
Value="{x:Static enums:AppointmentState.Accepted}">
<Setter Property="Background"
Value="Green" />
<Setter Property="Foreground"
Value="White" />
</DataTrigger>
<DataTrigger Binding="{Binding AppointmentState}"
Value="{x:Static enums:AppointmentState.Decliend}">
<Setter Property="Background"
Value="Red" />
<Setter Property="Foreground"
Value="White" />
</DataTrigger>-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Blue" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource AccentColor}"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

xaml navigation window with pages inside

I want to create a window that look sth like that:
On the left side, you can see a navigation control.
Exactly one item has to be selected (item 1 by default).
Depend on which item you have selected, you see the matching page on the right side. This page can have next pages, which can be navigated via "Next" or "Back" buttons.
I´ve tried using a listview for the navigation, but it´s hard to get a styling like this. Maybe another control is more suitable also for the functionality.
So, I have 2 Questions:
1) Which control is most suitable for the navigation and how to style it that way?
2) How can I dynamically switch the Pages on the right side (xaml only)?
I just want to create a prototype, so I only want to use xaml and no code behind.
My internet research has so far not much helped me (I have read a lot about navigation and styling but the most is with code behind or using mvvm or sth.. nothing that could help me directly with these specific requirements).
Any designers or xaml pros out there? :)
#Veritas,
Assuming the following markup, the base style already closely ressembles your mockup requirements.
<Window x:Class="TabControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TabControl TabStripPlacement="Left">
<TabItem Header="Item1">
<TextBlock Text="Hosted content of page 1"></TextBlock>
</TabItem>
<TabItem Header="Item2">
<TextBlock Text="Hosted content of page 2"></TextBlock>
</TabItem>
<TabItem Header="Item3">
<TextBlock Text="Hosted content of page 3"></TextBlock>
</TabItem>
</TabControl>
</Grid>
</Window>
which more or less gives the following result:
but just for the sake of your question, if you would like to edit the template of the tabControl, in visual studio you can enable the document Outline (Crtl-W, U) , look for your TabControl, Right click and select Edit template > Edit a copy.
From here, either you restyle the TabControl for every instance of the application (it will create a non-keyed ressource), or a named ressource that you can apply as you wish, assuming you would want to create multiple styles (re: keyed ressources).
This is the default TabControl markup generated from a windows 8.1 box (note that there are some subtle variances from one version to another, but this will get you started)
<SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
<Style TargetType="{x:Type TabControl}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Padding" Value="4,4,4,4"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
<Setter Property="Background" Value="#F9F9F9"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<TabPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
<Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="1"/>
<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
<Setter Property="Margin" TargetName="HeaderPanel" Value="2,0,2,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="1"/>
<Setter Property="Grid.Column" TargetName="ContentPanel" Value="0"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="HeaderPanel" Value="0,2,2,2"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Note that this formulation "
" will apply the template everywhere it's not locally overridden by a style=someStyleName property.
if by chance you have blend installed, you will have more flexibility in how these templates are previewed, and may prove easier to style your colors and fonts.
If it's the TabItem you want to customize, follow the same procedure. The tabItem controls the squared Tab + label component such as this preview here:
TabItem full markup, for the sake of completion:
<Style x:Key="TabItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="3,3,3,1" SnapsToDevicePixels="true" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<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="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 TabItem}">
<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 TabItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<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="Content" 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="Content" 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="Content" 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="Content" 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>

Resources