「WindowsストアアプリでGridViewのアイテムごとに押されたエフェクトアニメーションを実行しないようにする」で使っているXAML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Page | |
x:Name="pageRoot" | |
x:Class="NoPushSample.GroupedItemsPage" | |
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" | |
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | |
xmlns:local="using:NoPushSample" | |
xmlns:data="using:NoPushSample.Data" | |
xmlns:common="using:NoPushSample.Common" | |
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | |
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | |
mc:Ignorable="d"> | |
<Page.Resources> | |
<x:String x:Key="ChevronGlyph"></x:String> | |
<!-- | |
このページで表示されるグループ化されたアイテムのコレクションは、グループ内のアイテムを | |
仮想化できないため、完全なアイテム リストのサブセットにバインドされます | |
--> | |
<CollectionViewSource | |
x:Name="groupedItemsViewSource" | |
Source="{Binding Groups}" | |
IsSourceGrouped="true" | |
ItemsPath="Items" | |
d:Source="{Binding Groups, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/> | |
<DataTemplate x:Key="GridViewHeaderTemplate"> | |
<Grid Margin="0,0,0,2"> | |
<Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}" | |
AutomationProperties.Name="Group Title" | |
Click="Header_Click" | |
Style="{StaticResource TextBlockButtonStyle}" > | |
<StackPanel Orientation="Horizontal"> | |
<TextBlock Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" /> | |
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" /> | |
</StackPanel> | |
</Button> | |
</Grid> | |
</DataTemplate> | |
<DataTemplate x:Key="GridViewItemTemplate"> | |
<Grid HorizontalAlignment="Left" Width="250" Height="250"> | |
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"> | |
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/> | |
</Border> | |
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}"> | |
<TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/> | |
<TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> | |
</StackPanel> | |
</Grid> | |
</DataTemplate> | |
<!-- GridViewアイテムを押したした時にアニメーションさせないスタイル --> | |
<Style x:Key="NoSwipeAnimationGridViewItemStyle" TargetType="GridViewItem"> | |
<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="True"/> | |
<Setter Property="Margin" Value="0,0,2,2"/> | |
<Setter Property="Padding" Value="4"/> | |
<Setter Property="Template"> | |
<Setter.Value> | |
<ControlTemplate TargetType="GridViewItem"> | |
<Border Padding="{TemplateBinding Padding}"> | |
<ContentPresenter /> | |
</Border> | |
</ControlTemplate> | |
</Setter.Value> | |
</Setter> | |
</Style> | |
<!-- GridViewアイテムを押したした時にアニメーションさせる普通のスタイル --> | |
<Style x:Key="GridViewItemStyle" TargetType="GridViewItem"> | |
<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="True"/> | |
<Setter Property="Margin" Value="0,0,2,2"/> | |
<Setter Property="Template"> | |
<Setter.Value> | |
<ControlTemplate TargetType="GridViewItem"> | |
<GridViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" | |
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" | |
ContentMargin="4" ContentTransitions="{TemplateBinding ContentTransitions}" | |
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" | |
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" | |
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" | |
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" | |
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" | |
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" | |
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" | |
Padding="{TemplateBinding Padding}" PointerOverBackgroundMargin="1" | |
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" | |
PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" | |
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" | |
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" | |
SelectionCheckMarkVisualEnabled="True" | |
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" | |
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" | |
SelectedBorderThickness="{ThemeResource GridViewItemCompactSelectedBorderThemeThickness}" | |
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" | |
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> | |
</ControlTemplate> | |
</Setter.Value> | |
</Setter> | |
</Style> | |
<!-- GridViewアイテムを押したした時にアニメーションさせる普通のスタイル --> | |
<local:GridViewItemContainerStyleSelector x:Key="itemContainerStyleSelector" | |
OddStyle="{StaticResource GridViewItemStyle}" | |
EvenStyle="{StaticResource NoSwipeAnimationGridViewItemStyle}"/> | |
</Page.Resources> | |
<!-- | |
このグリッドは 2 つの行を定義するページのルート パネルとして機能します: | |
* 行 0 には [戻る] ボタンおよびページ タイトルが含まれます | |
* 行 1 には残りのページ レイアウトが含まれます | |
--> | |
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> | |
<Grid.ChildrenTransitions> | |
<TransitionCollection> | |
<EntranceThemeTransition/> | |
</TransitionCollection> | |
</Grid.ChildrenTransitions> | |
<Grid.RowDefinitions> | |
<RowDefinition Height="140"/> | |
<RowDefinition Height="*"/> | |
</Grid.RowDefinitions> | |
<!-- 水平スクロール グリッド --> | |
<GridView | |
x:Name="itemGridView" | |
AutomationProperties.AutomationId="ItemGridView" | |
AutomationProperties.Name="Grouped Items" | |
Grid.RowSpan="2" | |
Padding="116,137,40,46" | |
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" | |
SelectionMode="None" | |
IsSwipeEnabled="false" | |
IsItemClickEnabled="True" | |
ItemClick="ItemView_ItemClick" | |
ItemTemplate="{StaticResource GridViewItemTemplate}" | |
ItemContainerStyleSelector="{StaticResource itemContainerStyleSelector}" > | |
<GridView.ItemsPanel> | |
<ItemsPanelTemplate> | |
<ItemsWrapGrid GroupPadding="0,0,70,0"/> | |
</ItemsPanelTemplate> | |
</GridView.ItemsPanel> | |
<GridView.GroupStyle> | |
<GroupStyle HeaderTemplate="{StaticResource GridViewHeaderTemplate}" /> | |
</GridView.GroupStyle> | |
</GridView> | |
<!-- [戻る] ボタンおよびページ タイトル--> | |
<Grid> | |
<Grid.ColumnDefinitions> | |
<ColumnDefinition Width="120"/> | |
<ColumnDefinition Width="*"/> | |
</Grid.ColumnDefinitions> | |
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}" | |
Style="{StaticResource NavigationBackButtonNormalStyle}" | |
VerticalAlignment="Top" | |
AutomationProperties.Name="Back" | |
AutomationProperties.AutomationId="BackButton" | |
AutomationProperties.ItemType="Navigation Button"/> | |
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" | |
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/> | |
</Grid> | |
</Grid> | |
</Page> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment