具有列表项选择样式的 LongListSelector答案

【问题标题】：LongListSelector with list item selection style具有列表项选择样式的 LongListSelector
【发布时间】：2014-03-27 07:19:43
【问题描述】：

我正在使用 Windows Phone 8，我有 Longlist 选择器，其中包含很少的项目。

我正在使用以下代码突出显示列表框中的选定项目。但我希望 LongListSelector 达到相同的效果。

怎么做？

<Style x:Key="ListItemSelectorStyle" TargetType="ListBoxItem">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property ="Foreground" Value="Black" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border x:Name="ListBoxItem" Background="{TemplateBinding Background}" 
                                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                                            VerticalAlignment="{TemplateBinding VerticalAlignment}" 
                                            BorderBrush="{TemplateBinding BorderBrush}" 
                                            BorderThickness="{TemplateBinding BorderThickness}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected"/>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListItemBorder" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="#c9ebf2" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            <Border BorderThickness="0,0,0,1" BorderBrush="Black">
                                <Border x:Name="ListItemBorder" BorderBrush="Transparent" Background="#FFFFFF">
                                    <ContentControl x:Name="ContentContainer" 
                                                ContentTemplate="{TemplateBinding ContentTemplate}" 
                                                Content="{TemplateBinding Content}" 
                                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                Margin="{TemplateBinding Padding}" 
                                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                            </Border>
                        </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

【问题讨论】：

标签： c# silverlight windows-phone-8 windows-phone longlistselector

【解决方案1】：

我尝试了您的代码，但the LongListSelector control 显示了一个可选项目列表，其中包含用户跳转到列表特定部分的机制。这是sample code。

但是如果你想达到ListBox这样的效果，你可以设置模板

<Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="phone:LongListSelector">
                        <Grid Background="{TemplateBinding Background}" d:DesignWidth="480" d:DesignHeight="800">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ScrollStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="00:00:00.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Scrolling">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NotScrolling"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Seleced">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ViewportControl">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="{TemplateBinding Padding}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="auto"/>
                                </Grid.ColumnDefinitions>
                                <ViewportControl x:Name="ViewportControl" HorizontalContentAlignment="Stretch" VerticalAlignment="Top"/>
                                <ScrollBar x:Name="VerticalScrollBar" Grid.Column="1" Margin="4,0,4,0" Opacity="0" Orientation="Vertical"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

【讨论】：

我需要在哪里添加这个模板？
@user3114009，添加到
是的，我添加了这一点，并且我已将 Style="{StaticResource LongListSelectorStyle1}" 添加到我的
模板中的“已选择”应为“已选择”。