silverlight – Windows Phone 7：突出显示所选列表项

我有以下XAML(带有自定义DataTemplate的简单列表框).我想知道如何突出显示所选项目(也许背景颜色变化).我想我需要用表达式混合中的样式做一些事情,但我不太确定从哪里开始…
编辑：经过一段时间的玩耍,我现在有了(这似乎什么都不做)

<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    x:Class="SqueezeBox.StartPage"
    d:DataContext="{d:DesignData SampleData/MainviewmodelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilynormal}"
    FontSize="{StaticResource PhoneFontSizenormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696" 
    shell:SystemTray.IsVisible="True">
    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="HighlightItemStyle" targettype="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate targettype="ListBoxItem">
                        <StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
                            <visualstatemanager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0" To="Selected">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="#FFFD0D0D" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ItemText" d:IsOptimized="True"/>
                                            </Storyboard>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected"/>
                                    <VisualState x:Name="SelectedUnfocused"/>
                                </VisualStateGroup>
                            </visualstatemanager.VisualStateGroups>
                            <Image x:Name="ItemImage" Source="{Binding ThumbnailalbumartUri}" Height="62" Width="62" VerticalAlignment="Top" Margin="10,20,0"/>
                            <StackPanel x:Name="stackPanel">
                                <TextBlock x:Name="ItemText" Text="{Binding Name}" Margin="-2,-13,0" Style="{StaticResource PhoneTextExtraLargeStyle}" d:IsHidden="True"/>
                                <TextBlock x:Name="DetailsText" Text="{Binding Artist}" Margin="0,-6,3" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>
    <!--Data context is set to sample data above and LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" d:DataContext="{Binding ServerStatus.Players[0]}" >
        <Grid.RowDeFinitions>
            <RowDeFinition Height="Auto"/>
            <RowDeFinition Height="*"/>
        </Grid.RowDeFinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,12">
            <TextBlock x:Name="ApplicationTitle" Text="Now playing" Style="{StaticResource PhoneTextnormalStyle}"/>
            <TextBlock x:Name="ListTitle" Text="{Binding PlayerName}" Margin="-3,-8,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            <ProgressBar Visibility="Visible" IsIndeterminate="True" Height="4" HorizontalAlignment="Left" Margin="10,10,0" x:Name="progressBar1" VerticalAlignment="Top" Width="460" />
        </StackPanel>

        <!--ContentPanel contains ListBox and ListBox ItemTemplate. Place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1">
            <ListBox x:Name="MainListBox" ItemsSource="{Binding Tracks}" ItemContainerStyle="{StaticResource HighlightItemStyle}" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

解决方法

我的答案是从 this post帮助吗？

I think the easiest way would be to go
via Expression Blend. Right click on
your ListBox (the main control,not
its items). Then go to “Edit
Additional Templates….(Item
Container Style)….Edit Current”.
Blend will then load a new page for
you to modify the styling of the
container. In the top left pane (where
you can choose project,assets etc…)
click on “States”. You’ll see a list
of states. Modify the ones you’d like
to change and hopefully that should
work

编辑：

<ControlTemplate targettype="ListBoxItem">
 <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
  <visualstatemanager.VisualStateGroups>
   <VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="normal"/>
    <VisualState x:Name="MouSEOver"/>

   </VisualStateGroup>
   <VisualStateGroup x:Name="SelectionStates">
    <VisualState x:Name="Unselected">
     <Storyboard>
      <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
      <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
     </Storyboard>
    </VisualState>
    <VisualState x:Name="Selected">
     <Storyboard>
      <ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
     </Storyboard>
    </VisualState>
    <VisualState x:Name="SelectedUnfocused">
     <Storyboard>
      <ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
     </Storyboard>
    </VisualState>
   </VisualStateGroup>
  </visualstatemanager.VisualStateGroups>
  <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="#FF1BA1E2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="Black" BorderBrush="Black"/>
 </Border>
</ControlTemplate>