WPF Selected ListViewItem: Using a ComboBox in the ItemTemplate - wpf

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>

Related

How to change Button Color On Mouse Hover

I am new In XAML.
I have my styling in Resources File and that style will automatically be applied to All Button in my application.
But some scenario has been changed and what I have to do is if any delete button in application exist change mouse hover color to white other button mouse hover color remains same. I tried but mouse hover event change all the button background color but what I want is only Delete Button color should change I need only design side
Before Mouse Hover
after Mouse Hover
My Code is:
<Style x:Key="BaseButtonStyle" TargetType="Button">
<Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush1}" />
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="3" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="BorderThickness" Value="2">
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource Self}}" Value="DELETE">
<Setter Property="Background" Value="#990000"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
<Setter Property="Background" Value="#990000"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=delete, Path=IsMouseOver}" Value="True">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource BaseButtonStyle}" TargetType="Button">
<Setter Property="FontSize" Value="16"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border x:Name="BaseShape" CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
<Rectangle x:Name="ButtonHighlight" Margin="1" RadiusX="9" RadiusY="9" Stroke="{StaticResource ButtonHoverHighlightBorderBrush}" StrokeThickness="1" Grid.ColumnSpan="2" Opacity="0" />
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
<Rectangle x:Name="FocusedVisualElement" Stroke="{StaticResource ButtonFocusedBorderBrush}" StrokeThickness="1" RadiusX="10" RadiusY="10" Opacity="0" />
<Rectangle x:Name="DisabledVisualElement" Fill="Chartreuse" IsHitTestVisible="false" RadiusX="10" RadiusY="10" Opacity="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Grid>
<Button Content="Delete" Name="delete" Width="50" Height="50" HorizontalAlignment="Right" Margin="0,70.121,170.028,0" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
<Button x:Name="button" Content="Kii" Width="50" Height="50" HorizontalAlignment="Left" Margin="186.349,70.121,0,0" VerticalAlignment="Top" d:LayoutOverrides="Height"/>
<Button x:Name="button1" Content="ZeKiillo" Width="50" Height="50" HorizontalAlignment="Left" Margin="82.075,70.121,0,0" VerticalAlignment="Top"></Button>
</Grid>
You could use a MultiTrigger that checks both the IsMouseOver and the Content property:
<Style x:Key="BaseButtonStyle" TargetType="Button">
<Setter Property="Background" Value="{StaticResource ButtonBackgroundBrush1}" />
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="3" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="BorderThickness" Value="2">
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource Self}}" Value="Delete">
<Setter Property="Background" Value="#990000"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
<Setter Property="Background" Value="#990000"></Setter>
</DataTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="Content" Value="Delete" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Red"/>
</MultiTrigger>
</Style.Triggers>
</Style>
Remember that the values are case-sensitive. "DELETE" is not the same value as "Delete".
Go like this:
<Style x:Key="BaseButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Green" />
<Setter Property="BorderBrush" Value="Blue" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="3" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="BorderThickness" Value="2">
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource Self}}" Value="Delete">
<Setter Property="Background" Value="#990000"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource Self}}" Value="Log out">
<Setter Property="Background" Value="#990000"></Setter>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding
RelativeSource={
RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}},
Path=IsMouseOver}" Value="True"/>
<Condition Binding="{Binding Content}" Value="Delete"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Red"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
MultiDataTrigger with RelativeResource solves here

Disabled button not changing color for DataTrigger in WPF

I have the below code where I'm trying to change the background color of the button when its disabled. But it still stays at the same background color as it is when its enabled. Its not changing though the button does get disabled. Any help would be much appreciated.
<Button Content="Install" Command="{Binding InstallCommand}" Margin="150,30,30,22" Width="118" FontSize="18" FontWeight="Bold" FontFamily="Segoe UI Light" FontStretch="ExtraExpanded">
<Button.Style>
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#FF4F4F4F"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Goldenrod"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding InstallEnabled, Converter={StaticResource BooleanToVisibilityConverter}}" Value="">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Background" Value="{DynamicResource windowBGBrushBusinessDateChanged}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I found that in your trigger you are not checking the value .Change your trigger as below.
<Style.Triggers>
<DataTrigger Binding="{Binding InstallEnabled, Converter={StaticResource BooleanToVisibilityConverter}}" Value="False">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Background" Value="{DynamicResource windowBGBrushBusinessDateChanged}"/>
</DataTrigger>
</Style.Triggers>
You can change the disabled button background by changing the control template of button like below,
<Window.Resources>
<Style x:Key="MyButton2" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Background" Value="MediumAquamarine" />
<Setter Property="Foreground" Value="MediumBlue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter x:Name="MyContentPresenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="DeepPink" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button x:Name="disabledButton"
Width="100"
Height="100"
Content="Button State"
IsEnabled="False"
Style="{StaticResource MyButton2}" />
</Grid>

WPF TabItem format date

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.

How can I bind to tag from style in wpf?

