ListBoxItem ControlTemplate and ItemTemplateSelector - wpf

I'm trying to set a ControlTemplate to the ListBoxItem control, right now I haven't made any modification, it's as it comes out of the box:
<ControlTemplate TargetType="ListBoxItem"
x:Key="listBoxItemCustomTemplate">
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
Name="Bd"
SnapsToDevicePixels="True">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}"
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>True</s:Boolean>
</Trigger.Value>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected">
<Condition.Value>
<s:Boolean>True</s:Boolean>
</Condition.Value>
</Condition>
<Condition Property="Selector.IsSelectionActive">
<Condition.Value>
<s:Boolean>False</s:Boolean>
</Condition.Value>
</Condition>
</MultiTrigger.Conditions>
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
This works fine, the problem is when I try to use an ItemTemplateSelector in my ListBox. The DataTemplateSelector code doesn't even run, apparently there's something preventing the ItemTemplateSelector from working in that ControlTemplate, but I'm not sure how.
This is the ListBox:
<ListBox x:Name="listBox"
ItemsSource="{Binding AllItems}"
ItemTemplateSelector="{DynamicResource ExperimentExplorerTemplateSelector}"
ItemContainerStyle="{DynamicResource customListBoxItemStyle}" />
And the style that sets the ControlTempalte:
<Style TargetType="{x:Type ListBoxItem}" x:Key="customListBoxItemStyle">
<Setter Property="Template" Value="{StaticResource listBoxItemCustomTemplate}" />
</Style>
Any ideas why this is happening?
Thanks.

It looks like you used ShowMeTheTemplate and this does not always work correctly.
Here is the ListBoxItem template's ContentPresenter from ShowMeTheTemplate (Aero):
<ContentPresenter
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
and the same section from Blend:
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
and there are other differences as well but this line specifically:
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
is what is the cause of your DataTemplateSelector being bypassed. I can't say that I understand why because ContentStringFormat is supposed to be ignored if TemplateSelector is set.
The moral is that we need a more reliable way to extract the same templates/styles that Blend extracts.

Related

Combo box becomes invisible with custom made style - WPF?

I have this combo box XAML code:
<ComboBox
Grid.Column="0"
Width="250"
Height="25"
Foreground="#545454"
ItemsSource="{StaticResource ParametersArray}">
<ComboBox.Style>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter
Property="Background"
Value="Blue" />
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter
Property="Background"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.Style>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd"
SnapsToDevicePixels="true"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter
Property="Background"
Value="#C5C5C5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
Instead of changing color when mouse is over, it becomes completely invisible. You cannot even click it.
My goal is to achieve this look:
What do I do wrong?
Your ControlTemplate is empty. If you remove the element, you should see the control.
When creating a custom control, it's easier to start from an existing working template and then edit it as per your requirements. You can copy the default template of a control into your XAML markup by right-clicking on the control in design mode in Visual Studio or in Blend and choose Edit Template->Edit a Copy.
Here is for example how the default Style for the built-in ComboBox control is defined:
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="opaqueRect" Fill="{Binding Background, ElementName=dropDownBorder}" Height="{Binding ActualHeight, ElementName=dropDownBorder}" Width="{Binding ActualWidth, ElementName=dropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
<ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
<Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/>
<Setter Property="Color" TargetName="shadow" Value="#71000000"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="true"/>
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</MultiTrigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
<Setter Property="Canvas.Top" TargetName="opaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="opaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You will at least need to add the <ItemsPresenter /> element to your Style.

Change binding value in custom template trigger

How I can change binded property in custom template?
Button with Path Fill which is binded to Foreground of button:
<Button Style="{DynamicResource CustomButtonStyle}"Foreground="White" >
<Path Data="PATH_DATA" Stretch="Uniform" Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" ></Path>
</Button>
Here is custom style with override template:
<Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#d5113f"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="#d5113f"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But changing Foregroud in trigger
<Setter Property="Foreground" Value="#d5113f"/>
will do nothing
Because you set Foreground to a fixed value, according to Dependency Property Setting Precedence List, your style trigger will not override this value. You need to bring Foreground set into Style as another setter like this:
<Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
...
</Style>

TextBox TextTrimming

