C# 在WinRT中创建选项卡

我正在为Windows8开发一个C#/XAML Metro风格的应用程序。WinRT中的XAML没有“tab”控件。然而，我正试图模仿Windows8应用商店中的结果。例如，此图像显示“概述”、“详细信息”和“评论”选项卡：

如何创建这些

单选按钮似乎有意义。我想我可以使用GroupName来确保只选择一个项目。但是如果我使用单选按钮，我不知道如何使所选项目看起来深灰色，而使其他选项变成浅灰色。有人能给我看一个不显示小格子的单选按钮的XAML吗？选中时为深灰色，未选中时为浅灰色

---

非常感谢你

设置列表框的样式比设置单选按钮组的样式更可取

下面的代码使用带有水平堆栈面板的列表框来创建选项卡项标题。ContentControl将选项卡内容显示为用户控件

我只用WPF测试过这个，但希望它能在WinRT上工作

<Page.Resources>
    <Style TargetType="ListBoxItem">
        <!-- disable default selection highlight -->
        <!-- Style.Resources is not supported in WinRT -->
        <!--<Style.Resources>
            --><!-- SelectedItem with focus --><!--
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" 
                            Color="Transparent" />
            --><!-- SelectedItem without focus --><!--
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" 
                            Color="Transparent" />
        </Style.Resources>-->
        <!--Setter Property="FocusVisualStyle" is not supported in WinRT -->
        <!--<Setter Property="FocusVisualStyle" Value="{x:Null}" />-->
    </Style>
    <Style x:Key="TitleStyle" TargetType="TextBlock">
        <Setter Property="Foreground" Value="LightGray"/>
        <!--Style.Triggers is not supported in WinRT-->
        <!--<Style.Triggers>
            <DataTrigger Value="True" Binding="{Binding Path=IsSelected, 
                        RelativeSource={RelativeSource Mode=FindAncestor, 
                        AncestorType={x:Type ListBoxItem}}}">
                <Setter Property="Foreground" Value="DarkGray"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </DataTrigger>
        </Style.Triggers>-->
    </Style>
</Page.Resources>
<Grid>
    <Grid.DataContext>
        <ViewModel:TestPage/>
    </Grid.DataContext>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <ListBox x:Name="tabListBox" Grid.Row="0" ItemsSource="{Binding Items}" 
                        SelectedItem="{Binding SelectedItem, Mode=TwoWay}" 
                        BorderBrush="{x:Null}" BorderThickness="0">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Title}" Margin="5" 
                        Style="{StaticResource TitleStyle}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    <ContentControl Grid.Row="1" Content="{Binding SelectedItem.Content}"/>
</Grid>

视图模型

public class MyTabViewModel : INotifyPropertyChanged
{
    public MyTabViewModel()
    {
        Items =
            new List<MyTabItem>
                {
                    new MyTabItem
                        {
                            Title = "Overview",
                            Content = new UserControl1()
                        },
                    new MyTabItem
                        {
                            Title = "Detail",
                            Content = new UserControl2()
                        },
                    new MyTabItem
                        {
                            Title = "Reviews",
                            Content = new UserControl3()
                        },
                };
    }

    public IEnumerable<MyTabItem> Items { get; private set; }

    private MyTabItem _selectedItem;

    public MyTabItem SelectedItem
    {
        get { return _selectedItem; }
        set
        {
            _selectedItem = value;
            PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem"));
        }
    }

    #region Implementation of INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion
}

public class MyTabItem
{
    public string Title { get; set; }
    public UserControl Content { get; set; }
}

公共类MyTabViewModel:INotifyPropertyChanged
{
公共MyTabViewModel（）
{
项目=
新名单
{
新MyTabItem
{
Title=“概述”，
Content=newusercontrol1（）
},
新MyTabItem
{
Title=“详细信息”，
Content=newusercontrol2（）
},
新MyTabItem
{
Title=“评论”，
Content=newusercontrol3（）
},
};
}
公共IEnumerable项{get；private set；}
私有MyTabItem _selectedItem；
公共MyTabItem SelectedItem
{
获取{return\u selectedItem；}
设置
{
_选择editem=值；
PropertyChanged（这是新的PropertyChangedEventArgs（“SelectedItem”）；
}
}
#INotifyPropertyChanged的区域实现
公共事件属性更改事件处理程序属性更改；
#端区
}
公共类MyTabItem
{
公共字符串标题{get；set；}
公共用户控件内容{get；set；}
}

这可能满足您的需要

以下是单选按钮的样式，使其看起来/工作起来像选项卡：

    <!-- 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>

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

---

我也使用了

FlipView

控件，但我创建了一个单独的模板控件，该控件继承自

FlipView

主要思想是覆盖默认的

FlipView

ControlTemplate

：我添加了一个表示选项卡标题的

列表框

，并删除了“下一步”和“上一步”FlipView按钮

---

如果您需要有关我的实现的更多详细信息，我可以共享源代码。

我将您的可视状态调整为与所述的

FlipView

一起使用的

ListView

。这在windows应用商店XAML上不起作用。。。是否有原因/修复？请分享代码。我正试图实现这一点，但找不到方法。@VedankKulshrestha，恐怕我已经没有这个版本的代码了，但我有一个旧的存储库，在那里我试图实现一个可重用的选项卡控件。你可以在这里找到它：

 <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>