Windows Phone 7: Mettez en surbrillance l'élément de la zone de liste sélectionnée

Question

J'ai le XAML suivant (zone de liste simple avec DataTemplate personnalisé). J'essaie de comprendre comment mettre en évidence l'élément sélectionné (peut-être changer de couleur de fond). Je pense que je dois faire quelque chose avec Styles dans Expression Blend mais je ne sais pas trop par où commencer ... Edit: Après un peu de jeu, j'ai maintenant ceci (qui ne semble rien faire)

<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

Est-ce que ma réponse de this post aide?

Je pense que le plus simple serait d'aller via Expression Blend. Clic droit sur votre ListBox (le contrôle principal, pas ses articles). Ensuite, allez à "Modifier Modèles supplémentaires .... (Article Style de conteneur) ...." Current Current ". Mélange chargera alors une nouvelle page pour afin de modifier le style du conteneur . Dans le volet en haut à gauche (où vous pouvez choisir le projet, les actifs, etc ...) cliquez sur "Etats". Vous verrez une liste des états. Modifier ceux que vous souhaitez pour changer et nous espérons que devrait travail

EDIT:

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