Windows Phone 7: Chọn mục Listbox đã chọn

Question

Tôi có XAML sau đây (hộp danh sách đơn giản với DataTemplate tùy chỉnh). Tôi đang cố gắng tìm ra cách làm nổi bật mục đã chọn (có thể thay đổi màu nền). Tôi nghĩ tôi cần phải làm một cái gì đó với Styles trong Expression Blend nhưng tôi không hoàn toàn chắc chắn nơi để bắt đầu ... Chỉnh sửa: Sau một chút chơi xung quanh tôi bây giờ có điều này (mà dường như không làm bất cứ điều gì)

<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

Câu trả lời của tôi có từ số this post không?

Tôi nghĩ cách dễ nhất là đi qua Expression Blend. Nhấp chuột phải vào ListBox của bạn (điều khiển chính, không phải các mục của nó). Sau đó, chuyển đến "Chỉnh sửa Mẫu bổ sung .... (Mục Kiểu vùng chứa) .... Chỉnh sửa hiện tại". Trộn sau đó sẽ tải một trang mới cho bạn để sửa đổi kiểu dáng của vùng chứa . Trong ngăn trên cùng bên trái (nơi bạn có thể chọn dự án, tài sản, v.v ...) nhấp vào "Hoa". Bạn sẽ thấy danh sách tiểu bang. Sửa đổi những cái bạn muốn để thay đổi và hy vọng rằng nên việc

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>