c# と XAML を使用して Windows 8 メトロ アプリケーションを開発しています。グループ化されたアイテムのページを作成し、各グループの前にボタンのリストを繰り返しました。問題は、彼が私を連れて行くページを変更するために、彼が属するグループに応じて各ボタンを参照する必要があることです。これが私のページのスナップショットです：
コードでソーシャル メディア アイコンを参照する必要があります (facebook、google+ など)。コードは次のとおりです。
<Page.BottomAppBar>
<AppBar Height="Auto" Width="1366">
<Grid>
<StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right" Margin="0,0,30,0">
<Button x:Name="Home" Style="{StaticResource HomeAppBarButtonStyle}" Tag="Help" Click="Home_Click"/>
<Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refresh"/>
<Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Home"/>
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
<Page.TopAppBar>
<AppBar Height="100">
<Grid>
<Image x:Name="Content_Hub" Height="80" Width="80" Source="Assets/ACE-App-Bar-Content-Hub.png" Margin="45,10,0,10" Tapped="Content_Hub_Click" HorizontalAlignment="Left"/>
<Image x:Name="Market_Research" Height="80" Width="80" Source="Assets/ACE-App-Bar-Market-Research.png" Margin="160,10,0,10" Tapped="MARKET_RESEARCH_Click" HorizontalAlignment="Left"/>
<Image x:Name="LEAD_CONVERSION" Height="80" Width="80" Source="Assets/ACE-App-Bar-Lead-Conversions.png" Margin="275,10,0,10" HorizontalAlignment="Left"/>
<StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>
</AppBar>
</Page.TopAppBar>
<UserControl.Resources>
<Style x:Key="GroupItemStyle1" TargetType="GroupItem">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="431*"/>
<ColumnDefinition Width="429*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0" Grid.Column="1"/>
<ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once" Grid.Column="1">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
</ItemsControl>
<Image x:Name="Facebook" Height="30" Width="30" Source="Assets/Socia-Media/ACE-App-Social-Media-Tiles-Facebook.jpg" Tapped="Content_Hub_Click" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Margin="0,4,0,0"/>
<Image x:Name="Twitter" Height="30" Width="30" Source="Assets/Socia-Media/ACE-App-Social-Media-Tiles-Twitter.jpg" Tapped="Content_Hub_Click" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Margin="0,44,0,0"/>
<Image x:Name="LinkIn" Height="30" Width="30" Source="Assets/Socia-Media/ACE-App-Social-Media-Tiles-Linkedin.jpg" Tapped="MARKET_RESEARCH_Click" HorizontalAlignment="left" Grid.Row="1" VerticalAlignment="Top" Margin="0,84,0,0"/>
<Image x:Name="RSS" Height="30" Width="30" Source="Assets/Socia-Media/ACE-App-Social-Media-Tiles-RSS.jpg" HorizontalAlignment="left" Grid.Row="1" VerticalAlignment="Top" Margin="0,124,0,0"/>
<Image x:Name="Google" Height="30" Width="30" Source="Assets/Socia-Media/ACE-App-Social-Media-Tiles-Google.jpg" HorizontalAlignment="left" Grid.Row="1" VerticalAlignment="Top" Margin="0,164,0,0"/>
<Image x:Name="Youtube" Height="30" Width="30" Source="Assets/Socia-Media/ACE-App-Social-Media-Tiles-Youtube.jpg" HorizontalAlignment="left" Grid.Row="1" VerticalAlignment="Top" Margin="0,204,0,0"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="TopItems"
d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:DataSource, IsDesignTimeCreatable=True}}"/>
<DataTemplate x:Key="CustomTileItem">
<Grid>
<Grid HorizontalAlignment="Left">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<VariableSizedWrapGrid>
<Image Source="{Binding Path=Image}" Stretch="UniformToFill" />
</VariableSizedWrapGrid>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" FontFamily="Seguo" FontSize="12" TextWrapping="Wrap" Height="30" Margin="10,3,10,0" VerticalAlignment="top"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</UserControl.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout -->
<Grid Background="WhiteSmoke">
<ProgressBar x:Name="pbProgress" IsIndeterminate="True" VerticalAlignment="Top" Value="100"/>
<Grid Style="{StaticResource LayoutRootStyle}" Margin="0,10,0,0" x:Name="itemGrid">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=Pageroot}" Style="{StaticResource BackButtonStyle}" Margin="36,0,0,36" Grid.Row="0"/>
<StackPanel x:Name="Header" Grid.Row="0" Grid.Column="1" >
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Left" Height="Auto" Margin="35,30,0,0" VerticalAlignment="Top" Width="202" Source="Assets/ACE-Logo.png"></Image>
</StackPanel>
</StackPanel>
</Grid>
<!-- Horizontal scrolling grid used in most view states -->
<SemanticZoom Name="Zoom" Grid.Row="1">
<SemanticZoom.ZoomedInView>
<local:HubItems
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.Row="1"
Margin="0,-3,0,0"
Padding="116,0,40,20"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource CustomTileItem}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick" >
<local:HubItems.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</local:HubItems.ItemsPanel>
<local:HubItems.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupItemStyle1}">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="-30,0,0,6" x:Name="HeaderGrid">
<Button AutomationProperties.Name="Group Title" Content="{Binding Title}" Style="{StaticResource TextButtonStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemWidth="75" ItemHeight="150" Orientation="Vertical" Margin="0,0,80,0" MaximumRowsOrColumns="3"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</local:HubItems.GroupStyle>
</local:HubItems>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView x:Name="ZoomedOutGV" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="50,0,0,0" Width="1336" Height="500">
<GridView.ItemTemplate>
<DataTemplate>
<GridView SelectionMode="None">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
<TextBlock Text="{Binding Group.Title}" Width="Auto" Height="Auto" Foreground="Black" HorizontalAlignment="Center" Padding="25,20,25,20" FontWeight="Bold"/>
</Border>
</GridView>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
</StackPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
<!-- Vertical scrolling list only used when snapped -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemListView"
AutomationProperties.Name="Grouped Items"
Visibility="Collapsed"
Margin="0,135,0,0"
Padding="10,0,0,60"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick" Grid.RowSpan="2">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="7,7,0,0">
<Button
AutomationProperties.Name="Group Title"
Content="{Binding Title}"
Style="{StaticResource TextButtonStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding">
<DiscreteObjectKeyFrame KeyTime="0" Value="96,0,10,56"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!--
The back button and title have different styles when snapped, and the list representation is substituted
for the grid displayed in all other view states
-->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
<Image HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>
<Image HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>
</Grid>