代码之家  ›  专栏  ›  技术社区  ›  David Hayes

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

  •  12
  • David Hayes  · 技术社区  · 14 年前

    我有以下XAML(带有自定义数据模板的简单列表框)。我想知道如何突出显示所选项目(可能是背景颜色变化)。我想我需要做一些与风格在表达混合,但我不太确定从哪里开始… 编辑:在玩了一会儿之后,我现在有了这个(它似乎什么都不做)

    <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>
    
    1 回复  |  直到 13 年前
        1
  •  13
  •   keyboardP    14 年前

    我的回答来自 this post 帮助?

    我想最简单的方法就是 通过表达式混合。右击 您的列表框(主控件,而不是 它的项目)。然后转到“编辑” 附加模板….(项目 容器样式…。编辑当前“”。 然后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>