Windows Phone 7: Evidenzia elemento Listbox selezionato

Question

Ho il seguente XAML (casella di riepilogo semplice con DataTemplate personalizzato). Sto cercando di capire come evidenziare l'elemento selezionato (forse il cambiamento del colore di sfondo). Immagino di dover fare qualcosa con Styles in Expression Blend ma non sono abbastanza sicuro da dove cominciare ... Edit: Dopo un po 'di gioco, ora ho questo (che non sembra fare nulla)

<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

La mia risposta da this post è di aiuto?

Penso che il modo più semplice sarebbe quello di andare tramite Expression Blend. Fai clic destro su il tuo ListBox (il controllo principale, non i suoi articoli). Quindi andare su "Modifica Altri modelli .... (Articolo Stile contenitore) ... Modifica corrente". Blend caricherà quindi una nuova pagina per per modificare lo stile del contenitore . Nel riquadro in alto a sinistra (dove puoi scegliere il progetto, le risorse ecc ...) fai clic su "Stati". Verrà visualizzato un elenco di stati. Modificare quelle che desideri per cambiare e si spera che dovrebbe lavoro

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>