I would like to apply a TextTrimming option on a TextBox (Not a TextBlock).
The compiler tells me that the TextTrimming options is not a valid property of the Textbox.
I could do a fancy control that is a Textblock and once it's clicked will become a Textbox and conversely go back to being a Textblock once the focus is lost.
Before going this way I would like to know if a built-in function already exists (or is there a smarter way) to allow you to do that?
EDIT: What I want to have in the end is a TextBox which is trim (the full content will be display in a tooltip) but when the user select the TextBox (enter in "edit mode") the full content will be display (without trim) therefore the user will be able to modify the full text. when the TextBox lost the focus (go back to "view mode") the content will be trim again.
Thanks
Try a style like this (I've added background colours to make the change obvious):
<Style TargetType="TextBox">
<Setter Property="Background" Value="Yellow" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}" Value="false">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<TextBlock Text="{TemplateBinding Text}" TextTrimming="CharacterEllipsis" Background="Red" />
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
Dan Puzey has a great answer, but I wanted to add more so that the style of the TextBlock appeared like a TextBox.
Here is the XAML style I came up with:
<Style TargetType="TextBox">
<Style.Triggers>
<DataTrigger Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border BorderThickness="1" CornerRadius="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFABADB3" Offset="0"/>
<GradientStop Color="#FFABADB3" Offset="0.044"/>
<GradientStop Color="#FFE2E3EA" Offset="0.060"/>
<GradientStop Color="#FFE3E9EF" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<TextBlock Padding="4,2,0,0" Text="{TemplateBinding Text}" TextTrimming="CharacterEllipsis"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
This is what the control looks like when it has no keyboard focus:
This is what the control looks like after gaining keyboard focus:
I think wat you are looking for is this
<TextBox Text="{Binding Path=String, Converter={StaticResource StringConverter}, ConverterParameter=Trim:Argument:AnotherArgument}" />
I hope it helps :)
It will call the trim function and pass any arguments, if you want.
You can also use split and pass the delimiters as arguments.
You can find more on Binding.Converter here
I would use different control template: template with trimming when text box is not focused, whereas text box is focused I would use the regular template to allow text selection.
Needs to replace TextBox control template.
<ControlTemplate TargetType="{x:Type TextBox}"
x:Key="ControlTemplateTextBoxNormal">
<Border Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<Border x:Name="ErrorElement"
Visibility="Collapsed"
BorderThickness="1.25"
BorderBrush="{StaticResource BrushError}">
<Grid>
<Polygon x:Name="toolTipCorner"
Panel.ZIndex="2"
Margin="-1"
Points="9,9 9,0 0,0"
Fill="{StaticResource BrushError}"
HorizontalAlignment="Right"
VerticalAlignment="Top">
<Polygon.ToolTip>
<ToolTip Style="{StaticResource ToolTipStyleError}"
Content="{Binding (Validation.Errors)[0].ErrorContent, RelativeSource={RelativeSource TemplatedParent}}" />
</Polygon.ToolTip>
</Polygon>
</Grid>
</Border>
<ScrollViewer x:Name="PART_ContentHost"
Padding="{TemplateBinding Padding}"
BorderThickness="0"
IsTabStop="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
<TextBlock Text="{Binding Path=(behaviors:TextBoxBehaviors.WatermarkText), RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}"
IsHitTestVisible="False"
Visibility="Collapsed"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Foreground="Gray"
x:Name="watermark" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused"
Value="False">
<Setter Property="Visibility"
TargetName="watermark"
Value="Visible" />
</Trigger>
<Trigger Property="Validation.HasError"
Value="True">
<Setter Property="Visibility"
TargetName="ErrorElement"
Value="Visible" />
</Trigger>
<!--<Trigger Property="behaviors:TextBoxBehaviors.WatermarkText"
Value="True">
<Setter Property="Visibility"
TargetName="ErrorElement"
Value="Visible" />
</Trigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="{x:Type TextBox}"
BasedOn="{StaticResource {x:Type TextBox}}"
x:Key="TextBoxStyleTrimming">
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="Validation.ErrorTemplate"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<Border x:Name="ErrorElement"
Visibility="Collapsed"
BorderThickness="1.25"
BorderBrush="{StaticResource BrushError}">
<Grid>
<Polygon x:Name="toolTipCorner"
Panel.ZIndex="2"
Margin="-1"
Points="9,9 9,0 0,0"
Fill="{StaticResource BrushError}"
HorizontalAlignment="Right"
VerticalAlignment="Top">
<Polygon.ToolTip>
<ToolTip Style="{StaticResource ToolTipStyleError}"
Content="{Binding (Validation.Errors)[0].ErrorContent, RelativeSource={RelativeSource TemplatedParent}}" />
</Polygon.ToolTip>
</Polygon>
</Grid>
</Border>
<TextBlock Padding="{TemplateBinding Padding}"
Text="{TemplateBinding Text}"
TextTrimming="CharacterEllipsis"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
<TextBlock Text="{Binding Path=(behaviors:TextBoxBehaviors.WatermarkText), RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type TextBox}}}"
IsHitTestVisible="False"
Visibility="Collapsed"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Foreground="Gray"
x:Name="watermark" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused"
Value="False">
<Setter Property="Visibility"
TargetName="watermark"
Value="Visible" />
</Trigger>
<Trigger Property="Validation.HasError"
Value="True">
<Setter Property="Visibility"
TargetName="ErrorElement"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsKeyboardFocused"
Value="True">
<Setter Property="Template"
Value="{StaticResource ControlTemplateTextBoxNormal}" />
</Trigger>
</Style.Triggers>
</Style>
You may create a control template for your TextBox that display the usual editor when focused, and a TextBlock with trimming when it's not.

