user-interface - オプション メニューのような UI を構築する

Question

Windows 8 ストア アプリを作成したいのですが、次のような UI を作成するにはどうすればよいですか。

left は通常の ListView だと思います。重要なことは、ListViewEntry ごとに独自の AppBar が必要だということです。また、適切なコンテンツ領域に異なるページ (異なる AppBars を含む) をロードするにはどうすればよいですか?

Answer 1

メイン パネルに を配置ContentControlし、AppBar に別の を配置して、それらContentのプロパティを左側の のプロパティにバインドし、選択したページの右側の UI を表示するために使用SelectedItemできます。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];
        }
    }
}