我正在开发适用于 Windows 8 的 C#/XAML Metro 风格应用程序。WinRT 中的 XAML 没有“选项卡”控件。但是，我正在尝试模拟 Windows 8 商店中结果的显示方式。例如，此图像显示“概述”、“详细信息”和“评论”选项卡:

我如何创建这些？

RadioButton 似乎很有意义。我想我可以使用 GroupName 来确保只选择一个项目。但是，如果我使用 RadioButton，我不知道如何使所选项目看起来呈深灰色，同时将其他选项设为浅灰色。有人可以向我展示不显示选中的小东西的 RadioButton 的 XAML 吗？选中时为深灰色，未选中时为浅灰色。

非常感谢!

最佳答案

这里是用于使单选按钮看起来/像选项卡一样工作的样式:

    <!-- Style for radio buttons used as tab control -->
<Style x:Key="TabRadioButtonStyle" TargetType="RadioButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="Gray" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Indeterminate">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" />
                                </Storyboard>
                            </VisualState>

                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <TextBlock x:Name="TabButtonText" Text="{TemplateBinding Content}" Style="{StaticResource GroupHeaderTextStyle}" HorizontalAlignment="Left"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后您可以定义一个网格来保存选项卡堆栈面板和一个框架来保存与每个选项卡关联的内容。使用单选按钮上的 Click 事件将框架导航到每个“选项卡”的相应页面。

 <Grid Grid.Row="1"
        Margin="120,0,56,56">
        <!-- Row 1 to hold the "Tabs", Row 2 to hold the content -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal">
            <RadioButton x:Name="Tab1" Content="Tab1" Style="{StaticResource TabRadioButtonStyle}" IsChecked="True" Click="Tab1_Clicked" />
            <RadioButton x:Name="Tab2" Content="Tab2" Style="{StaticResource TabRadioButtonStyle}" IsChecked="False" Click="Tab2_Clicked" Margin="30,0,0,0" />
            <RadioButton x:Name="Tab3" Content="Tab3" Style="{StaticResource TabRadioButtonStyle}" IsChecked="False" Click="Tab3_Clicked" Margin="30,0,0,0"/>
        </StackPanel>
        <Frame x:Name="ContentFrame" Margin="0,20,0,0" Grid.Row="1" Background="{StaticResource SandstormBackgroundBrush}" Loaded="ContentFrame_Loaded" />
    </Grid>

关于c# - 在 WinRT 中创建选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10737117/