WP8.1 XAML - 如何让 GridView 项目在被选中时显示？
WP8.1 XAML - how to get a GridView item to show when it is selected?
我正在尝试突出显示 GridView（Windows Phone 8.1 C#/XAML 应用程序）中的选定项。我使用 Blend 提取了 GridViewItemStyle，它包含以下内容：
<Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0">
<Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,1,1,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/>
</Grid>
</Border>
我已经定义了这个 XAML 使用的画笔颜色并暂时将不透明度设置为 1 以便我可以检查它是否应该显示。到目前为止，还不错。
同样式定义中还有一个视觉状态组：
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
但是当一个项目被选中时，它并没有获得视觉指示器。显示指示器的 XAML 显然有效，所以我试图理解为什么视觉状态组无效，特别是因为它直接来自 Blend。
GridView定义如下：
<GridView
AutomationProperties.AutomationId="ItemListViewSection2"
AutomationProperties.Name="Items In Group"
SelectionMode="Single"
IsItemClickEnabled="True"
ItemsSource="{Binding GroupMembers}"
ItemTemplate="{StaticResource Individual80ItemTemplate}"
ItemContainerStyle="{StaticResource GridViewItemStyle1}"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True"
SelectionChanged="itemView_SelectionChanged"
Loaded="itemGridView_Loaded"/>
Update：如果我将 SelectionMode 从 Single 更改为 Multiple，好处是 SelectedEarmark 和 SelectedGlyph 现在会在每个项目被选中时出现......但坏处, 是 SelectedBorder 对所有似乎由另一位 Visual State stuffery 触发的条目可见：
<VisualStateGroup x:Name="MultiSelectStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ListMultiSelect" GeneratedDuration="0:0:0.15" To="NoMultiSelect"/>
<VisualTransition From="NoMultiSelect" GeneratedDuration="0:0:0.15" To="ListMultiSelect"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoMultiSelect"/>
<VisualState x:Name="ListMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CheckboxContainerTranslateTransform"/>
<DoubleAnimation Duration="0" To="{ThemeResource ListViewItemContentTranslateX}" Storyboard.TargetProperty="X" Storyboard.TargetName="ContentBorderTranslateTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="GridMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
我似乎能够解决此问题的唯一方法是从样式中删除这些视觉状态或更改边框 XAML，这样它基本上就不会绘制边框了。 that 的耻辱是我无法使用内置样式；我基本上必须提供自己的风格。我想，经过深思熟虑，这可能不是一件坏事......一旦你掌握了弄清楚项目样式以及设置器等如何工作的窍门
使用 FocusStates 而不是 SelectionStates。
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="PointerFocused">
<Storyboard>
<DoubleAnimation Duration = "0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration = "0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimation Duration = "1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration = "1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
希望这会奏效。如果没有，那么您可以定义自己的自定义状态并在代码隐藏中使用它。
我遇到了同样的问题。请参阅我的问题和答案以供参考。
这是我为获得所需结果而调整的 listviewitem 样式。
<Style x:Key="MyListViewItemStyle"
TargetType="ListViewItem">
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="TabNavigation"
Value="Local" />
<Setter Property="IsHoldingEnabled"
Value="False" />
<Setter Property="Margin"
Value="{ThemeResource ListViewItemMargin}" />
<Setter Property="HorizontalContentAlignment"
Value="Left" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="OuterContainer"
Background="Transparent"
Margin="0,5,0,5"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform x:Name="ContentScaleTransform" />
</Border.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed"
To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="TiltContainer" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="TiltContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="CheckboxPressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="CheckboxTiltContainer" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
To="{ThemeResource ListViewItemDisabledThemeOpacity}"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="contentPresenter" />
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="SelectedEarmark">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="SelectedGlyph">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="CheckGlyph" />
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedCheckMark" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="CheckGlyph" />
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedCheckMark" />
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedBorder" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable" />
<VisualState x:Name="DataPlaceholder">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PlaceholderTextBlock">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PlaceholderRect">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="MultiSelectStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ListMultiSelect"
GeneratedDuration="0:0:0.15"
To="NoMultiSelect" />
<VisualTransition From="NoMultiSelect"
GeneratedDuration="0:0:0.15"
To="ListMultiSelect" />
</VisualStateGroup.Transitions>
<VisualState x:Name="NoMultiSelect" />
<VisualState x:Name="ListMultiSelect">
<Storyboard></Storyboard>
</VisualState>
<VisualState x:Name="GridMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedBorder" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderModeStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ReorderEnabled"
GeneratedDuration="00:00:00.2"
To="ReorderDisabled" />
</VisualStateGroup.Transitions>
<VisualState x:Name="ReorderEnabled">
<Storyboard>
<DropTargetItemThemeAnimation Storyboard.TargetName="OuterContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="Reorderable">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="ContentScaleTransform">
<LinearDoubleKeyFrame KeyTime="00:00:00.075"
Value="1.05" />
<LinearDoubleKeyFrame KeyTime="00:00:00.2"
Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="ContentScaleTransform">
<LinearDoubleKeyFrame KeyTime="00:00:00.075"
Value="1.05" />
<LinearDoubleKeyFrame KeyTime="00:00:00.2"
Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReorderDisabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"
To="NoReorderHint" />
</VisualStateGroup.Transitions>
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Bottom"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Right"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Top"
ToOffset="0"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Left"
ToOffset="0"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ReorderHintContent"
Background="Transparent">
<Border x:Name="CheckboxTiltContainer"
HorizontalAlignment="Left"
Margin="{ThemeResource ListViewItemMultiselectCheckBoxMargin}"
VerticalAlignment="Top">
<Border x:Name="CheckboxOuterContainer">
<Border.Clip>
<RectangleGeometry Rect="0,0,25.5,25.5" />
</Border.Clip>
<Grid x:Name="CheckboxContainer">
<Grid.RenderTransform>
<TranslateTransform x:Name="CheckboxContainerTranslateTransform"
X="{ThemeResource ListViewItemContentOffsetX}" />
</Grid.RenderTransform>
<Rectangle x:Name="NormalRectangle"
Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"
Height="25.5"
Stroke="{ThemeResource CheckBoxBorderThemeBrush}"
StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
Width="25.5" />
<Path x:Name="CheckGlyph"
Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
FlowDirection="LeftToRight"
HorizontalAlignment="Center"
Height="17"
IsHitTestVisible="False"
Opacity="0"
Stretch="Fill"
StrokeThickness="2.5"
StrokeLineJoin="Round"
VerticalAlignment="Center"
Width="18.5" />
</Grid>
</Border>
</Border>
<Border x:Name="ContentContainer">
<Border x:Name="TiltContainer">
<Border x:Name="ContentBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Border.RenderTransform>
<TranslateTransform x:Name="ContentBorderTranslateTransform" />
</Border.RenderTransform>
<Grid>
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<TextBlock x:Name="PlaceholderTextBlock"
AutomationProperties.AccessibilityView="Raw"
Foreground="{x:Null}"
IsHitTestVisible="False"
Margin="{TemplateBinding Padding}"
Opacity="0"
Text="Xg" />
<Rectangle x:Name="PlaceholderRect"
Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
IsHitTestVisible="False"
Visibility="Collapsed" />
</Grid>
</Border>
</Border>
</Border>
<Border x:Name="SelectedBorder"
BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}"
IsHitTestVisible="False"
Opacity="0">
<Grid x:Name="SelectedCheckMark"
HorizontalAlignment="Right"
Height="34"
Opacity="0"
VerticalAlignment="Top"
Width="34">
<Path x:Name="SelectedEarmark"
Data="M0,0 L40,0 L40,40 z"
Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
Stretch="Fill" />
<Path x:Name="SelectedGlyph"
Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
Fill="{ThemeResource ListViewItemCheckThemeBrush}"
FlowDirection="LeftToRight"
HorizontalAlignment="Right"
Height="14.5"
Margin="0,1,1,0"
Stretch="Fill"
VerticalAlignment="Top"
Width="17" />
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
希望对您有所帮助。
P.S。如果以上代码有帮助，我将不胜感激编辑问题中的批评:)
我正在尝试突出显示 GridView（Windows Phone 8.1 C#/XAML 应用程序）中的选定项。我使用 Blend 提取了 GridViewItemStyle，它包含以下内容：
<Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0">
<Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,1,1,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/>
</Grid>
</Border>
我已经定义了这个 XAML 使用的画笔颜色并暂时将不透明度设置为 1 以便我可以检查它是否应该显示。到目前为止，还不错。
同样式定义中还有一个视觉状态组：
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
但是当一个项目被选中时，它并没有获得视觉指示器。显示指示器的 XAML 显然有效，所以我试图理解为什么视觉状态组无效，特别是因为它直接来自 Blend。
GridView定义如下：
<GridView
AutomationProperties.AutomationId="ItemListViewSection2"
AutomationProperties.Name="Items In Group"
SelectionMode="Single"
IsItemClickEnabled="True"
ItemsSource="{Binding GroupMembers}"
ItemTemplate="{StaticResource Individual80ItemTemplate}"
ItemContainerStyle="{StaticResource GridViewItemStyle1}"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True"
SelectionChanged="itemView_SelectionChanged"
Loaded="itemGridView_Loaded"/>
Update：如果我将 SelectionMode 从 Single 更改为 Multiple，好处是 SelectedEarmark 和 SelectedGlyph 现在会在每个项目被选中时出现......但坏处, 是 SelectedBorder 对所有似乎由另一位 Visual State stuffery 触发的条目可见：
<VisualStateGroup x:Name="MultiSelectStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ListMultiSelect" GeneratedDuration="0:0:0.15" To="NoMultiSelect"/>
<VisualTransition From="NoMultiSelect" GeneratedDuration="0:0:0.15" To="ListMultiSelect"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoMultiSelect"/>
<VisualState x:Name="ListMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CheckboxContainerTranslateTransform"/>
<DoubleAnimation Duration="0" To="{ThemeResource ListViewItemContentTranslateX}" Storyboard.TargetProperty="X" Storyboard.TargetName="ContentBorderTranslateTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="GridMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
我似乎能够解决此问题的唯一方法是从样式中删除这些视觉状态或更改边框 XAML，这样它基本上就不会绘制边框了。 that 的耻辱是我无法使用内置样式；我基本上必须提供自己的风格。我想，经过深思熟虑，这可能不是一件坏事......一旦你掌握了弄清楚项目样式以及设置器等如何工作的窍门
使用 FocusStates 而不是 SelectionStates。
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="PointerFocused">
<Storyboard>
<DoubleAnimation Duration = "0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration = "0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimation Duration = "1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration = "1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
希望这会奏效。如果没有，那么您可以定义自己的自定义状态并在代码隐藏中使用它。
我遇到了同样的问题。请参阅我的问题和答案以供参考。
这是我为获得所需结果而调整的 listviewitem 样式。
<Style x:Key="MyListViewItemStyle"
TargetType="ListViewItem">
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="TabNavigation"
Value="Local" />
<Setter Property="IsHoldingEnabled"
Value="False" />
<Setter Property="Margin"
Value="{ThemeResource ListViewItemMargin}" />
<Setter Property="HorizontalContentAlignment"
Value="Left" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="OuterContainer"
Background="Transparent"
Margin="0,5,0,5"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform x:Name="ContentScaleTransform" />
</Border.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed"
To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="TiltContainer" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="TiltContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="CheckboxPressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="CheckboxTiltContainer" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
To="{ThemeResource ListViewItemDisabledThemeOpacity}"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="contentPresenter" />
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="BorderBrush"
Storyboard.TargetName="SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="SelectedEarmark">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Fill"
Storyboard.TargetName="SelectedGlyph">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="CheckGlyph" />
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedCheckMark" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="CheckGlyph" />
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedCheckMark" />
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedBorder" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable" />
<VisualState x:Name="DataPlaceholder">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PlaceholderTextBlock">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="PlaceholderRect">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="MultiSelectStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ListMultiSelect"
GeneratedDuration="0:0:0.15"
To="NoMultiSelect" />
<VisualTransition From="NoMultiSelect"
GeneratedDuration="0:0:0.15"
To="ListMultiSelect" />
</VisualStateGroup.Transitions>
<VisualState x:Name="NoMultiSelect" />
<VisualState x:Name="ListMultiSelect">
<Storyboard></Storyboard>
</VisualState>
<VisualState x:Name="GridMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="SelectedBorder" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderModeStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ReorderEnabled"
GeneratedDuration="00:00:00.2"
To="ReorderDisabled" />
</VisualStateGroup.Transitions>
<VisualState x:Name="ReorderEnabled">
<Storyboard>
<DropTargetItemThemeAnimation Storyboard.TargetName="OuterContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="Reorderable">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="ContentScaleTransform">
<LinearDoubleKeyFrame KeyTime="00:00:00.075"
Value="1.05" />
<LinearDoubleKeyFrame KeyTime="00:00:00.2"
Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY"
Storyboard.TargetName="ContentScaleTransform">
<LinearDoubleKeyFrame KeyTime="00:00:00.075"
Value="1.05" />
<LinearDoubleKeyFrame KeyTime="00:00:00.2"
Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReorderDisabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"
To="NoReorderHint" />
</VisualStateGroup.Transitions>
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Bottom"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Right"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Top"
ToOffset="0"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Left"
ToOffset="0"
Storyboard.TargetName="ReorderHintContent" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ReorderHintContent"
Background="Transparent">
<Border x:Name="CheckboxTiltContainer"
HorizontalAlignment="Left"
Margin="{ThemeResource ListViewItemMultiselectCheckBoxMargin}"
VerticalAlignment="Top">
<Border x:Name="CheckboxOuterContainer">
<Border.Clip>
<RectangleGeometry Rect="0,0,25.5,25.5" />
</Border.Clip>
<Grid x:Name="CheckboxContainer">
<Grid.RenderTransform>
<TranslateTransform x:Name="CheckboxContainerTranslateTransform"
X="{ThemeResource ListViewItemContentOffsetX}" />
</Grid.RenderTransform>
<Rectangle x:Name="NormalRectangle"
Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"
Height="25.5"
Stroke="{ThemeResource CheckBoxBorderThemeBrush}"
StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
Width="25.5" />
<Path x:Name="CheckGlyph"
Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
FlowDirection="LeftToRight"
HorizontalAlignment="Center"
Height="17"
IsHitTestVisible="False"
Opacity="0"
Stretch="Fill"
StrokeThickness="2.5"
StrokeLineJoin="Round"
VerticalAlignment="Center"
Width="18.5" />
</Grid>
</Border>
</Border>
<Border x:Name="ContentContainer">
<Border x:Name="TiltContainer">
<Border x:Name="ContentBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Border.RenderTransform>
<TranslateTransform x:Name="ContentBorderTranslateTransform" />
</Border.RenderTransform>
<Grid>
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<TextBlock x:Name="PlaceholderTextBlock"
AutomationProperties.AccessibilityView="Raw"
Foreground="{x:Null}"
IsHitTestVisible="False"
Margin="{TemplateBinding Padding}"
Opacity="0"
Text="Xg" />
<Rectangle x:Name="PlaceholderRect"
Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
IsHitTestVisible="False"
Visibility="Collapsed" />
</Grid>
</Border>
</Border>
</Border>
<Border x:Name="SelectedBorder"
BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}"
IsHitTestVisible="False"
Opacity="0">
<Grid x:Name="SelectedCheckMark"
HorizontalAlignment="Right"
Height="34"
Opacity="0"
VerticalAlignment="Top"
Width="34">
<Path x:Name="SelectedEarmark"
Data="M0,0 L40,0 L40,40 z"
Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
Stretch="Fill" />
<Path x:Name="SelectedGlyph"
Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
Fill="{ThemeResource ListViewItemCheckThemeBrush}"
FlowDirection="LeftToRight"
HorizontalAlignment="Right"
Height="14.5"
Margin="0,1,1,0"
Stretch="Fill"
VerticalAlignment="Top"
Width="17" />
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
希望对您有所帮助。
P.S。如果以上代码有帮助，我将不胜感激编辑问题中的批评:)