GridView 的 ItemContainerStyle 和选择状态答案

【问题标题】：GridView's ItemContainerStyle and selection statesGridView 的 ItemContainerStyle 和选择状态
【发布时间】：2014-05-28 07:30:37
【问题描述】：

我正在尝试更改 gridview 项目被选中时的外观。（之前，我在绑定到包含网格的 ViewModel 对象中使用了一个带有 IsSelected 属性的技巧和一个 bool-to-color 转换器，但我认识到它很糟糕）

为此，我这样做：

    <GridView ItemContainerStyle="{StaticResource GridViewItemContainerStyle}" ...> ...

和

    <Style x:Key="GridViewItemContainerStyle" TargetType="GridViewItem">
        <Setter Property="Background" Value="Red" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background)" Storyboard.TargetName="itemGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Black"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="UnselectedSwiping"/>
                                <VisualState x:Name="UnselectedPointerOver"/>
                                <VisualState x:Name="Selecting"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background)" Storyboard.TargetName="itemGrid">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedSwiping"/>
                                <VisualState x:Name="Unselecting"/>
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="SelectedUnfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Grid ... x:Name="itemGrid">
                              <!-- HERE MY DATA TEMPLATE -->
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

当我运行应用程序时，这些项目是黑色的（就像在“正常”状态下一样）。但是选择它们并不会将它们变成白色。我哪里错了？

此外，还有一种方法可以设置“ItemContainerStyle”，而无需“覆盖”“ItemTemplate”???

【问题讨论】：

标签： xaml windows-runtime winrt-xaml windows-8.1

【解决方案1】：

您的 DataTemplate 应该位于页面 XAML 中 GridView 元素的 ItemTemplate 属性内。创建一个单独的 XAML 文件 (ResourceDictionary)，例如 CustomStyles.xaml。像这样在 App.xaml 中引用它：

    <Application.Resources>
    <!-- Application-specific resources -->
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="PathToCustomStyles.xaml" />             
        </ResourceDictionary.MergedDictionaries>          
    </ResourceDictionary>
</Application.Resources>

您可以在 MSDN 上的 Default style 部分（第二个，更长的 XAML）下找到 GridViewItem (http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709915.aspx) 的默认模板。

复制并粘贴到 CustomStyles.xaml。只需给它一些键，例如：

<Style TargetType="GridViewItem" x:Key="CustomGridViewItemStyleWithWhiteSelectionBackground">...

如您所见，Selected 视觉状态改变了三个目标的不透明度，SelectionBackground、SelectedBorder 和 SelectedCheckMark。因此，这些元素在 Normal 状态下不可见，因为它们的不透明度为零。在下面找到这三个元素，并根据需要更改它们的属性。对于背景，更改 SelectionBackground 矩形的 Fill 属性：

<Rectangle x:Name="SelectionBackground"
    Margin="4"
    Fill="White"
    Opacity="0" />

现在，当发生选择时，此元素的不透明度将更改为1，因为您将其设置为白色时，所选项目的背景将是白色的。并且不要忘记在 GridView 的定义中引用这种样式：

<GridView ItemContainerStyle="{StaticResource CustomGridViewItemStyleWithWhiteSelectionBackground}" ...>
    <GridView.ItemTemplate>
    <DataTemplate>
    ...define your template here...
    </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

编辑：

这是扩展的样式 XAML，可能更适合一些更复杂的样式更改。如果你只想改变背景，你应该从上面 Default style 部分下的那个 MSDN 链接中获取第一个样式，然后编辑它（并给它一些样式键，这样你就不会覆盖默认的）：

SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"

【讨论】：