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

Question

我正在开发一个 Windows 8.1 通用应用程序（使用 VS2013），我想在GridView. 搜索后，我发现无法创建标签，所以我需要一些解决方案，我可以创建至少看起来像标签的东西。

这是我需要的：

我有图像作为标签页眉。当我单击每个图像（如Appbar图标）时，不同的图像StackPanel应该出现在同一个网格上。

这就是我需要我的应用程序的样子：

Answer 1

在手机上，考虑使用 Pivot 控件。在桌面上，在您升级到 Windows 10 UWP 应用程序（存在 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。

查看代码。诀窍在于视觉状态。您可以更新它们以做任何您想做的事情，包括更新多个控件。随便你想要什么。

看起来像这样：

祝你好运！