Windows Phone 7：突出显示选定的列表框项目

Question

我有以下 XAML（带有自定义 DataTemplate 的简单列表框）。我试图弄清楚如何突出显示所选项目（可能是背景颜色变化）。我想我需要对 Expression Blend 中的样式做一些事情，但我不太确定从哪里开始...... 编辑：玩了一会儿后，我现在有了这个（似乎没有做任何事情）

<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,0,20,0"/>
                            <StackPanel x:Name="stackPanel">
                                <TextBlock x:Name="ItemText" Text="{Binding Name}" Margin="-2,-13,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" d:IsHidden="True"/>
                                <TextBlock x:Name="DetailsText" Text="{Binding Artist}" Margin="0,-6,0,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,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="Now playing" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="ListTitle" Text="{Binding PlayerName}" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            <ProgressBar Visibility="Visible" IsIndeterminate="True" Height="4" HorizontalAlignment="Left" Margin="10,10,0,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>

Answer 1

this post 我的回答有帮助吗？

我认为最简单的方法是 通过表达混合。右键单击 你的 ListBox （主控件，不是 它的项目）。然后转到“编辑 附加模板......（项目 容器样式）....编辑当前”。 然后 Blend 将加载一个新页面 你修改的样式 容器。在左上窗格中（其中 您可以选择项目、资产等...） 点击“状态”。你会看到一个列表 的州。修改你想要的 改变，希望应该 工作

编辑：

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