locked
DataTrigger in ListBoxItem Style (Steven Chalmers) - 1/8/2008 6:38 AM PST RRS feed

  • Question

  • By: Steven Chalmers


    My objective is to style an element in a listbox differently based on the 
    text of that element.  In this case I have a list of countries and would like 
    to color "Slovakia" foreground Red.
    
    Is my syntax wrong or is my understanding of datatriggers wrong?  
    
    Thanks in advance.
    
    -------------------------------------------------------------------------------------------
    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="DataTriggerText.Window1"
    	x:Name="Window"
    	Title="Window1"
    	Width="640" Height="480">
    
    	<Window.Resources>
    	
    		<XmlDataProvider x:Key="Countries" XPath="CountryData">
    			<x:XData>
    	        <CountryData xmlns="">
    				<Countries>
    					<Country>
    					   <Name>Argentina</Name>
    					   <Name>Slovakia</Name>
    					   <Name>Greenland</Name>
    					   <Name>Australia</Name>
    					   <Name>China</Name>
    					   <Name>India</Name>
    					   <Name>Chile</Name>
    					</Country>					   
    				</Countries>
    			</CountryData>
    	      </x:XData>
    		</XmlDataProvider>
    
    		<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type ListBoxItem}">
    						<Border SnapsToDevicePixels="true" x:Name="Bd" 
    Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding 
    BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
    Padding="{TemplateBinding Padding}">
    							<ContentPresenter SnapsToDevicePixels="{TemplateBinding 
    SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding 
    HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding 
    VerticalContentAlignment}"/>
    						</Border>
    						<ControlTemplate.Triggers>
    							<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>
    						</ControlTemplate.Triggers>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    			<Style.Triggers>
                    <DataTrigger Binding="{Binding Path=Countries}" 
    Value="Slovakia">
                        <Setter Property="Foreground" Value="Red" />
    				</DataTrigger>
    			</Style.Triggers>
    		</Style>
    
    	</Window.Resources>
    	
    
    	<Grid x:Name="LayoutRoot">
    		<ListBox IsSynchronizedWithCurrentItem="True" 
    ItemTemplate="{DynamicResource NameTemplate}" ItemsSource="{Binding 
    Mode=Default, Source={StaticResource Countries}, 
    XPath=/CountryData/Countries/Country/Name}" FontFamily="Candara" 
    FontSize="18" Margin="188,94,202,90" ItemContainerStyle="{DynamicResource 
    ListBoxItemStyle1}"/>
    	</Grid>
    </Window>
    
    -------------------------------------------------------------------------------------------
    -- 
    Steven Chalmers
    Information Interfaces Design Architect
    TeleTech
    Friday, February 22, 2008 3:58 PM