The Background of the selected row do not change in ListView Control

I have the following ListView with a ListView.ItemTemplate:
<ListView.ItemTemplate>
<DataTemplate>
<StackPanelName="stackPanel" Orientation="Horizontal">
<TextBoxName="textBoxOrg"
Background="Transparent" BorderThickness="0" TextWrapping="Wrap" Text="{BindingOrgText}"
IsReadOnly="True"/>
<TextBoxName="textBoxNew"
Background="Transparent" BorderThickness="0" TextWrapping="Wrap" Text="{BindingNewText}"
AcceptsReturn="True"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
And the following ListViewItemStyle
<Style TargetType="ListViewItem">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightGoldenrodYellow" />
</Trigger>
</Style.Triggers>
</Style>
I want to change the default 'Blue' background color of the selected item, but when using the above code, it did not change to 'LightGoldenrodYellow' when I select an item.
How should I fix the code to let it work properly?
You need to customize the ControlTemplate of the ListViewItem. Otherwise it overrides(doesnt use) the Background trigger you defined. Here is the default template to customize (I'm using a helpful little tool called stylesnooper to get the templates http://wpfwonderland.wordpress.com/2007/01/02/wpf-tools-stylesnooper/):
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}" Name="Bd" SnapsToDevicePixels="True">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.HighlightTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
True</s:Boolean>
</Trigger.Value>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected">
<Condition.Value>
<s:Boolean>
True</s:Boolean>
</Condition.Value>
</Condition>
<Condition Property="Selector.IsSelectionActive">
<Condition.Value>
<s:Boolean>
False</s:Boolean>
</Condition.Value>
</Condition>
</MultiTrigger.Conditions>
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
</Setter.Value>
</Setter>
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>
False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Dr WPF has a excellent article on ItemsControls called (ItemsControl: A to Z) and read I and L
I finally work out like this:
<Style x:Key="myListboxStyle">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#CCFFFFFF" />
</Style.Resources>
</Style>
And it works perfect.
Thanks all of you.

How do I Change the FontFamily on a ContentPresenter?

I have a custom template for an expander that is close to the code below. I had to change some of the code to take out custom classes, brushes, etc..
<Style TargetType="{x:Type Expander}">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Top" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="FontFamily"
Value="Tahoma" />
<Setter Property="FontSize"
Value="12" />
<Setter Property="Foreground"
Value="Black" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="Margin"
Value="2,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border x:Name="Border"
SnapsToDevicePixels="true"
Background="White"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="0,0,0,10"
Padding="0"
CornerRadius="8">
<DockPanel>
<Border x:Name="HeaderSite"
Background="Blue"
CornerRadius="8"
Height="32"
DockPanel.Dock="Top">
<DockPanel>
<ToggleButton Foreground="White"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="0"
MinHeight="0"
MinWidth="0"
Padding="6,2,6,2"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
DockPanel.Dock="Left">
</ToggleButton>
<ContentPresenter SnapsToDevicePixels="True"
HorizontalAlignment="Left"
Margin="4,0,0,0"
ContentSource="Header"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</DockPanel>
</Border>
<Border x:Name="InnerBorder"
Margin="0" >
<ContentPresenter Focusable="false"
Visibility="Collapsed"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
x:Name="ExpandSite"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
DockPanel.Dock="Bottom" />
</Border>
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded"
Value="true">
<Setter Property="Margin"
TargetName="InnerBorder"
Value="5" />
<Setter Property="Visibility"
TargetName="ExpandSite"
Value="Visible" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see there are two ContentPresenters. I would like the first one to use Tahoma Bold as the font instead of the default Tahoma. How can I do this?
You need to use the FontWeight property to specify a bold font. However, you've probably noticed that ContentPresenter doesn't have that property. So you'll need to use the TextBlock.FontWeight attached property to tell the ContentPresenter that any text inside it should be bold.
Try this:
<ContentPresenter TextBlock.FontFamily="Tahoma"
TextBlock.FontWeight="Bold"
SnapsToDevicePixels="True"
HorizontalAlignment="Left"
Margin="4,0,0,0"
ContentSource="Header"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
I can't help about Silverlight, but in the new WPF 4 it is TextElement rather than TextBlock

Resources