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">
Related
I am trying to implement style for TabControl along with TabItem like below Images:
The Style should make below things visible:
List item
White Background for TabControl and selected TabItem with Dropshadow Effect.
When any TabItem is not selected, then the TabItem text color should turn to gray.
What I have achieved till now:
Able to divide width of TabControl to accommodate TabItem items with equal Sizes using TabSizeConverter converter.
Able to change background and with of TabControl and TabItems. But not able to achieve Dropshadow effect.
Below is my Style for TabItem:
<Setter Property="Padding" Value="0"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Foreground" Value="{StaticResource color_MediumGray}"/>
<Setter Property="FontSize" Value="34"/>
<Setter Property="FontFamily" Value="Resources/Fonts/#HelveticaNeueMed" />
<Setter Property="Width">
<Setter.Value>
<MultiBinding Converter="{StaticResource tabSizeConverter}">
`<Binding RelativeSource="{RelativeSource Mode=FindAncestor,` AncestorType={x:Type TabControl}}" />
<Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" Path="ActualWidth" />
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="Chrome"
BorderThickness="30,0"
BorderBrush="{StaticResource color_Transparent}"
Background="{StaticResource color_LightGray}"
Padding="0" Margin="0">
<ContentPresenter ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected" Value="True">
<Setter TargetName="Chrome" Property="BorderThickness" Value="0"/>
<Setter TargetName="Chrome" Property="Background" Value="{StaticResource color_White}"/>
<Setter Property="Foreground" Value="{StaticResource color_Purple}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If anyone can help me acheving TabControl with such style would be a great help.
Thanks in advance.
The Style should make below things visible:
List Item
White Background for TabControl and selected TabItem with Dropshadow Effect.
When any TabItem is not selected, then the TabItem text color should turn to gray.
I suppose this is just a typo?
Set TabControl.Background to white, set the drop shadow effect on the TabControl, set TabControl.BorderThickness to zero, set TabItem.Background and TabItem.BorderBrush to white, do not change TabItem.BorderThickness. For the tab header alignment, an easy fix for the TabPanel.Margin is usage of negative margin for selected tabs.
Set TextBlock.Foreground on Chrome instead of playing with TabItem.Foreground in the template triggers.
Generally note that I replaced your color constants with system color names for my testing. Also I didn't bother to re-solve the tab item width issue and instead assigned them a static width. Oh, and I used default fonts instead of your font resource :)
My complete sample:
<Window.Resources>
<Style x:Key="itemStyle" TargetType="TabItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="FontSize" Value="34"/>
<Setter Property="FontFamily" Value="Resources/Fonts/#HelveticaNeueMed" />
<Setter Property="Width" Value="310"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="Chrome"
BorderThickness="10,0"
BorderBrush="Transparent"
Background="LightGray"
TextBlock.Foreground="Gray"
Padding="0" Margin="0">
<ContentPresenter ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected" Value="True">
<Setter TargetName="Chrome" Property="BorderBrush" Value="White"/>
<Setter TargetName="Chrome" Property="Background" Value="White"/>
<Setter TargetName="Chrome" Property="Margin" Value="-2,0,-2,-1"/>
<Setter TargetName="Chrome" Property="TextBlock.Foreground" Value="Purple"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="grid1">
<Grid MaxWidth="650" MaxHeight="600">
<Border Background="Gray">
<Border.Effect>
<BlurEffect/>
</Border.Effect>
</Border>
<TabControl BorderThickness="0" Margin="5" Background="White">
<TabControl.Effect>
<DropShadowEffect />
</TabControl.Effect>
<TabItem Header="Postpaid" Style="{StaticResource itemStyle}" HorizontalContentAlignment="Center">
<WrapPanel>
<Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
<Rectangle Fill="Green" Width="380" Height="180" Margin="10"/>
<Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
<Rectangle Fill="Green" Width="180" Height="180" Margin="10"/>
<Rectangle Fill="Yellow" Width="180" Height="180" Margin="10"/>
</WrapPanel>
</TabItem>
<TabItem Header="Prepaid" Style="{StaticResource itemStyle}" HorizontalContentAlignment="Center">
<WrapPanel>
<Rectangle Fill="Green" Width="180" Height="180" Margin="10"/>
<Rectangle Fill="Yellow" Width="180" Height="180" Margin="10"/>
<Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
<Rectangle Fill="Green" Width="380" Height="180" Margin="10"/>
<Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
</WrapPanel>
</TabItem>
</TabControl>
</Grid>
</Grid>
How to show a slider control with a tooltip/label under the thumb showing the value (timespan) always while it moves with/without user dragging.
I tried AutoToolTipPlacement="BottomRight" AutoToolTipPrecision="3" on my slider.
But Tooltip gets displayed only when i drag the thumb. I want that shown even when i invoke playing slider with a button control.(like video player)
The point is to reduce the size of my usercontrol and avoid extra labels for timers or position.
If i am in the wrong direction, please suggest me better ideas. Thanks!
You can re-style the Thumb to show this effect. Below is a sample that makes a circular Thumb with the .Value property of the parent Slider showing up inside the circle.
<Style TargetType="{x:Type Thumb}">
<Setter Property="Focusable" Value="false"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Height" Value="20"/>
<Setter Property="Width" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Canvas SnapsToDevicePixels="true">
<Grid Height="20" Width="20">
<Ellipse x:Name="Background"
Fill="#FFA3A3A3"
Height="20" Width="20"
Stroke="#FFDADADA"/>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="Black"
FontSize="9"
Text="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Converter={StaticResource ConvertToIntegerConverter}}"/>
</Grid>
</Canvas>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="Background"
Value="#FFDADADA"/>
</Trigger>
<Trigger Property="IsDragging" Value="true">
<Setter Property="Fill" TargetName="Background"
Value="#FFF2F2F2"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="Background"
Value="#FFF2F2F2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've used an IValueConverter to make sure the the value displayed is always an integer, since the normal .Value property is a decimal. You would want to use your own converter to properly format the information that you want displayed.
You can make the text or numbers appear wherever you want by re-styling the Thumb.
EDIT:
If you want to show the text above or below the actual thumb, it's a pretty minor change to the styling:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Ellipse x:Name="Background"
Fill="#FFA3A3A3"
Height="20" Width="20"
Stroke="#FFDADADA"/>
<TextBlock Grid.Row="1" HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="White"
FontSize="9"
Text="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}, Converter={StaticResource ConvertToIntegerConverter}}"/>
</Grid>
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 !
I have created a template of a button, which contains an Image and a TextBlock. Since I would like to change the appearance of both, I think they need to be in the Template. But, of course, not every instance of this template should present the same text and image.
Until now, i found a promising property called "Use a custom path expression" at the "Text" / "Source"-value filed of the TextBlock / Image at:
Data Binding... > Element Property > Use a custom path expression
I would now like to set this value at the instances of the button. I already tried to manually insert a myText="Lorem Ipsum" in the XAML of the Button, but that does not seem to work.
Thank you in advance for your help!
Update: This is, how the XAML looks like:
<TextBlock [...] Text="{Binding myText, ElementName={x:Null}, FallbackValue=Lorem}"/>
How do I access this or modify this, so it can be accessed?
Update 2: There already exist bindings for the TextBlock and the Image. At the moment, the XAML of the Button looks like that:
<s:SurfaceButton Command="{Binding SearchCustomCommand}" Style="{DynamicResource BasicButton}">
<StackPanel Orientation="Vertical" Height="60" Width="48" IsHitTestVisible="False">
<Image Source="{StaticResource ImageSourceToolboxSearchIcon}"
[...]
Stretch="Uniform" />
<TextBlock Text="{lex:LocText ToolboxButtonSearchesCustom}"
FontFamily="{DynamicResource button.font}"
[...]
FontSize="{DynamicResource button.size}"
Foreground="{DynamicResource button.color.default}"/>
</StackPanel>
</s:SurfaceButton>
I would now like to extract the Image and Textbox to the template (which also already exists), so I could refrence the Button in a way like this (whith all the Information about sizes and colors etc in the template and only the reference to the resource in the actual instance of the button - to be able to change the image/text for echt button seperately):
<s:SurfaceButton
Command="{Binding SearchPopularCommand}"
Style="{DynamicResource ToolboxButtonBig}"
ImageSource="{StaticResource ImageSourceToolboxSearchIcon}"
TextBlockSource="{lex:LocText ToolboxButtonSearchesCustom}"/>
I already copied the whole XAML for the StackPanel and the included TextBlock and Image to the Template. Now those are shown on every Button (which is fine), but i can't change the contents of them.
I'm sorry if the description is quite poor - I'm rather new to WPF...
Update 3: After some further research, I found questions similar to mine - which obviously describe the problem better than I could:
Button template with image and text in wpf
Creating an image+text button with a control template?
it is not necessary to edit button's template to insert image and text, you can set Button.Content property like this:
<Button>
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="../Images/image.png"/>
<TextBlock Text="Lorem Ipsum"/>
</StackPanel>
</Button.Content>
</Button>
and it will work well. example above can be simplified but I inserted it like this for better understanding what is going on.
EDIT:
here are examples how it can be done in two different ways:
overwriting template:
<Button Content="Lorem Ipsum">
<Button.Template>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal">
<Image x:Name="ButtonImage" Source="../Images/mouseNotOverImage.png"/>
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonImage" Property="Source" Value="../Images/mouseOverImage.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
complete button template definition you can find here
modifying style:
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Horizontal">
<Image Source="../Images/mouseOverImage.png"/>
<TextBlock Text="Lorem Ipsum"/>
</StackPanel>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Horizontal">
<Image Source="../Images/mouseNotOverImage.png"/>
<TextBlock Text="Lorem Ipsum"/>
</StackPanel>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Your first option would be to define a style (or styles), e.g.
<Window.Resources>
<Style x:Key="MyButton" TargetType="{x:Type Button}" >
<Setter Property="Content">
<Setter.Value>
<Grid>
<Image .../>
<TextBlock Text="Test"/>
</Grid>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource MyButton}" />
</Grid>
Your second option would be to use Blend to make a copy of the default button style and edit that
<Window.Resources>
<Style x:Key="MyButton" TargetType="{x:Type Button}" >
<Setter Property="Content">
<Setter.Value>
<Grid>
<TextBlock Text="Test"/>
</Grid>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" 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>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<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="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<!-- put your text and image here -->
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="167,151,0,0" VerticalAlignment="Top" Width="75" Style="{DynamicResource MyButtonStyle}"/>
</Grid>
and a third option would be to create a custom control based on the default button style. You could then create dependency properties and use template bindings.
I am attempting to create a Tab Control Style that basically looks like buttons at the top that are centered and content panel below that displays the tabitem content.
I have am kind of new to templates but what I have so far works very well except one thing. I want to be able to set the default forground color for text elements. Normally I have accomplished this by using the ContentPresenter with dependency elements. So something like this.
<ContentPresenter TextElement.Foreground="White"/>
This basically makes any TextElement Control written by this Presenter to inherit this property.
Now I am trying to do the same thing but it's not working! I believe it has something to do with my style being wrong.
Style:
<Style x:Key="MainMenuTab" TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local" Width="{TemplateBinding Width}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Tab Headers Panel -->
<Grid Grid.Row="0" Background="{StaticResource Brush_ApplicationTabBackground}">
<TabPanel
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="{StaticResource Brush_ApplicationTabBackground}"
>
</TabPanel>
</Grid>
<!-- Tab Body -->
<Border
Name="Border"
Grid.Row="1"
Background="{StaticResource Brush_ApplicationBackground}"
BorderBrush="Transparent"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- Each Tab should look like this -->
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="{StaticResource Brush_ApplicationTabBackground}">
<Border Width="50" x:Name="BorderTab" Height="50" Margin="5" BorderThickness="1" ClipToBounds="True" BorderBrush="Transparent" Background="Transparent" CornerRadius="5">
<Rectangle x:Name="BackgroundRec" Fill="Transparent" Stroke="Transparent" Width="50" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ContentPresenter Name="TheHeaderContentPresenter" Width="50" Height="50" Margin="5" ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.Foreground="White"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
<Setter TargetName="BorderTab" Property="BorderThickness" Value="3"/>
<Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
<Setter Property="Panel.ZIndex" Value="1"/>
</Trigger.Setters>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Trigger.Setters>
<Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabBackground}"/>
<Setter TargetName="BorderTab" Property="BorderThickness" Value="0"/>
<Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabBackground}"/>
</Trigger.Setters>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
In my ContentPresenter under ItemContainerStyle has the TextElement.Foreground="White" property but it will not print white text!
My tabcontrol that uses this style looks like this:
<TabControl Grid.Row="2" Style="{StaticResource MainMenuTab}">
<TabItem>
<TabItem.Header>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,5" Text="{x:Static UIStrings:ClientStrings.MainWindow_TabHeader_SingleWaveLength}"></TextBlock>
</TabItem.Header>
<TextBlock>TEST PANEL</TextBlock>
</TabItem>
</TabControl>
I know this is compicated but I would really love this to work.
Solution Found.
Based on HCL's post, I have found a solution. I am experiance the same exact problem I am trying to have the content presenter set the inherited dependence property. instead I simple tell the template to apply the dependance property, that way each tabitem is styled to have this property and therefore sets it for all it's children.
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="TabItem">
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="{StaticResource Brush_ApplicationTabBackground}">
<Border Width="50" x:Name="BorderTab" Height="50" Margin="5" BorderThickness="1" ClipToBounds="True" BorderBrush="Transparent" Background="Transparent" CornerRadius="5">
<Rectangle x:Name="BackgroundRec" Fill="Transparent" Stroke="Transparent" Width="50" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ContentPresenter Name="TheHeaderContentPresenter" Width="50" Height="50" Margin="5" ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
<Setter TargetName="BorderTab" Property="BorderThickness" Value="3"/>
<Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
<Setter Property="Panel.ZIndex" Value="1"/>
</Trigger.Setters>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Trigger.Setters>
<Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabBackground}"/>
<Setter TargetName="BorderTab" Property="BorderThickness" Value="0"/>
<Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabBackground}"/>
</Trigger.Setters>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
All I've really dont is added the line:
<Setter Property="TextElement.Foreground" Value="White"/>
Before the control template! Also I took the white text out of the content presenter because it is useless.
Check this post, it looks to me as it is the same effect:
ContentPresenter within ControlTemplate cannot change attached dependency property