页面上的标签栏 - Metro App答案

【问题标题】：Tabbar on a page - Metro App页面上的标签栏 - Metro App
【发布时间】：2012-12-25 03:25:48
【问题描述】：

我想在页面上创建一个标签栏；标签栏由 2 个或更多按钮组成，这些按钮在同一页面上加载不同的内容（表单或表格）。我怎样才能做到这一点？谢谢。

我从 Microsoft Windows 商店应用程序开发部分下载了一些项目示例；其中一些有一个类似的标签栏解决方案。我正在研究代码，但我想在示例或文档方面有一些替代方案。

【问题讨论】：

您能否指出您下载的示例项目，以便我们了解您想要完成/复制的内容？或者你可以发布一个链接来说明你想要完成的事情吗？更多详细信息将帮助我们更好地了解您的目标是什么...选项卡式界面在 Windows 应用商店应用中并不常见，因此您可能还需要考虑另一种方法来实现相同的目标。

【解决方案1】：

我认为这个解决方案是合理的：http://blog.davemdavis.net/2012/10/03/simulating-a-tab-control-in-a-windows-8-application/ 你可能需要调整它。但他为你做了很多工作。

如果是我，我会做更多这样的事情：

<Grid Width="400" Height="500">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Column="0" Fill="SteelBlue" />
    <ListBox x:Name="ItemList" Margin="0,50,0,0"
                xmlns:sys="clr-namespace:System;assembly=mscorlib">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" Margin="10" />
            </DataTemplate>
        </ListBox.ItemTemplate>
        <sys:String>One</sys:String>
        <sys:String>Two</sys:String>
        <sys:String>Three</sys:String>
        <sys:String>Four</sys:String>
        <sys:String>Five</sys:String>
    </ListBox>
    <!-- http://msdn.microsoft.com/en-us/library/ms742554(v=vs.85).aspx -->
    <Rectangle Grid.Column="1" Fill="LightSteelBlue" x:Name="RightArea" />
    <ContentControl Content="{Binding SelectedItem, ElementName=ItemList}" 
            Style="{StaticResource ContentControlStyle2}" Grid.Column="1">
        <ContentControl.ContentTemplate>
            <DataTemplate>
                <Grid Width="300" Height="500">
                    <TextBlock Text="{Binding}" Margin="40" 
                        FontSize="50" Foreground="Black" />
                </Grid>
            </DataTemplate>
        </ContentControl.ContentTemplate>
    </ContentControl>
</Grid>

看起来像这样：

祝你好运！

【讨论】：