Windows系のあれこれ

港区の SIer で よくわからんことをしている SE みたいな人です。Xamarin 中心です。

GridView(ListView)のアイテムを選択した時に凹む動作をやめたい

UWPでGridViewもしくはListViewをただ単にパネルとしてボタンとかのコントロールを置いて使いたいケースがありました。

UWPから標準のGridViewItemはPressed時に押した箇所が凹むアニメーションが勝手に入ります。
それがちょっと用途からして邪魔だったので消しました。


MSDNのページからスタイルをコピーしてきて、、
GridViewItem スタイルとテンプレート - Windows app development

悪さをしそうなStoryboardを消してきます。
根本はこいつですね↓
PointerDownThemeAnimation

ついでにPointerOver時に枠に色が付くのとかも消しました。

こんな感じ↓
f:id:ShunsukeKawai:20160328203940g:plain

XAML

一応アイテムクリックが動くのか、アイテムの中のボタンは動くのかの確認用のイベント入れてます。

        <GridView IsItemClickEnabled="True" ItemClick="GridView_ItemClick">
            <!--動くGridViewItem-->
            <GridViewItem>
                <StackPanel Width="300" Height="300">
                    <StackPanel.Background>
                        <ImageBrush Stretch="Fill" ImageSource="Assets/saru.PNG"/>
                    </StackPanel.Background>
                    <TextBlock FontSize="30" Text="動くGridViewItem" />
                    <Button Click="Button_Click" Content="テストボタン" />
                </StackPanel>
            </GridViewItem>
            <!--動かないGridViewItem-->
            <GridViewItem Style="{StaticResource DisableEffectGridViewItemStyle}">
                <StackPanel Width="300" Height="300">
                    <StackPanel.Background>
                        <ImageBrush Stretch="Fill" ImageSource="Assets/saru.PNG"/>
                    </StackPanel.Background>
                    <TextBlock FontSize="30" Text="動かないGridViewItem" />
                    <Button Click="Button_Click" Content="テストボタン" />
                </StackPanel>
            </GridViewItem>
        </GridView>
Style
        <Style x:Key="DisableEffectGridViewItemStyle" TargetType="GridViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
            <Setter Property="TabNavigation" Value="Local" />
            <Setter Property="IsHoldingEnabled" Value="True" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Margin" Value="0,0,4,4" />
            <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}" />
            <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GridViewItem">
                        <Grid x:Name="ContentBorder"
                              Background="{TemplateBinding Background}"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver" />
                                    <VisualState x:Name="Pressed" />
                                    <VisualState x:Name="Selected" />
                                    <VisualState x:Name="PointerOverSelected" />
                                    <VisualState x:Name="PressedSelected" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             Storyboard.TargetName="ContentBorder"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             Storyboard.TargetName="FocusVisualWhite"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1" />
                                            <DoubleAnimation Duration="0"
                                                             Storyboard.TargetName="FocusVisualBlack"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="MultiSelectStates">
                                    <VisualState x:Name="MultiSelectDisabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0.333" Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <FadeOutThemeAnimation TargetName="MultiSelectSquare" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MultiSelectEnabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <FadeInThemeAnimation TargetName="MultiSelectSquare" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DataVirtualizationStates">
                                    <VisualState x:Name="DataAvailable" />
                                    <VisualState x:Name="DataPlaceholder">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ReorderHintStates">
                                    <VisualState x:Name="NoReorderHint" />
                                    <VisualState x:Name="BottomReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation Direction="Bottom"
                                                                    ToOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                                                                    TargetName="ContentBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="TopReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation Direction="Top"
                                                                    ToOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                                                                    TargetName="ContentBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="RightReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation Direction="Right"
                                                                    ToOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                                                                    TargetName="ContentBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="LeftReorderHint">
                                        <Storyboard>
                                            <DragOverThemeAnimation Direction="Left"
                                                                    ToOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                                                                    TargetName="ContentBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.2" To="NoReorderHint" />
                                    </VisualStateGroup.Transitions>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DragStates">
                                    <VisualState x:Name="NotDragging" />
                                    <VisualState x:Name="Dragging">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             Storyboard.TargetName="ContentBorder"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                            <DragItemThemeAnimation TargetName="ContentBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="DraggingTarget">
                                        <Storyboard>
                                            <DropTargetItemThemeAnimation TargetName="ContentBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MultipleDraggingPrimary">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             Storyboard.TargetName="MultiArrangeOverlayBackground"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1" />
                                            <DoubleAnimation Duration="0"
                                                             Storyboard.TargetName="MultiArrangeOverlayText"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="1" />
                                            <DoubleAnimation Duration="0"
                                                             Storyboard.TargetName="ContentBorder"
                                                             Storyboard.TargetProperty="Opacity"
                                                             To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                            <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
                                            <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
                                            <DragItemThemeAnimation TargetName="ContentBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MultipleDraggingSecondary">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ContentBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="DraggedPlaceholder">
                                        <Storyboard>
                                            <FadeOutThemeAnimation TargetName="ContentBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.2" To="NotDragging" />
                                    </VisualStateGroup.Transitions>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="ContentPresenter"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}" />
                            <TextBlock x:Name="PlaceholderTextBlock"
                                       Margin="{TemplateBinding Padding}"
                                       AutomationProperties.AccessibilityView="Raw"
                                       Foreground="{x:Null}"
                                       IsHitTestVisible="False"
                                       Text="Xg"
                                       Visibility="Collapsed" />
                            <Rectangle x:Name="PlaceholderRect"
                                       Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                                       Visibility="Collapsed" />
                            <Rectangle x:Name="MultiArrangeOverlayBackground"
                                       Grid.ColumnSpan="2"
                                       Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                                       IsHitTestVisible="False"
                                       Opacity="0" />
                            <Rectangle x:Name="BorderRectangle"
                                       IsHitTestVisible="False"
                                       Opacity="0"
                                       Stroke="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                                       StrokeThickness="2" />
                            <Border x:Name="MultiSelectSquare"
                                    Width="20"
                                    Height="20"
                                    Margin="0,2,2,0"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
                                    Visibility="Collapsed">
                                <FontIcon x:Name="MultiSelectCheck"
                                          FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                          FontSize="16"
                                          Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                                          Glyph="&#xE73E;"
                                          Opacity="0" />
                            </Border>
                            <Rectangle x:Name="FocusVisualWhite"
                                       IsHitTestVisible="False"
                                       Opacity="0"
                                       Stroke="{ThemeResource SystemControlForegroundAltHighBrush}"
                                       StrokeDashArray="1.0, 1.0"
                                       StrokeDashOffset="1.5"
                                       StrokeEndLineCap="Square"
                                       StrokeThickness="2" />
                            <Rectangle x:Name="FocusVisualBlack"
                                       IsHitTestVisible="False"
                                       Opacity="0"
                                       Stroke="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                       StrokeDashArray="1.0, 1.0"
                                       StrokeDashOffset="0.5"
                                       StrokeEndLineCap="Square"
                                       StrokeThickness="2" />
                            <TextBlock x:Name="MultiArrangeOverlayText"
                                       Grid.ColumnSpan="2"
                                       Margin="18,9,0,0"
                                       AutomationProperties.AccessibilityView="Raw"
                                       FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                       FontSize="26.667"
                                       Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                                       IsHitTestVisible="False"
                                       Opacity="0"
                                       Text="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                      Path=TemplateSettings.DragItemsCount}"
                                       TextTrimming="WordEllipsis"
                                       TextWrapping="Wrap" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>