I have a Menu Item that won't change its background when I put my mouse over it.
<ControlTemplate x:Key="DropItemStyle" TargetType="MenuItem">
<DockPanel HorizontalAlignment="Left" Background="#FF101315" Height="40" Width="250" Margin="-1,-1,0,0">
<Image Source="{Binding Icon, RelativeSource={RelativeSource TemplatedParent}}" Height="15" Width="15" Margin="12,0" VerticalAlignment="Center" />
<Label Content="{TemplateBinding Header}" FontFamily="Segoe UI Semibold" FontSize="14" Foreground="White" VerticalAlignment="Center" Margin="-12,-1,0,0" />
<Image Source="Images/icon_right.png" Visibility="{Binding HasItems, Converter={StaticResource btv}, RelativeSource={RelativeSource TemplatedParent}}" />
<DockPanel.Style>
<Style TargetType="DockPanel">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF1A1D1F" />
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
</DockPanel>
</ControlTemplate>
<MenuItem Header="Logout" Template="{StaticResource DropItemStyle}" Icon="Images/logoutIcon.png" Click="logoutButtonClick" />
Please edit this if there is any mistakes
Setting Background="#FF101315" on the DockPanel has a greater priority than the trigger's setter. Move it to the Style instead:
<DockPanel HorizontalAlignment="Left" Height="40" Width="250" Margin="-1,-1,0,0">
<!-- Skipped for readability -->
<Style TargetType="DockPanel">
<Setter Property="Background" Value="#FF101315"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF1A1D1F" />
<Setter Property="Opacity" Value="0.5" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
Related
I have two toggle buttons which I am used to making to the collapsable sidebar sub-menu option. I want to display both collapsed initially. when of them is pressed it shout expand and when the other submenu is clicked the first one should collapse and the other one should get open.
<ToggleButton Grid.Column="0" Height="50" Style="{StaticResource CategoryButton}" FontSize="14" FontWeight="Regular" Foreground="{StaticResource SupremeFontColor}" Margin="6,2,6,0"
FontFamily="{StaticResource FontFamily}" Content="Report Group" ToolTip="Report Group" x:Name="reportToggleButton" BorderBrush="Transparent" Click="reportToggleButton_Click">
</ToggleButton>
<Grid Height="60" Visibility="{Binding IsChecked, ElementName=reportToggleButton, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Fail Reports." Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,0" Width="Auto" Height="30">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="white" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Text="Other Reports." Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,0" Width="Auto" Height="30">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="white" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
<!--Sales Report-->
<ToggleButton Grid.Column="0" Height="50" Style="{StaticResource CategoryButton}" FontSize="14" FontWeight="Regular" Foreground="{StaticResource SupremeFontColor}" Margin="6,2,6,0"
FontFamily="{StaticResource FontFamily}" Content="Sales Report" ToolTip="Sales Report" x:Name="salesToggleButton" BorderBrush="Transparent" Click="salesToggleButton_Click">
</ToggleButton>
<Grid Height="60" Visibility="{Binding IsChecked, ElementName=salesToggleButton, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Daily Course Summary" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="Auto" Height="30">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="white" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Text="Finalize Event Payment Report" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="Auto" Height="30">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="white" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
I would first clean-up your mess at least a little:
<!--I used StackPanel, but it can be any container you have-->
<StackPanel>
<StackPanel.Resources>
<Style TargetType="TextBlock" x:Key="myTextbox">
<Setter Property="Background" Value="White" />
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="30"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="ToggleButton" x:Key="myToggleButton">
<Setter Property="Height" Value="50" />
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Regular"/>
<Setter Property="Margin" Value="6,2,6,0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
</StackPanel.Resources>
<ToggleButton Content="Report Group" ToolTip="Report Group" x:Name="reportToggleButton" Click="reportToggleButton_Click" Style="{StaticResource myToggleButton}"/>
<StackPanel Orientation="Horizontal" Height="60" Visibility="{Binding IsChecked, ElementName=reportToggleButton, Converter={StaticResource boolToVisibilityConverter}}">
<TextBlock Text="Fail Reports." Style="{StaticResource myTextbox}"/>
<TextBlock Text="Other Reports." Style="{StaticResource myTextbox}"/>
</StackPanel>
<!--Sales Report-->
<ToggleButton Content="Sales Report" ToolTip="Sales Report" x:Name="salesToggleButton" Click="salesToggleButton_Click" Style="{StaticResource myToggleButton}"/>
<StackPanel Orientation="Horizontal" Height="60" Visibility="{Binding IsChecked, ElementName=salesToggleButton, Converter={StaticResource boolToVisibilityConverter}}">
<TextBlock Text="Daily Course Summary" Style="{StaticResource myTextbox}"/>
<TextBlock Text="Finalize Event Payment Report" Style="{StaticResource myTextbox}"/>
</StackPanel>
</StackPanel>
And after would add something like this in your event handlers:
private void reportToggleButton_Click(object sender, RoutedEventArgs e)
{
salesToggleButton.IsChecked = !(sender as ToggleButton).IsChecked;
}
private void salesToggleButton_Click(object sender, RoutedEventArgs e)
{
reportToggleButton.IsChecked = !(sender as ToggleButton).IsChecked;
}
However I would recommend you to learn how to use standard components (maybe MenuItem or TreeItem would work for you) before considering creating something like that.
i could not find answers on SO anywhere - how do i make hover effect for each "item"
i want that when i hover over canvas (data template, positioned inside grid) to change color on both rectangles that are inside canvas - only place where IsMouseOver works is where i set ContentPresenter, and there i can change size of Grid, and thats all. I cannot get IsMouseOver on canvas to change color of rectangles inside. Anyhow, i am just begginer, so, i know something is wrong, ContentPresenter maybe is the one that takes style trigger, i just do not know how to fix this.
<Border Background="#1C222E">
<Viewbox Grid.Column="0" Grid.Row="0" Name="SeatsBox">
<Viewbox.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
</Viewbox.RenderTransform>
<ItemsControl ItemsSource="{Binding Seats}" Name="SeatsItems">
<ItemsControl.RenderTransform>
<TranslateTransform X="0" Y="0" />
</ItemsControl.RenderTransform>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid local:GridHelpers.RowCount="{Binding RowCount}" HorizontalAlignment="Center" VerticalAlignment="Center" local:GridHelpers.ColumnCount="{Binding ColumnCount}" ShowGridLines="False" Background="#1C222E" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Grid.Row" Value="{Binding RowEx}" />
<Setter Property="Grid.Column" Value="{Binding ColumnEx}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Width" Value="60"/>
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="200" />
<Setter Property="Fill" Value="Blue" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Canvas}, Path=IsMouseOver}" Value="True">
<Setter Property="Fill" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas Width="30" Height="30" Margin="4" Background="Transparent" Tag="{Binding ID}">
<Rectangle Name="RecTop" Canvas.Top="4" Canvas.Left="1" Width="28" Height="18" Fill="#5D606D" Stroke="#5D606D" RadiusX="2" RadiusY="2"></Rectangle>
<Rectangle Name="RecBot" Canvas.Top="23" Canvas.Left="1" Width="28" Height="7" Fill="#5D606D" Stroke="#5D606D" RadiusX="2" RadiusY="2"></Rectangle>
<!-- <TextBlock Text="{Binding Path=Column}" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Center" /> -->
</Canvas>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Status}" Value="Taken">
<Setter TargetName="RecTop" Property="Stroke" Value="#2E3441" />
<Setter TargetName="RecTop" Property="Fill" Value="#2E3441" />
<Setter TargetName="RecBot" Property="Stroke" Value="#2E3441" />
<Setter TargetName="RecBot" Property="Fill" Value="#2E3441" />
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="Reserved">
<Setter TargetName="RecTop" Property="Stroke" Value="#5D606D" />
<Setter TargetName="RecBot" Property="Stroke" Value="#5D606D" />
<Setter TargetName="RecTop" Property="Fill" Value="Transparent" />
<Setter TargetName="RecBot" Property="Fill" Value="Transparent" />
</DataTrigger>
<DataTrigger Binding="{Binding Status}" Value="Broken">
<Setter TargetName="RecTop" Property="Stroke" Value="#1885FF" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Viewbox>
</Border>
You've actually already done it properly, the problem is that you're setting Fill explicitly in the Rectangle declarations:
<Rectangle ... Fill="#5D606D" ...></Rectangle>
<Rectangle ... Fill="#5D606D" ...></Rectangle>
Those fields have precedence over what you've set in your style, remove them and your code works fine.
So I have buttons that extend beyond the grid they are in, but they only show up on mouse over. In some grids they render correctly and some they are rendered incorrectly. It seems to be consistent which ones are incorrect, but I cannot figure out why the issue occurs on those particular grids. I looked at the elements with snoop and can't see any issues with the properties as they are being rendered.
Correct rendering:
Incorrect rendering:
Here's the code
<ScrollViewer x:Name="GridItemScroller" Height="300">
<ItemsControl Margin="0,0" ItemsSource="{Binding Source={StaticResource rowItemsView}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid VerticalAlignment="Top" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Margin" Value="{Binding RowIndex, Converter={StaticResource IndexToPositionConverter}, ConverterParameter=20}" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate >
<Grid x:Name="itemPanel" VerticalAlignment="Top" ClipToBounds="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.ColumnSpan="2" Fill="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<CheckBox IsChecked="{Binding Path=Filtered, Converter={StaticResource NotConverter}}" Content="{Binding RowName}" />
<Canvas x:Name="CheckBoxButtonPanel" Grid.Column="1" ClipToBounds="False" VerticalAlignment="Center" Width="25" Height="2">
<Canvas.Style>
<Style TargetType="Canvas">
<Setter Property="Visibility" Value="Collapsed" />
<Setter Property="Panel.ZIndex" Value="0" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=itemPanel, Path=IsMouseOver}" Value="True">
<Setter Property="Visibility" Value="Visible" />
<Setter Property="Panel.ZIndex" Value="10" />
</DataTrigger>
</Style.Triggers>
</Style>
</Canvas.Style>
<Button HorizontalAlignment="Right" Height="15" Width="25" Canvas.Top="-15" local:ToolIcon.IconName ="{Binding Source={StaticResource LanguageInfo}, XPath=//Strings/#Up}" local:ToolIcon.Image="pack://application:,,,/CalUI;component/images/Up.png"
Style="{DynamicResource ToolIcon}" Click="Move_Up"/>
<Button HorizontalAlignment="Right" Height="15" Width="25" Canvas.Top="2" local:ToolIcon.IconName ="{Binding Source={StaticResource LanguageInfo}, XPath=//Strings/#Down}" local:ToolIcon.Image="pack://application:,,,/CalUI;component/images/Down.png"
Style="{DynamicResource ToolIcon}" Click="Move_Down"/>
</Canvas>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Here's the XAML for the ToolIcon Style
<Style x:Key="ToolIcon" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="ImageGrid">
<Grid.Effect>
<local:SaturationLuminanceEffect SaturationShift="0.95" LuminanceShift="0.8" />
</Grid.Effect>
<Image x:Name="image" RenderTransformOrigin="0.5,0.5" Source="{TemplateBinding local:ToolIcon.Image}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" TargetName="ImageGrid">
<Setter.Value>
<local:SaturationLuminanceEffect SaturationShift="1" LuminanceShift="1.2" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Effect" TargetName="ImageGrid">
<Setter.Value>
<local:SaturationLuminanceEffect SaturationShift="1.05" LuminanceShift="1.0" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Effect" TargetName="ImageGrid">
<Setter.Value>
<local:SaturationLuminanceEffect SaturationShift="0.80" LuminanceShift="1.3" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
#CodeNaked had the following insight in a comment:
Clipping can be a tricky business. See this question for more info on the subject.
The question mentioned is «Why do my panels clip all the way around the panel when made smaller than the explicit size?»
I have a ListBox that is bound to a list of CustomerViewModel-objects, that each has two dependency properties:
- Name (string)
- Description (string)
- IsVisible (bool)
(the IsVisible property is True by default and is reversed via the ToggleVisibility Command on the CustomerViewModel)
I would like to display the Name and Description to the right of a Border-control, that is has a Transparent background when the IsVisible property is True and Green when the False.
My problem is that the DataTrigger part of the code below doesn't work the way I want, because the Setter-part isn't triggered when the IsVisible is changed.
What am I doing wrong?
Here's my code:
<UserControl.Resources>
<Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="Margin" Value="-1,-1,0,0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="ItemContainerStyle" Value="{DynamicResource ListboxItemStyle}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
</Style>
<Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="#FFD4D6D5" BorderThickness="0,0,0,1">
<Grid Height="70" Margin="0,0,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="visibilityColumn" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Background="Transparent" Width="4" Margin="0,0,4,0" />
<TextBlock x:Name="customerName" Grid.Row="1" Grid.Column="1" Foreground="#FF191919" FontWeight="Bold" Text="{Binding Name}" VerticalAlignment="Top" />
<TextBlock Grid.Row="2" Grid.Column="1" VerticalAlignment="Stretch" Text="{Binding Description}" TextWrapping="Wrap" Foreground="#FFB4B4B4" TextTrimming="CharacterEllipsis" />
</Grid>
<Border.ContextMenu>
<ContextMenu>
<MenuItem Header="Edit..." />
<MenuItem Header="Visible" IsCheckable="True" IsChecked="{Binding IsVisible}" Command="{Binding ToggleVisibility}"/>
</ContextMenu>
</Border.ContextMenu>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFEEEEEE" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFF5F5F5" />
<Setter TargetName="customerName" Property="Foreground" Value="Green" />
</Trigger>
<DataTrigger Binding="{Binding IsVisible}" Value="False"> <!--If Value="True" the customerName Border shows up green!-->
<Setter Property="Background" Value="Green" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<ListBox Style="{StaticResource ListBoxStyle}" ItemsSource="{Binding CustomerViewModels}" />
UPDATED:
The DataTrigger was indeed missing the TargetName="visibilityColumn" as pointed out by Goblin.
However - the "real" problem was, this line:
<MenuItem Header="Visible" IsCheckable="True" IsChecked="{Binding IsVisible}" Command="{Binding ToggleVisibility}"/>
A checkable MenuItem has a TwoWay binding-mode on the IsChecked-property, so I was actually inverting the IsVisiblity twice - via databinding and via the ToggleVisibility command... Whoops :)
Try switching this part:
<DataTrigger Binding="{Binding IsVisible}" Value="False">
<Setter Property="Background" Value="Green" />
</DataTrigger>
With this part:
<DataTrigger Binding="{Binding IsVisible}" Value="False">
<Setter TargetName="visibilityColumn" Property="Background" Value="Green" />
</DataTrigger>
I think you missed the TargetName property in your setter. (Same goes for your IsSelected- and IsMouseOver-trigger by the way)
Hope this helps!
I'm looking to have the foreground of the text of a TabItem change whenever the tab becomes active. I was using the following, which was working fine until I changed the type of content being displayed in the tab:
<TabControl Style="{DynamicResource SidebarTabControl}">
<TabItem Header="TabItem" Style="{DynamicResource SidebarTab}" />
</TabControl>
<Style x:Key="SidebarTabForegroundStyleSelected">
<Setter Property="TextBlock.Foreground" Value="White" />
</Style>
<Style x:Key="SidebarTabForegroundStyle">
<Setter Property="TextBlock.Foreground" Value="Black" />
</Style>
<Style x:Key="SidebarTab" TargetType="TabItem">
<Setter Property="Padding" Value="10,12,2,12" />
<Setter Property="BorderThickness" Value="0,1,0,1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Padding="{TemplateBinding Padding}"
Name="tab"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource SidebarTabBorderBrush}"
SnapsToDevicePixels="True">
<ContentPresenter Style="{StaticResource SidebarTabForegroundStyle}" Name="content" ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
<Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyleSelected}" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
<Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyle}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I changed the TabItem to:
<TabControl Style="{DynamicResource SidebarTabControl}">
<TabItem Style="{DynamicResource SidebarTab}">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16" Source="..\..\Icons\cog.png" />
<TextBlock Text="TabItem" Margin="5,0,0,0" VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
</TabItem>
</TabControl>
The foreground of the text no longer turns to white when the tab is selected and back to black when the tab is no longer selected. Everything else still works correctly.
Does anyone know if there is a way to accomplish changing the color of the foreground in the XAML above?
Move the trigger from the control template to the style:
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="SidebarTabBackgroundBrushSelected" Color="Gray"></SolidColorBrush>
<SolidColorBrush x:Key="SidebarTabBorderBrushSelected" Color="Blue"></SolidColorBrush>
<SolidColorBrush x:Key="SidebarTabBackgroundBrush" Color="LightGray"></SolidColorBrush>
<SolidColorBrush x:Key="SidebarTabBorderBrush" Color="Green"></SolidColorBrush>
<Style x:Key="SidebarTab" TargetType="TabItem">
<Setter Property="Padding" Value="10,12,2,12" />
<Setter Property="BorderThickness" Value="0,1,0,1" />
<Setter Property="Foreground" Value="Blue"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Padding="{TemplateBinding Padding}"
Name="tab"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource SidebarTabBorderBrush}"
SnapsToDevicePixels="True">
<ContentPresenter Name="content"
ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<TabControl Style="{DynamicResource SidebarTabControl}">
<TabItem Header="TabItem 1" Style="{DynamicResource SidebarTab}" />
<TabItem Style="{DynamicResource SidebarTab}" >
<TabItem.Header>
<StackPanel>
<TextBlock Text="a"></TextBlock>
<TextBlock Text="b"></TextBlock>
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem Header="TabItem 3" Style="{DynamicResource SidebarTab}" />
</TabControl>
</Grid>
It looks like the issue is coming up because you are setting the wrong property:
<Style x:Key="SidebarTabForegroundStyleSelected">
<Setter Property="TextBox.Foreground" Value="White" />
</Style>
<Style x:Key="SidebarTabForegroundStyle">
<Setter Property="TextBox.Foreground" Value="Black" />
</Style>
You need to be setting TextElement.Foreground or TextBlock.Foreground
Also, since it is an inherited property, you can just set the AttachedProperty directly on the TabItems, you don't need to assign it specifically to the content.
<TabControl Style="{DynamicResource SidebarTabControl}">
<TabControl.ItemContainerStyle>
<Style TargetType="{x:Type TabItem}">
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="TextElement.Foreground"
Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</TabControl.ItemContainerStyle>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="16"
Source="..\..\Icons\cog.png" />
<TextBlock Text="TabItem"
Margin="5,0,0,0"
VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
Item 1
</TabItem>
<TabItem>
<TabItem.Header>
<TextBlock Text="Tab 2" />
</TabItem.Header>
Item 2
</TabItem>
<TabItem Header="Item 3">
Item 3
</TabItem>
</TabControl>