Tabs 在Windows 8.1通用应用程序中创建选项卡

我正在开发一个Windows 8.1通用应用程序（使用VS2013），我想在

GridView

中创建选项卡。搜索后，我发现无法创建选项卡，因此我需要一些解决方案，以便创建至少看起来像选项卡的内容

我需要的是：

我将图像作为选项卡标题。当我单击每个图像（如

Appbar

图标）时，不同的

StackPanel

应显示在同一网格上

这就是我需要我的应用程序的外观：

---

> P>电话，考虑使用枢纽控制。在桌面上，在升级到Windows10UWP应用程序之前，并没有这样的控制——Pivot就在这里

否则，请尝试以下操作：

<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Interactivity:Interaction.Behaviors>
        <Core:EventTriggerBehavior EventName="Loaded">
            <Core:GoToStateAction StateName="Tab1State"/>
        </Core:EventTriggerBehavior>
    </Interactivity:Interaction.Behaviors>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabVisualStateGroup">
            <VisualState x:Name="Tab1State">
                <VisualState.Setters>
                    <Setter Target="Tab1Button.(ToggleButton.IsChecked)" Value="True"/>
                    <Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab1Content}"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Tab2State">
                <VisualState.Setters>
                    <Setter Target="Tab2Button.(ToggleButton.IsChecked)" Value="True"/>
                    <Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab2Content}"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Tab3State">
                <VisualState.Setters>
                    <Setter Target="Tab3Button.(ToggleButton.IsChecked)" Value="True"/>
                    <Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab3Content}"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Orientation="Horizontal">

        <!-- re-template radiobuttons as togglebuttons -->
        <StackPanel.Resources>
            <Style TargetType="RadioButton">
                <Setter Property="MinWidth" Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="RadioButton">
                            <ToggleButton IsChecked="{Binding IsChecked, 
                                RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
                                <ContentPresenter />
                            </ToggleButton>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>

        <RadioButton GroupName="TabButtons" x:Name="Tab1Button">
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="Checked">
                    <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="16" Height="16" Fill="Red" />
                <TextBlock Margin="4,0" Text="Tab 1" />
            </StackPanel>
        </RadioButton>

        <RadioButton GroupName="TabButtons" x:Name="Tab2Button">
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="Checked">
                    <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="16" Height="16" Fill="Green" />
                <TextBlock Margin="4,0" Text="Tab2" />
            </StackPanel>
        </RadioButton>

        <RadioButton GroupName="TabButtons" x:Name="Tab3Button">
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="Checked">
                    <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="16" Height="16" Fill="Blue" />
                <TextBlock Margin="4,0" Text="Tab3" />
            </StackPanel>
        </RadioButton>

    </StackPanel>

    <FlipView x:Name="TabContent" Grid.Row="1">

        <!-- if the user changes the item through the flipview -->
        <Interactivity:Interaction.Behaviors>
            <Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab1Content}">
                <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
            </Core:DataTriggerBehavior>
            <Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab2Content}">
                <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
            </Core:DataTriggerBehavior>
            <Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab3Content}">
                <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
            </Core:DataTriggerBehavior>
        </Interactivity:Interaction.Behaviors>

        <Grid Background="Red" x:Name="Tab1Content">
            <!-- content -->
        </Grid>

        <Grid Background="Green" x:Name="Tab2Content">
            <!-- content -->
        </Grid>

        <Grid Background="Blue" x:Name="Tab3Content">
            <!-- content -->
        </Grid>

    </FlipView>


</Grid>

确保您引用了XAML行为SDK

检查代码。诀窍在于视觉状态。您可以更新这些控件以执行任何您想要的操作，包括更新多个控件。你需要什么都行

看起来像这样：

---

祝你好运

看看轮毂控制@肯塔基州感谢您的链接，但我不知道如何通过中心获得选项卡枢轴，因为我不需要导航。我已经编辑了我的问题，请查看图片链接。这里是一个链接，指向如何可以模拟tabs@KenTucker谢谢，非常有用的链接@肯塔基州这为梅工作不能使用此代码不幸。我无法为“VisualState”使用

Setters

属性。我不确定原因@杰瑞尼克松非常抱歉，萨曼维萨雷斯。在这里，我为Windows8创建了一个解决方案，并使用Windows10XAML语法。很抱歉。您可以使用故事板更新Setter语法。或者只是复制这个想法。没有问题，是的，我使用了这个想法并得到了结果。再次感谢你，杰里尼克松