GridView（ListView）のアイテムを選択した時に凹む動作をやめたい
UWPでGridViewもしくはListViewをただ単にパネルとしてボタンとかのコントロールを置いて使いたいケースがありました。
UWPから標準のGridViewItemはPressed時に押した箇所が凹むアニメーションが勝手に入ります。
それがちょっと用途からして邪魔だったので消しました。
MSDNのページからスタイルをコピーしてきて、、
GridViewItem スタイルとテンプレート - Windows app development
悪さをしそうなStoryboardを消してきます。
根本はこいつですね↓
PointerDownThemeAnimation
ついでにPointerOver時に枠に色が付くのとかも消しました。
こんな感じ↓
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="" 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>
