アプリのパフォーマンスを分析するには

Frame

Windows8.1の設定のような、左側にリスト化された項目があり、項目をクリックすると右側のPageが切り替わるようなUIは、Page内にさらにFrameを置くことで実現できます。
ストアアプリは、ルートフレームとよばれるFrameインスタンスが一番下のレイヤにあり、そこにPageをNavigateすることでページ遷移をすることができます。
だからFrame.Navigate(typeof(Page))でページ遷移が可能となっています。

そこで、RootFrameでNavigateされているPageの中に、さらにFrameを置いて、そのFrameに別のページを遷移することで内部で複数のページを切り替えているようなUIを作ることができます。

MainPageはこのようにします。

<Page
    x:Class="App9.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="7*"/>
        </Grid.ColumnDefinitions>
        <ListView x:Name="listView" Grid.Column="0" SelectionChanged="listView_SelectionChanged" FontSize="16" Margin="0,100,0,0"></ListView>
        <Frame x:Name="inlineFrame" Grid.Column="1"></Frame>
    </Grid>
</Page>

左側にListView、そして右側にFrameタグを置きます。

コードビハインドでは内部に入れたFrameから、各pageにNavigateを行います。

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        listView.ItemsSource = new string[]
        {
            "Page1","Page2","Page3"
        };
    }

    private void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        switch (listView.SelectedIndex)
        {
            case 0:
                inlineFrame.Navigate(typeof (InlinePage1));
                break;
            case 1:
                inlineFrame.Navigate(typeof(InlinePage2));
                break;
            case 2:
                inlineFrame.Navigate(typeof(InlinePage3));
                break;
        }
    }
}

あとは複数の遷移したいページを作ります。
今回はInlinePage1,InlinePage2,InlinePage3を作りました。

12

これで、左側のリストビューの項目をクリックすると、各ページへ遷移することができるようなUIを作ることができました。

9

10

11

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください