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

Question

我有以下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,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的回答有帮助吗？

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

编辑：

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