c# - 如何使用 c# 和 Xaml 引用在 Windows 8 应用程序中的每个组之前重复的相同按钮？

Question

我正在使用 C# 和 XAML 开发 Windows 8 Metro 应用程序。我做了分组项目页面，并且在每个组之前都有一个重复的按钮列表。问题是我需要根据他所属的组来引用每个按钮，以便更改他将带我去的页面。这是我的页面的快照:

我需要在我的代码中引用社交媒体图标(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>

Answer 1

我这样做的一种方法是将所有按钮绑定(bind)到同一个命令，然后设置 command parameter到您上下文中的某些可识别部分。您可以只对命令参数执行一组 ifs 以确定要做什么。