All replies

  • Steven Chalmers


    Got it working:
    
    #####################################################################
    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="DataTriggerText.Window1"
    	x:Name="Window"
    	Title="Window1"
    	Width="640" Height="480">
    
    	<Window.Resources>
    	
    		<XmlDataProvider x:Key="Countries" XPath="CountryData">
    			<x:XData>
    	        <CountryData xmlns="">
    				<Countries>
    					<Country>
    					   <Name>Argentina</Name>
    					   <Name>Slovakia</Name>
    					   <Name>Greenland</Name>
    					   <Name>Australia</Name>
    					   <Name>China</Name>
    					   <Name>India</Name>
    					   <Name>Chile</Name>
    					</Country>					   
    				</Countries>
    			</CountryData>
    	      </x:XData>
    		</XmlDataProvider>
    
    		<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
    			<Setter Property="Background" Value="Transparent"/>
    			<Setter Property="HorizontalContentAlignment" Value="{Binding 
    Path=HorizontalContentAlignment, RelativeSource={RelativeSource 
    AncestorType={x:Type ItemsControl}}}"/>
    			<Setter Property="VerticalContentAlignment" Value="{Binding 
    Path=VerticalContentAlignment, RelativeSource={RelativeSource 
    AncestorType={x:Type ItemsControl}}}"/>
    			<Setter Property="Padding" Value="2,0,0,0"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="{x:Type ListBoxItem}">
    						<Border SnapsToDevicePixels="true" x:Name="Bd" 
    Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding 
    BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
    Padding="{TemplateBinding Padding}">
    							<ContentPresenter SnapsToDevicePixels="{TemplateBinding 
    SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding 
    HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding 
    VerticalContentAlignment}"/>
    						</Border>
    						<ControlTemplate.Triggers>
    							<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>
    						</ControlTemplate.Triggers>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    			<Style.Triggers>
    				<DataTrigger Binding="{Binding XPath=.}" Value="Greenland">
    					<Setter Property="Foreground" Value="Green" />
    				</DataTrigger>
    				<DataTrigger Binding="{Binding XPath=.}" Value="Slovakia">
    					<Setter Property="Foreground" Value="Red" />
    				</DataTrigger>
    				<DataTrigger Binding="{Binding XPath=.}" Value="China">
    					<Setter Property="Foreground" Value="Blue" />
    				</DataTrigger>
    			</Style.Triggers>
    		</Style>
    
    		<DataTemplate x:Key="NameTemplate1">
    			<TextBlock Text="{Binding Mode=OneWay, XPath=.}"/>
    		</DataTemplate>
    
    	</Window.Resources>
    	
    
    	<Grid x:Name="LayoutRoot">
    		<ListBox IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding 
    Mode=Default, Source={StaticResource Countries}, 
    XPath=/CountryData/Countries/Country/Name}" FontFamily="Candara" 
    FontSize="18" Margin="188,94,202,90" ItemTemplate="{DynamicResource 
    NameTemplate1}" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}"/>
    	</Grid>
    </Window>
    
    
    #####################################################################
    -- 
    Steven Chalmers
    Information Interfaces Design Architect
    TeleTech
    
    
    "Steven Chalmers" wrote:
    
    > My objective is to style an element in a listbox differently based on the 
    > text of that element.  In this case I have a list of countries and would like 
    > to color "Slovakia" foreground Red.
    > 
    > Is my syntax wrong or is my understanding of datatriggers wrong?  
    > 
    > Thanks in advance.
    > 
    > -------------------------------------------------------------------------------------------
    > <Window
    > 	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    > 	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    > 	x:Class="DataTriggerText.Window1"
    > 	x:Name="Window"
    > 	Title="Window1"
    > 	Width="640" Height="480">
    > 
    > 	<Window.Resources>
    > 	
    > 		<XmlDataProvider x:Key="Countries" XPath="CountryData">
    > 			<x:XData>
    > 	        <CountryData xmlns="">
    > 				<Countries>
    > 					<Country>
    > 					   <Name>Argentina</Name>
    > 					   <Name>Slovakia</Name>
    > 					   <Name>Greenland</Name>
    > 					   <Name>Australia</Name>
    > 					   <Name>China</Name>
    > 					   <Name>India</Name>
    > 					   <Name>Chile</Name>
    > 					</Country>					   
    > 				</Countries>
    > 			</CountryData>
    > 	      </x:XData>
    > 		</XmlDataProvider>
    > 
    > 		<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
    > 			<Setter Property="Template">
    > 				<Setter.Value>
    > 					<ControlTemplate TargetType="{x:Type ListBoxItem}">
    > 						<Border SnapsToDevicePixels="true" x:Name="Bd" 
    > Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding 
    > BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
    > Padding="{TemplateBinding Padding}">
    > 							<ContentPresenter SnapsToDevicePixels="{TemplateBinding 
    > SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding 
    > HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding 
    > VerticalContentAlignment}"/>
    > 						</Border>
    > 						<ControlTemplate.Triggers>
    > 							<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>
    > 						</ControlTemplate.Triggers>
    > 					</ControlTemplate>
    > 				</Setter.Value>
    > 			</Setter>
    > 			<Style.Triggers>
    >                 <DataTrigger Binding="{Binding Path=Countries}" 
    > Value="Slovakia">
    >                     <Setter Property="Foreground" Value="Red" />
    > 				</DataTrigger>
    > 			</Style.Triggers>
    > 		</Style>
    > 
    > 	</Window.Resources>
    > 	
    > 
    > 	<Grid x:Name="LayoutRoot">
    > 		<ListBox IsSynchronizedWithCurrentItem="True" 
    > ItemTemplate="{DynamicResource NameTemplate}" ItemsSource="{Binding 
    > Mode=Default, Source={StaticResource Countries}, 
    > XPath=/CountryData/Countries/Country/Name}" FontFamily="Candara" 
    > FontSize="18" Margin="188,94,202,90" ItemContainerStyle="{DynamicResource 
    > ListBoxItemStyle1}"/>
    > 	</Grid>
    > </Window>
    > 
    > -------------------------------------------------------------------------------------------
    > -- 
    > Steven Chalmers
    > Information Interfaces Design Architect
    > TeleTech
    Saturday, February 23, 2008 12:14 AM