I would like to change the TabItem's Header FontWeight to Bold when IsSelected = True from my ResourceDictionary.
Some Code
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border"
Background="White"
BorderBrush="White"
BorderThickness="1,1,1,0"
Margin="0,0,0,-1" >
<ContentPresenter x:Name="ContentSite"
Height="25"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="#F2F1F0" />
<Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
<Setter TargetName="Border" Property="BorderThickness" Value="0.5,0.7,0.5,0" />
<Setter Property="Header">
<Setter.Value>
<TextBlock Text="{Binding Path=Header.Title, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}"
FontWeight="Bold" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
<Setter TargetName="Border" Property="BorderThickness" Value="0,0,0,0.5" />
</Trigger>
.....etc.....
The above approach doesn't work. Also setting the HeaderTemplate instead of Header it works but it ruins my template. Finally, setting the TextBlock.FontWeight as a Property inside the Trigger changes all the TextBlocks inside the TabItem.
Any Proposals?
UPDATE
I picked up #ShineKing answer because it helped me solve my problem. Basically what i did is add a DataTrigger to the TextBlock used as a Header to my "custom" TabItem.
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}" Value="True">
<Setter Property="FontWeight" Value="Bold"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
Could you try this code to change TextBlock as Bold
<TabControl>
<TabControl.Resources>
<Style TargetType="TextBlock" x:Key="HeaderTextBlockStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=TabItem}}"
Value="True">
<Setter Property="FontWeight" Value="Bold"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TabControl.Resources>
<TabItem>
<TabItem.Header>
<TextBlock Text="Header Text"
Style="{StaticResource HeaderTextBlockStyle}"/>
</TabItem.Header>
</TabItem>
</TabControl>
Related
I'm trying to create a DataTemplate for Items in a ListView which is in itself not a problem when I'm using TextBlocks.
When selecting an item in the ListView, it is highlighted as expected with a darker background and the TextBlocks have a white foreground.
However, when I add a ComboBox to the DataTemplate and when a row is highlighted, the ComboBox's forground remains black whether it's selected or not.
I am not applying any styles to ComboBoxes and other than the SelectedValue and ItemSource properties, I'm not doing anything else with the ComboBox.
Using the LivePropertyExplorer I can only see that the Foreground is "overriden" but cannot see where.
Help would be greatly appreciated!
<ListView DockPanel.Dock="Bottom"
BorderThickness="0,1,0,0"
Padding="3"
BorderBrush="LightGray"
MinHeight="150"
MaxHeight="150"
ItemContainerStyle="{StaticResource ListViewItemStyle25}">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel LastChildFill="False">
<DockPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize"
Value="14" />
<Setter Property="Background"
Value="Transparent" />
</Style>
</DockPanel.Resources>
<ComboBox BorderThickness="1"
Background="Transparent"
MinWidth="120"
MaxWidth="120"
FontSize="14"
IsSynchronizedWithCurrentItem="False"
SelectedValue="{Binding IResourceTravelDocument_TravelDocumentType}">
<ComboBox.Style>
<Style TargetType="{x:Type ComboBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsPrimary, ElementName=userControl}"
Value="True">
<Setter Property="ItemsSource"
Value="{Binding DataContext.IResourceTravelDocumentsModuleViewModel_ResourceTravelDocumentTypes_Primary,
ElementName=userControl}" />
</DataTrigger>
<DataTrigger Binding="{Binding IsPrimary, ElementName=userControl}"
Value="False">
<Setter Property="ItemsSource"
Value="{Binding DataContext.IResourceTravelDocumentsModuleViewModel_ResourceTravelDocumentTypes_Supplementary,
ElementName=userControl}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
</ComboBox>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="VerticalContentAlignment"
Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding"
Value="2,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<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>
<Trigger Property="ItemsControl.AlternationIndex"
Value="0">
<Setter Property="Background"
Value="White"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex"
Value="1">
<Setter Property="Background"
Value="WhiteSmoke"></Setter>
</Trigger>
<Trigger Property="IsSelected"
Value="true">
<Setter Property="Background"
TargetName="Bd"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected"
Value="true" />
<Condition Property="Selector.IsSelectionActive"
Value="false" />
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="Bd"
Value="RoyalBlue" />
<Setter Property="Foreground"
Value="AliceBlue" />
</MultiTrigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The ComboBox has its own Template and doesn't inherit the Background and Foreground properties from the parent ListViewItem by default.
You can add another DataTrigger to the ComboBox style that binds to the ListViewItem though:
<Style TargetType="{x:Type ComboBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}" Value="true">
<Setter Property="Foreground" Value="AliceBlue" />
</DataTrigger>
<DataTrigger Binding="{Binding IsPrimary, ElementName=userControl}" Value="True">
<Setter Property="ItemsSource" Value="{Binding DataContext.IResourceTravelDocumentsModuleViewModel_ResourceTravelDocumentTypes_Primary, ElementName=userControl}" />
</DataTrigger>
<DataTrigger Binding="{Binding IsPrimary, ElementName=userControl}" Value="False">
<Setter Property="ItemsSource" Value="{Binding DataContext.IResourceTravelDocumentsModuleViewModel_ResourceTravelDocumentTypes_Supplementary, ElementName=userControl}" />
</DataTrigger>
</Style.Triggers>
</Style>
i would like change background color using binding. When i dont use Style="{DynamicResource ButtonStyle}", Background changes. This is my code:
<Button Style="{DynamicResource ButtonStyle}" Content="{Binding Title, UpdateSourceTrigger=PropertyChanged}"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, Path=DataContext.SelectButton}"
CommandParameter="{Binding}" ToolTip="{Binding Description}">
<Button.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged}" Value="True">
<Setter Property="Background" Value="Red"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected, UpdateSourceTrigger=PropertyChanged}" Value="False">
<Setter Property="Background" Value="Blue"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Resources>
</Button>
How i change background color in button using trigger? can be a trigger to insert a reference to style?
You could use a value converter instead a style if you cannot apply the trigger to the control template of the button or the style.
Background="{Binding IsSelected, Converter={StaticResource SelectedToBackgroundConverter}}"
Or with style
<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected}" Value="False">
<Setter Property="Background" Value="Blue"/>
</DataTrigger>
</Style.Triggers>
</Style>
Or control template
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="myGrid" Width="200" Height="20" Background="{TemplateBinding Background}">
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter TargetName="myGrid" Property="Background" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected}" Value="False">
<Setter TargetName="myGrid" Property="Background" Value="Blue"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am trying to create a style for a TabControl to achieve 2 goals:
Display the selected TabItem with a different background color and in bold.
Format the tab header text, bound to a date in the view model, to hours and minutes like "15:45".
I almost succeeded but the header text is also displaying the date part.
Besides it is displaying 03:45 instead of 15:45.
see screenshot here
Here is the XAML code I am using:
<TabControl ItemsSource="{Binding MC}" >
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="#01535F" />
<Setter Property="Foreground" Value="Azure" />
<Setter Property="FontSize" Value="16" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
/>
<!--<HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" />-->
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Panel" Property="Background" Value="#003F44" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#01535F" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
</TabControl>
Thanks in advance for any help.
I think this is what you're looking for:
<TabControl ItemsSource="{Binding MC}">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="#01535F" />
<Setter Property="Foreground" Value="Azure" />
<Setter Property="FontSize" Value="16" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Panel" Property="Background" Value="#003F44" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#01535F" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}"></TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
The ItemTemplate is for the header area, the ContentTemplate is for what is showing in the content area. That ContentPresenter in the ContentTemplate will instantiate the controls from the ItemTemplate.
The Problem: In BarCheckItem, if BarCheckItem IsChecked, how do I style a border inside its DataTemplate?
I'm styling a BarCheckItem. To do it, I added a ContentTemplate with a DataTemplate inside where I added some color borders that change on MouseOver:
<dxb:BarCheckItem Name="barCheckItemRecord"
Command="..."
Cursor="Hand"
IsChecked="..."
IsVisible="..." >
<dxb:BarCheckItem.ContentTemplate>
<DataTemplate>
<StackPanel>
<Border x:Name="audioButtonInnerBorderLight">
<Canvas .../>
</Border>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="#30FFFFFF" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</dxb:BarCheckItem.ContentTemplate>
</dxb:BarCheckItem>
What I want to do now is to change the color of the border when the BarCheckItem is IsChecked.
Problem is, I only know how to use the triggers in a style, like this:
<dxb:BarCheckItem Name="barCheckItemRecord" [all the code from above]>
...
<dxb:BarCheckItem.Style>
<Style TargetType="{x:Type dxb:BarCheckItem}">
<Setter Property="Background" Value="Red" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Blue" />
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
</dxb:BarCheckItem.Style>
</dxb:BarCheckItem>
But I don't know how to point to the border (x:Name="audioButtonInnerBorderLight") FROM the triggers. Because the triggers don't know where the border is.
How can I make something like the following work?:
<Style TargetType="{x:Type dxb:BarCheckItem}">
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="Purple" />
</Trigger>
</Style>
Note: I thought the best idea was to put the border in a ContentTemplate in the BarCheckItem, using a Template setter. But it looks like BarCheckItems don't allow Templating.
You sholud add those triggers to the DataTemplate :
<dxb:BarCheckItem Name="barCheckItemRecord"
Command="..."
Cursor="Hand"
IsChecked="..."
IsVisible="..." >
<dxb:BarCheckItem.ContentTemplate>
<DataTemplate>
<StackPanel>
<Border x:Name="audioButtonInnerBorderLight">
<Canvas .../>
</Border>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="#30FFFFFF" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsChecked,RelativeSource={RelativeSource AncestorType={x:Type dxb:BarCheckItem}}}" Value="True">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="Blue" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsChecked,RelativeSource={RelativeSource AncestorType={x:Type dxb:BarCheckItem}}}" Value="{x:Null}">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="Yellow" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</dxb:BarCheckItem.ContentTemplate>
</dxb:BarCheckItem>
I finally found the best way to do this.
What I did was adding the ContentTemplate in the styles, and use the triggers from there:
<dxb:BarCheckItem ...>
<dxb:BarCheckItem.Style>
<Style TargetType="{x:Type dxb:BarCheckItem}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Border x:Name="audioButtonInnerBorderLight">
<Canvas .../>
</Border>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="audioButtonInnerBorderDark" Property="Background" Value="#30FFFFFF" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Border x:Name="audioButtonInnerBorderCHECKED">
<Canvas .../> (different styles here)
</Border>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</dxb:BarCheckItem.Style>
</dxb:BarCheckItem>
I have followed the advice of previous answers for setting a global GroupBox style that includes a HeaderTemplate. The style works great for when the affected GroupBox objects are enabled. When the affected GroupBox objects are disabled, I can only get the border color to change. I don't want the default Gray color when the GroupBox objects are disabled. My GroupBox style is shown below:
<!-- This is the color brush I am trying to set on the header text -->
<SolidColorBrush x:Key="moDisabledFGColor" Color="DarkBlue" Opacity="0.5" />
<Style TargetType="{x:Type GroupBox}">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="{StaticResource moFGColor}"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="{StaticResource moFGColor}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock x:Name="HeaderText" Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type GroupBox}}, Path=Header}" FontWeight="Bold"
Foreground="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type GroupBox}}, Path=Foreground}" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type GroupBox}}}" Value="False">
<Setter TargetName="HeaderText" Property="Foreground" Value="{StaticResource moDisabledFGColor}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="BorderBrush" Value="{StaticResource moDisabledFGColor}" />
<Setter Property="Foreground" Value="{StaticResource moDisabledFGColor}" />
</Trigger>
</Style.Triggers>
</Style>