Question

我认为这个问题说明了一切：我想构建一个Windows 8商店应用，但我如何构建这样的用户界面：

enter image description here

我认为左边是一个普通的ListView。重要的是我想为每个ListViewEntry创建一个自己的AppBar。如何在正确的内容区域中加载不同的页面（使用不同的AppBars）？

Answer 1

您可以在主面板中放置ContentControl，在AppBar中放置另一个属性，然后将他们的Content属性绑定到左侧SelectedItem的{{1}}属性并使用ListBox显示所选页面的正确用户界面。

*编辑 - 样本

<强> XAML

ContentTemplateSelector

<强> C＃

<Page
    x:Class="App17.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App17"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <local:PropertyPageTemplateSelector
            x:Key="PropertyPageTemplateSelector"/>
    </Page.Resources>
    <Grid
        Background="LemonChiffon">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition
                Width="2*" />
        </Grid.ColumnDefinitions>
        <ListBox
            x:Name="listBox"
            DisplayMemberPath="Label"/>
        <ContentControl
            Grid.Column="1"
            Content="{Binding SelectedItem, ElementName=listBox}"
            ContentTemplateSelector="{StaticResource PropertyPageTemplateSelector}">
            <ContentControl.Resources>
                <DataTemplate
                    x:Key="Options">
                    <StackPanel>
                        <TextBlock
                            Text="{Binding Label}"
                            FontSize="32"
                            Foreground="SlateGray" />
                        <Rectangle
                            Width="400"
                            Height="400"
                            Fill="Aquamarine" />
                    </StackPanel>
                </DataTemplate>
                <DataTemplate
                    x:Key="Preferences">
                    <StackPanel>
                        <TextBlock
                            Text="{Binding Label}"
                            FontSize="32"
                            Foreground="SlateGray" />
                        <Rectangle
                            Width="400"
                            Height="400"
                            Fill="Khaki" />
                    </StackPanel>
                </DataTemplate>
                <DataTemplate
                    x:Key="Properties">
                    <StackPanel>
                        <TextBlock
                            Text="{Binding Label}"
                            FontSize="32"
                            Foreground="SlateGray" />
                        <Rectangle
                            Width="400"
                            Height="400"
                            Fill="LawnGreen" />
                    </StackPanel>
                </DataTemplate>
                <DataTemplate
                    x:Key="Settings">
                    <StackPanel>
                        <TextBlock
                            Text="{Binding Label}"
                            FontSize="32"
                            Foreground="SlateGray" />
                        <Rectangle
                            Width="400"
                            Height="400"
                            Fill="Violet" />
                    </StackPanel>
                </DataTemplate>
            </ContentControl.Resources>
        </ContentControl>
    </Grid>
</Page>

构建类似选项菜单的UI

1 个答案: