Victor's Blog (my email: wpfauthor at gmail dot com)

Email From Guillermo:

On May 8, 2008, at 3:13 AM, "Guillermo M" wrote:

Hi, I've been reading your book and I have gotten to a point where I'm quite Stuck.
I'm using the The Blend september preview, and in chapter 7, in page 150 I select correctly the ListBoxItem, and create a ListBoxItemStyle1, but when I go to the ResourceDictionary I try to find the indicated trigger "<trigger property ="is Selected" ..." etc. And it doesnt exist!
So I decided to copy the code and include it but it somehow doesn't work: this means that my background is still blue. It seams as though I have done something wrong.
Any hint?
Thanks.

Here is my ResourceDictionary code:
<!-- Resource dictionary entries should be defined here. -->
<Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
<Setter Property="BorderBrush" Value="{x:Static Microsoft_Windows_Themes:ClassicBorderDecorator.ClassicBorderBrush}"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Microsoft_Windows_Themes:ClassicBorderDecorator SnapsToDevicePixels="true" x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderStyle="Sunken" BorderThickness="{TemplateBinding BorderThickness}" OpacityMask="{x:Null}" HorizontalAlignment="Center">
<ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Microsoft_Windows_Themes:ClassicBorderDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

And this is my XAML code:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ControlTemplateProject.Window1"
Title="Window1" Height="600" Width="600">
<Window.Resources>
<Style x:Key="ButtonStyle1" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Stroke="#FFC1BFBF" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0.998" StartPoint="0.5,-3.197">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button HorizontalAlignment="Left"
Margin="97,0,0,135"
Style="{DynamicResource ButtonStyle1}"
VerticalAlignment="Bottom" Width="159" Height="46"
Content="" x:Name="myButton"
/>
<ListBox IsSynchronizedWithCurrentItem="True" HorizontalAlignment="Right" Margin="0,256,55,71" Width="197" Style="{DynamicResource ListBoxStyle1}" Background="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}">
<ListBoxItem Content="ListBoxItem"/>
</ListBox>
<ListBox IsSynchronizedWithCurrentItem="True" HorizontalAlignment="Left" Margin="64,225,0,208" Style="{DynamicResource MyListBoxStyle}" Width="164">
<ListBoxItem Content="ListBoxItem"/>
</ListBox>
</Grid>
</Window>

Thanks in advance.
Guillermo Mañas

Email From Victor:

On May 8, 2008, at 6:23 AM, "Victor Gaudioso" wrote:

Hello G,
I will email you back as soon as I get to my office and try to replicate your problem. I am sure I can help you out. Stand by. Victor.

Sent from my iPhone

Email From Victor:

On May 8, 2008, at 8:52 AM, "Victor Gaudioso" wrote:

Hello Guilermo, Sorry I didn't write back with a solution earlier, I was sleeping. I have two little kids so sleep is something not to be missed when the chance presents itself. As I suspected you have made a Style for the ListBox when you actually needed to make a Style for the ListBoxItem because that is what is selected. I have outlined the steps below to accomplish what you want to do.

1. Create a new WPF project in Blend
2. Select ListBox from the Asset Library
3. Draw a ListBox on the Workspace
4. Right-click on the ListBox and left-click on Add ListBoxItem
5. Click the Selection tool (or hit the V key)
6. Right-click on the ListBoxItem, Not the listbox and click Edit Control Parts (Template) > Edit a Copy
7. Leave the default name of ListBoxItemStyle1 and click OK
8. Click the XAML tab to view the XAML you will see this: (the part you are interested in is in Bold)

<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 x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</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>

<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>

<Trigger Property="IsEnabled" Value="false">

<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>

</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

9. See above you can see the IsSelected Trigger...here it is

<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>

10. Notice the Background Setter is changing the background to Blue...remove it and make the Foreground Red like this:

<Trigger Property="IsSelected" Value="true">

<Setter Property="Foreground" Value="Red"/>
</Trigger>
11. Now when you select an item in the ListBox the text will turn Red but not change the Background.

Try this and let me know if this solves your problem. And, thanks for buying and reading the book. If you do like it please write a review on Amazon. Good Luck and feel free to write me again with either questions or a portfolio of your WPF/SL work.

Thanks, Victor

Email From Guillermo:

On Thu, May 8, 2008 at 1:02 PM, Guillermo M wrote:

Hmmm... I see the mistake. I can't actually try it now, since I have a Mac at home but i will tomorrow and I will let you know.
Thanks for the quick response, I was quite troubled but continued reading anyway.
Great book by the way!