user-interface - 构建类似选项菜单的 UI

Question

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

我认为left是一个普通的ListView。重要的是我希望每个 ListViewEntry 都有一个自己的 AppBar。以及如何在正确的内容区域加载不同的页面（使用不同的 AppBar）？

Answer 1

您可以将一个ContentControl放在主面板中，另一个放在 AppBar 中，然后将它们的Content属性绑定到左侧的SelectedItem属性并用于显示所选页面的右侧 UI。ListBoxContentTemplateSelector

*编辑 - 样本

XAML

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

C＃

using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App17
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            listBox.ItemsSource =
                new List<PropertyPageViewModel>(
                    new PropertyPageViewModel[]
                    {
                        new OptionsPropertyPageViewModel(), 
                        new PreferencesPropertyPageViewModel(), 
                        new PropertiesPropertyPageViewModel(), 
                        new SettingsPropertyPageViewModel(), 
                    });
        }
    }

    public abstract class PropertyPageViewModel
    {
        public abstract string Label { get; }
    }

    public class OptionsPropertyPageViewModel : PropertyPageViewModel
    {
        public override string Label { get { return "Options"; } }
    }

    public class PreferencesPropertyPageViewModel : PropertyPageViewModel
    {
        public override string Label { get { return "Preferences"; } }
    }

    public class PropertiesPropertyPageViewModel : PropertyPageViewModel
    {
        public override string Label { get { return "Properties"; } }
    }

    public class SettingsPropertyPageViewModel : PropertyPageViewModel
    {
        public override string Label { get { return "Settings"; } }
    }

    public class PropertyPageTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            if (item == null) return base.SelectTemplateCore(item, container);

            var contentControl = (ContentControl)container;
            var viewModel = (PropertyPageViewModel)item;
            var templateKey = viewModel.Label;

            return (DataTemplate)contentControl.Resources[templateKey];
        }
    }
}