I have an WPF template but it does not show up when starting the application. No errors in WPF and none anywhere. Just no using of the template. How to figure out what the problem is?
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MoveThumb.xaml"/>
<ResourceDictionary Source="ResizeDecorator.xaml"/>
<ResourceDictionary Source="RotateDecorator.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- ContentControl style to move, resize and rotate items -->
<Style x:Key="DesignerItemStyle" TargetType="ContentControl">
<Setter Property="MinHeight" Value="50"/>
<Setter Property="MinWidth" Value="50"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<Control Name="RotateDecorator"
Template="{StaticResource RotateDecoratorTemplate}"
Visibility="Collapsed"/>
<s:MoveThumb Template="{StaticResource MoveThumbTemplate}"
Cursor="SizeAll"/>
<Control x:Name="ResizeDecorator"
Template="{StaticResource ResizeDecoratorTemplate}"
Visibility="Collapsed"/>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected" Value="True">
<Setter TargetName="ResizeDecorator" Property="Visibility" Value="Visible"/>
<Setter TargetName="RotateDecorator" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- RotateDecorator Template -->
<ControlTemplate x:Key="RotateDecoratorTemplate" TargetType="Control">
<Grid>
<my:RotateThumb Margin="-18,-18,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<my:RotateThumb Margin="0,-18,-18,0" VerticalAlignment="Top" HorizontalAlignment="Right">
<my:RotateThumb.RenderTransform>
<RotateTransform Angle="90" />
</my:RotateThumb.RenderTransform>
</my:RotateThumb>
<my:RotateThumb Margin="0,0,-18,-18" VerticalAlignment="Bottom" HorizontalAlignment="Right">
<my:RotateThumb.RenderTransform>
<RotateTransform Angle="180" />
</my:RotateThumb.RenderTransform>
</my:RotateThumb>
<my:RotateThumb Margin="-18,0,0,-18" VerticalAlignment="Bottom" HorizontalAlignment="Left">
<my:RotateThumb.RenderTransform>
<RotateTransform Angle="270" />
</my:RotateThumb.RenderTransform>
</my:RotateThumb>
</Grid>
</ControlTemplate>
try to REORDER the dictioneries & the template and see if it works,
its all about the ORDER, because the last dictionary always overrides his previous Dictionaries (templates) sometimes even if you don't target the same UIElement !
Related
I can do the watermark text/placeholder on a WPF textbox control by using the below XAML code.
<TextBox Name="txtFilter" Grid.Row="1" Height="25" Width="250" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Margin="5,0,0,0" TextChanged="txtFilter_TextChanged">
<TextBox.Style>
<Style BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border Background="White" CornerRadius="5" BorderBrush="Black" BorderThickness="1">
<Grid>
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<TextBlock x:Name="textBlock" VerticalAlignment="Center" Opacity="0.5" Text=" Search by Customer Name " Foreground="Blue" FontStyle="Italic" Visibility="Hidden" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False" />
<Condition Property="Text" Value="" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="textBlock" Value="Visible" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
But how it is possible for a WPF Combo box control ? I tried with the below shown XAML code. But it is not working.
<ComboBox.Resources>
<VisualBrush x:Key="HelpBrush" TileMode="None" Opacity="0.4" Stretch="None" AlignmentX="Left">
<VisualBrush.Visual>
<TextBlock FontStyle="Italic" Opacity="0.5" Text="Type or select from list" Foreground="Blue" Visibility="Visible"/>
</VisualBrush.Visual>
</VisualBrush>
</ComboBox.Resources>
<ComboBox.Style>
<Style TargetType="ComboBox">
<Style.Triggers>
<Trigger Property="Text" Value="{x:Null}">
<Setter Property="Background" Value="{StaticResource HelpBrush}"/>
</Trigger>
<Trigger Property="Text" Value="">
<Setter Property="Background" Value="{StaticResource HelpBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
Can anyone help me to place a watermark text on a WPF Combobox control ???
All,
I am trying to set up a Template for a Window. What I want is to change the margin and the border thickness depending upon the state of the window. I am trying to do it using Trigger, but when I run the application, triggers don't fire. My question is, how can I make the triggers fire when the window state is changed?
The XAML I have is (I have removed most of the code to keep the posting simple):
<Window x:Class="WpfApplication1.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:WpfApplication1" Background="#FFE8E8E8"
Style="{DynamicResource ChromeWindowStyle}"
mc:Ignorable="d"
Title="BaseWindow" Width="500" Height="300">
<WindowChrome.WindowChrome>
<WindowChrome ResizeBorderThickness="6" CaptionHeight="0" GlassFrameThickness="0" />
</WindowChrome.WindowChrome>
<Window.Resources>
<Style x:Key="ChromeWindowStyle" TargetType="{x:Type Window}">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Background" Value="#FFE8E8E8"/>
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border x:Name="MainBorder" Background="White" BorderBrush="Gray" BorderThickness="1">
<DockPanel LastChildFill="True">
<Border Height="30" DockPanel.Dock="Top">
<DockPanel LastChildFill="False">
<TextBlock Text="Heading" DockPanel.Dock="Left" VerticalAlignment="Center" />
<Button x:Name="CloseButton" Content="Close" DockPanel.Dock="Right" />
<Button x:Name="MaximizeButton" Content="Max" DockPanel.Dock="Right" />
<Button x:Name="MinButton" Content="Min" DockPanel.Dock="Right"/>
</DockPanel>
</Border>
<AdornerDecorator DockPanel.Dock="Bottom">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</AdornerDecorator>
</DockPanel>
</Border>
<!--This piece wont trigger - start -->
<ControlTemplate.Triggers>
<Trigger Property="WindowState" Value="Normal">
<Setter Property="Margin" Value="8" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<Trigger Property="WindowState" Value="Maximized">
<Setter Property="Margin" Value="8" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
<!--This piece wont trigger - end -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
</Grid>
</Window>
Your ControlTemplate.Triggers are trying to set properties on the ControlTemplate itself, which in-and-of itself is not a visual element. They need to explicitly specify the name of the Border control:
<ControlTemplate.Triggers>
<Trigger Property="WindowState" Value="Normal">
<Setter TargetName="MainBorder" Property="Margin" Value="8" />
<Setter TargetName="MainBorder" Property="BorderThickness" Value="1" />
</Trigger>
<Trigger Property="WindowState" Value="Maximized">
<Setter TargetName="MainBorder" Property="Margin" Value="8" />
<Setter TargetName="MainBorder" Property="BorderThickness" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
EDIT: Oh ok, I'm still on 4.5.1, maybe that's new behavior? In that case I'd go the other way i.e. put DataTriggers on the border control itself:
<Style x:Key="ChromeWindowStyle" TargetType="{x:Type Window}">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border BorderBrush="Gray">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Margin" Value="8" />
<Setter Property="BorderThickness" Value="1" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=WindowState}" Value="Maximized">
<Setter Property="Margin" Value="8" />
<Setter Property="BorderThickness" Value="0" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<DockPanel LastChildFill="True">
<Border Height="30" DockPanel.Dock="Top">
<DockPanel LastChildFill="False">
<TextBlock Text="Heading" DockPanel.Dock="Left" VerticalAlignment="Center" />
<Button x:Name="CloseButton" Content="Close" DockPanel.Dock="Right" />
<Button x:Name="MaximizeButton" Content="Max" DockPanel.Dock="Right" Click="MaximizeButton_Click"/>
<Button x:Name="MinButton" Content="Min" DockPanel.Dock="Right"/>
</DockPanel>
</Border>
<AdornerDecorator DockPanel.Dock="Bottom">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</AdornerDecorator>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've got the below style for TextBoxes in my WPF app:
<!-- http://www.thexamlproject.com/ -->
<Style x:Key="LockIcon" TargetType="Path">
<Setter Property="Height" Value="16" />
<Setter Property="Width" Value="16" />
<Setter Property="Stretch" Value="Uniform" />
<Setter Property="Data"
Value="F1 M 80.6667,55.1172L 80.6667,35.3333C 80.6667,15.851 64.815,3.05176e-005 45.3333,3.05176e-005C 25.8509,3.05176e-005 9.99998,15.851 9.99998,35.3333L 9.99998,55.1172L 0,56L 0,129.333L 45.3333,133.333L 90.6667,129.333L 90.6667,56L 80.6667,55.1172 Z M 20.6667,54.1771L 20.6667,35.3333C 20.6667,21.7318 31.7317,10.6667 45.3333,10.6667C 58.9349,10.6667 70,21.7318 70,35.3333L 70,54.1771L 45.3333,52L 20.6667,54.1771 Z " />
</Style>
<VisualBrush x:Key="LockBrush" Stretch="None" AlignmentX="Left">
<VisualBrush.Visual>
<Border BorderThickness="4" BorderBrush="Transparent">
<Path Style="{StaticResource LockIcon}" Fill="Red" />
</Border>
</VisualBrush.Visual>
</VisualBrush>
<Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="{StaticResource LockBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="22,4"/>
</Trigger>
</Style.Triggers>
</Style>
I can't seem to find a good way to apply this VisualBrush image AND a background color to the entire TextBox. I either get strange stretching issues or simply cannot fill the whole TextBox (controls stretch and are different widths depending on the rendering view).
Ideas?
Instead of a VisualBrush use a Control Template.
XAML
<Style x:Key="LockIcon"
TargetType="Path">
<Setter Property="Height"
Value="16" />
<Setter Property="Width"
Value="16" />
<Setter Property="Stretch"
Value="Uniform" />
<Setter Property="Data"
Value="F1 M 80.6667,55.1172L 80.6667,35.3333C 80.6667,15.851 64.815,3.05176e-005 45.3333,3.05176e-005C 25.8509,3.05176e-005 9.99998,15.851 9.99998,35.3333L 9.99998,55.1172L 0,56L 0,129.333L 45.3333,133.333L 90.6667,129.333L 90.6667,56L 80.6667,55.1172 Z M 20.6667,54.1771L 20.6667,35.3333C 20.6667,21.7318 31.7317,10.6667 45.3333,10.6667C 58.9349,10.6667 70,21.7318 70,35.3333L 70,54.1771L 45.3333,52L 20.6667,54.1771 Z " />
</Style>
<Style TargetType='TextBox'
x:Key='WithLockIcon'>
<Setter Property='MinHeight'
Value='26' />
<Setter Property="Padding"
Value="22,4" />
<Style.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<!-- Use a control template instead of
Background property -->
<!--<Setter Property="Background"
Value="{StaticResource LockBrush}" />-->
<!--<Setter Property="Padding"
Value="22,4" />-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<!-- Set background here!-->
<Border BorderThickness="4"
BorderBrush="Transparent"
HorizontalAlignment='Stretch'>
<StackPanel Background='#dddddd'
Orientation='Horizontal'>
<Path Style="{StaticResource LockIcon}"
Fill="Red" />
<ScrollViewer Margin="0"
x:Name="PART_ContentHost">
</ScrollViewer>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<TextBox x:Name='textbox1'
Text='Example Text'
IsEnabled='False'
Style='{StaticResource WithLockIcon}' />
<ToggleButton Checked='ToggleButton_Checked'
Unchecked='ToggleButton_Unchecked'
Content='Change State' />
</StackPanel>
I've achieved a reasonably close simulation in a similar situation.
<Window x:Class="VisualBrushMargins.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"
Background="{DynamicResource WindowBackground}">
<Window.Resources>
<VisualBrush x:Key="WindowBackground" Stretch="UniformToFill">
<VisualBrush.Visual>
<Grid>
<Border Background="DarkGreen" Width="250" Height="150" />
<Canvas Height="130" Width="180" Background="DarkBlue">
<Path>
<!-- path goes here -->
</Path>
<Ellipse Width="100" Height="100" Stroke="Red" />
</Canvas>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
<Grid/>
</Window>
The path fits the canvas. Sizing the canvas and the border differently allows to add a "margin" to the brush -- note how it behaves on window resize. (Canvas is colored blue for illustrational purpose -- actually it's supposed to be transparent)
I'm trying to implement a vertical progress bar in WPF and am having some difficulty. I'm following Greg D's answer from Vertical progress bar template .net but it's not working for me. I have tried both using a external style and inline and no luck. It's annoying as it seems a relatively simple answer.
Here's my XAML;
<ProgressBar Name="VolumeMeter" Orientation="Vertical" Margin="4,30,0,0"
Value="50" HorizontalAlignment="Left" VerticalAlignment="Top" Height="300" Width="10">
<ProgressBar.Template>
<ControlTemplate>
<Border BorderBrush="Green" x:Name="Root" BorderThickness="1">
<Grid Name="PART_Track" Background="Red">
<Rectangle Name="PART_Indicator" Fill="Blue"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">//Error Here
<!-- Rotate the progressbar so the left edge is the bottom edge -->
<Setter TargetName="Root" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="270" />
</Setter.Value>
</Setter>
<Setter TargetName="Root" Property="Width"
Value="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Height}"/>
<Setter TargetName="Root" Property="Height"
Value="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Width}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ProgressBar.Template>
</ProgressBar>
The error I'm getting is on the <Trigger Property="Orientation" Value="Vertical"> line, I'm getting;
Cannot find the Template Property 'Orientation' on the type 'System.Windows.Controls.Control'.
Set the TargetType of the ControlTemplate.
<ControlTemplate TargetType="ProgressBar">
or
<Trigger Property="ProgressBar.Orientation" Value="Vertical">
In the second code there is a textBlock with the text "Mina övningar"
How can I change the text color to black when the tabItem is selected?
style:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Margin="0,0,0,13" CornerRadius="5" >
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Top" HorizontalAlignment="Center" ContentSource="Header" Margin="9"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black"/>
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF9F7FD" Offset="0.432" />
<GradientStop Color="#FFECF7FD" Offset="0.433" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="ContentSite" Property="Margin" Value="9,12,9,9" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
tabitem:
<TabItem Background="White">
<TabItem.Header>
<StackPanel Orientation="Vertical">
<Image Height="32" Source="/Glosboken;component/Images/library bookmarked.png" />
<TextBlock Text="Mina övningar" Margin="0,0,0,0" VerticalAlignment="Center" Foreground="White" />
</StackPanel>
</TabItem.Header>
<Grid>
<ListBox Height="216" Name="bookslist" VerticalAlignment="Top" Background="White" BorderBrush="White" Foreground="White" SelectedIndex="0" Margin="0,0,129,0" />
</Grid>
</TabItem>
One solution is to use a separate style for this situation:
<Style x:Key="TabItemText" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Foreground" Value="Black"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
and then replace:
Foreground="White"
with:
Style="{StaticResource TabItemText}"
in the TextBlock.
I did this by naming the ContentPresenter and targeting it in the trigger.
This way it keeps everything for the TabItem style in one place.
Complete Example:
<Window x:Class="TabControlText.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">
<Window.Resources>
<Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="Border" BorderThickness="1,1,1,0" CornerRadius="5,5,0,0"
Padding="25,5,25,5" Margin="0,0,0,0" BorderBrush="Gainsboro">
<ContentPresenter x:Name="ContentSite" ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="TextElement.Foreground" TargetName="ContentSite" Value="White"/>
<Setter TargetName="Border" Property="Background" Value="Black"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="TextElement.Foreground" TargetName="ContentSite" Value="Black"/>
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl>
<TabItem Header="Tab 1" Style="{DynamicResource TabItemStyle1}" />
<TabItem Header="Tab 2" Style="{DynamicResource TabItemStyle1}" />
<TabItem Header="Tab 3" Style="{DynamicResource TabItemStyle1}" />
<TabItem Header="Tab 4" Style="{DynamicResource TabItemStyle1}" />
</TabControl>
</Grid>
I extended Scott Solmer's great code by making it a resource dictionary because I needed this TabItem styling application wide.
So add new TabItemStyles.xaml under the Resources Dictionary folder which was called "Resources" :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ColoredTabsStyle" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="Border" BorderThickness="1,1,1,0" CornerRadius="5,5,0,0"
Padding="25,5,25,5" Margin="0,0,0,0" BorderBrush="Gainsboro">
<ContentPresenter x:Name="ContentSite" ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="TextElement.Foreground" TargetName="ContentSite" Value="White" />
<Setter TargetName="Border" Property="Background" Value="Black" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="TextElement.Foreground" TargetName="ContentSite" Value="Black" />
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I changed my app.xaml to know about the new resource dictionary. WARNING - adjust the source and component locations for your application:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/TruPredict;component/Resources/TabItemStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
Then I used style in the actual screen everywhere in the application I needed. Unlike Scott, I prefer using StaticResource rather than DynamicResource unless I have to.:
<TabControl>
<TabItem Header="Tab1" Style="{StaticResource ColoredTabsStyle}">
<TabItem Header="Tab2" Style="{StaticResource ColoredTabsStyle}">
<TabItem Header="Tab3" Style="{StaticResource ColoredTabsStyle}">
<TabControl>