WP8.1 XAML - 如何在选中时显示GridView项目?

时间:2016-03-22 16:18:41

标签: windows-phone-8.1 winrt-xaml

我正在尝试将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"/>

更新:如果我将SelectionMode从Single更改为Multiple,那么好的是现在每个项目都被选中时会出现SelectedEarmark和SelectedGlyph ...但是,不好的是,SelectedBorder对于所有似乎由另一个视觉状态填充物触发的条目可见:

<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,因此它基本上不会绘制边框。 的耻辱是我无法使用内置风格;我基本上要提供自己的风格。我想,经过反思,这可能不是一件坏事......一旦你弄清楚项目风格如何运作,以及设置者等等。

2 个答案:

答案 0 :(得分:1)

使用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>

希望这会奏效。如果没有,那么您可以定义自己的自定义状态并在后面的代码中使用它。

我遇到了同样的问题。请参阅我的问题和答案以供参考。 Custom Selection States

答案 1 :(得分:1)

这是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。如果以上代码有帮助,我会感谢编辑问题中的批评:)

相关问题