I'm implementing a search textbox; could you please help me with binding to TextBox.Tag?
Style
<Style x:Key="SearchTextBox" TargetType="{x:Type TextBox}">
<Style.Resources>
<VisualBrush x:Key="CueBannerBrush" AlignmentX="Left" AlignmentY="Center" Stretch="None">
<VisualBrush.Visual>
<Label Content="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Foreground="{StaticResource SearchTextBox.Foreground}" FontSize="{StaticResource SearchTextBox.FontSize}"/>
</VisualBrush.Visual>
</VisualBrush>
</Style.Resources>
<Setter Property="FontSize" Value="{StaticResource SearchTextBox.FontSize}" />
<Setter Property="Foreground" Value="{StaticResource SearchTextBox.TextForeground}" />
<Setter Property="MinWidth" Value="200" />
<Style.Triggers>
<Trigger Property="Text" Value="{x:Static sys:String.Empty}">
<Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
</Trigger>
<Trigger Property="Text" Value="{x:Null}">
<Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Background" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
Usage
<TextBox Style="{StaticResource SearchTextBox}" Tag="Search templates" />
How can I get the binding to work?
This article here is extremely similar to yours: WPF Bind to parent property from within nested element using style
Though, it doesn't really give a code sample, so here's some xaml you can use as an alternative to your current approach.
<Style x:Key="SearchTextBox" BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
<Style.Setters>
<Setter Property="Tag" Value=""/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<TextBlock x:Name="textBlock" Opacity="0.345" Text="{TemplateBinding Tag}" TextWrapping="Wrap" Visibility="Hidden" />
</Grid>
<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.Setters>
</Style>
And you'll still write your textbox code the same way you already had it:
<TextBox Style="{StaticResource SearchTextBox}" Tag="Search templates" />

How to bind to Selector.IsSelectionActive from a DataTemplate?

I have the following style for a ListBoxItem defined:
<Style x:Key="detailListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="AutomationProperties.AutomationId" Value="{Binding Path=StringTableKey}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="2,0,0,0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" Margin="4" 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="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource MenuItemSelectedBackgroundBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsSelected" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource MenuItemUnSelectedBackgroundBrush}"/>
</Trigger>
<!-- This is the case when a detail is selected (the master list loses focus). -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<!--<Setter Property="Opacity" TargetName="Bd" Value=".4"/>-->
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The ListBox for which this style is applied is defined as:
<ListBox
x:Name="listBox"
Margin="0,60,0,0"
MaxHeight="600"
Foreground="Transparent"
Style="{StaticResource detailListBoxStyle}"
ItemContainerStyle="{StaticResource detailListBoxItemStyle}"
ItemsSource="{Binding Source={StaticResource detailCollectionViewSource}}"
ItemTemplateSelector="{StaticResource detailDataTemplateSelector}"
TouchDown="ListBoxTouchDown"
TouchMove="ListBoxTouchMove"
TouchUp="ListBoxTouchUp"
KeyDown="ListBoxKeyDown">
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Margin="0,10,0,0" FontWeight="Bold" FontSize="20" Foreground="White" Text="{Binding Path=Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListBox.GroupStyle>
</ListBox>
I have a DataTemplate for a ListBoxItem that can be:
<DataTemplate x:Key="detailOnOffTemplate">
<Grid Height="50" Width="{StaticResource detailWidth}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="tb1" Margin="4,2,0,0" Grid.Row="0" Style="{StaticResource MenuTextStyle}" Text="{Binding DisplayName}" VerticalAlignment="Top" TextAlignment="Left">
<TextBlock.Effect>
<DropShadowEffect Color="White" ShadowDepth="0" BlurRadius="7"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
<Setter TargetName="tb1" Property="Foreground" Value="White"/>
<Setter TargetName="tb1" Property="Effect" Value="{x:Null}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
I need to be able to bind to "Selector.IsSelectionActive" from within my DataTemplate but nothing works. I've tried these things:
<DataTrigger Binding="{Binding Selector.IsSelectionActive, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
<Trigger Binding="{Binding Selector.IsSelectionActive, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
<Trigger "Selector.IsSelectionActive" Value="True">
Basically, I want the same trigger that is contained in the ControlTemplate in my DataTemplate:
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<!--<Setter Property="Opacity" TargetName="Bd" Value=".4"/>-->
</MultiTrigger>
Or, how else can I know the item "IsSelected" but does not have keyboard focus?
The first option you tried would be correct exception you're not identifying that that is an attached property so it looks like you are trying to bind to a property named Selector that returns an object that has a property names IsSelectionActive. So I would think something like the following would work:
<DataTrigger Binding="{Binding Path=(Selector.IsSelectionActive), RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" Value="True">
The previous answer didn't work for me, but after many hours of playing this did:
The key here (I think) was that the IsSelectionActive FALSE comes first. And that trigger is also a multitrigger combined with the IsSelected. I didn't have to use brackets in this case. But that might be because I'm using the latest .net framework, Wpf and Visual Studio, so you may need the brackets spoken of in the previous answer.
The red, yellow and white is just for this sample, remember to change those colors.
<ControlTemplate.Triggers>
<MultiTrigger>
<!-- selected, but not focused -->
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Yellow" />
</MultiTrigger>
<MultiTrigger>
<!-- selected, and focused -->
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Red" />
<Setter Property="Foreground" Value="White" />
</MultiTrigger>
</ControlTemplate.Triggers>

Resources