SDK Backbutton


空白アプリで Backbutton を設定します。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プログラムの説明

  1. SDK では Microsoft のサンプルに合わせて、プロジェクト名を SDKTemplate とします。
    MainPage.xaml のレイアウトから ListView と Frame を貼り付けます。
    Frame はナビゲーションをサポートするコンテンツコントロールで、ナビゲートするページがこの中に表示されます。
    WPF Navigate では Frame を使うと自動的にバックボタンが設定されましたが、空白アプリでは設定されません。
    今回は「空白アプリ(ユニバーサル Windows)」でバックボタンを設定します。
    プログラムを起動すると Frame に Scenario1 が表示されます。
    CheckBox を ON にしてナビゲートボタンをクリックすると SecondaryPage にバックボタンが設定されます。
    CheckBox を OFF にしてナビゲートした時は [Window+Backspace] で戻って下さい。
  2. Visual Studio を起動して [FILE][New Project] から [空白アプリ(ユニバーサル Windows)] を選びプロジェクトを構築します。
    SDK のサンプルに合わせて、プロジェクト名を SDKTemplate とします。
    プロジェクトに [Add][New Item][空白のページ] から Scenario1, SecondaryPage を追加します。
  3. SampleConfiguration.cs を作成してプロジェクトに追加して下さい。
    // SampleConfiguration.cs
    using System;
    using System.Collections.Generic;
    using Windows.UI.Xaml.Controls;
    
    namespace SDKTemplate
    {
        public class Scenario
        {
            public string Title { get; set; }
            public Type ClassType { get; set; }
            public override string ToString()
            {   return Title;  }
        }
        public partial class MainPage : Page
        {
            List<Scenario> scenarios = new List<Scenario>
            {
                new Scenario() { Title="1. Scenario1", ClassType=typeof(Scenario1) }
            };
            private void ListItemAdd()
            {
                foreach (Scenario s in scenarios)
                {
                    listView.Items.Add(s.Title);
                }
            }
        }
    }
    
  4. App1.xaml.cs を修正します。
    using Windows.UI.Core; を追加して OnLaunched() 関数の末尾に1行追加します。
    using Windows.UI.Core;
           ・・・
            protected override void OnLaunched(LaunchActivatedEventArgs e)
            {
                  ・・・
                SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
            }
    
    App_BackRequested() 関数を定義するのですが、OnLaunched() の次にでも置いて下さい。
            private void App_BackRequested(object sender, BackRequestedEventArgs e)
            {
                Frame rootFrame = Window.Current.Content as Frame;
                if (rootFrame == null)
                    return;
    
                // If we can go back and the event has not already been handled, do so.
                if (rootFrame.CanGoBack && e.Handled == false)
                {
                    e.Handled = true;
                    rootFrame.GoBack();
                }
            }
    
  5. MainPage.xaml の Grid と /Grid の間に ListView と Frame を追加します。
    デザイン画面から貼り付けることも出来るのですが、直接ソースを修正します。
        <Grid>
            <ListView x:Name="listView" HorizontalAlignment="Left" Height="156" Margin="10,10,0,0"
                VerticalAlignment="Top" Width="280"/>
            <Frame x:Name="frame" Content="Frame" HorizontalAlignment="Left" Margin="0,171,0,0"
                VerticalAlignment="Top" Height="436" Width="579"/>
    
        </Grid>
    
  6. MainPage.xaml.cs の Constructor を修正します。
    SampleConfiguration.cs の ListItemAdd(); 関数で ListView にアイテムを登録します。
    this.NavigationCacheMode が Back ボタンの設定です。
    frame.Navigate() で Scenario1 を Frame に表示します。
            public MainPage()
            {
                this.InitializeComponent();
                ListItemAdd();
                this.NavigationCacheMode = NavigationCacheMode.Required;
                frame.Navigate(scenarios[0].ClassType, "AllGroups");
            }
    
  7. Scenario1.xaml の Grid と /Grid の間に CheckBox と Button を追加します。
    デザイン画面から貼り付けることも出来るのですが、直接ソースを修正します。
        <Grid>
            <StackPanel Margin="0,0,0,10">
                <TextBlock Text="Scenario1" FontSize="36"/>
                <CheckBox Name="checkBox" Content="Enable Title Bar back button"
                    Checked="CheckBox_Toggle" Unchecked="CheckBox_Toggle"/>
                <Button Content="Navigate to secondary page" Click="Button_Click"/>
            </StackPanel>
        </Grid>
    
  8. Scenario1.xaml.cs に Button_Click() と CheckBox_Toggle() 関数を追加します。
    optedIn はバックボタンのフラグです。
            private static bool optedIn = false;
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Frame rootFrame = Window.Current.Content as Frame;
                rootFrame.Navigate(typeof(SecondaryPage), optedIn);
            }
    
            private void CheckBox_Toggle(object sender, RoutedEventArgs e)
            {
                optedIn = !optedIn;
            }
    
  9. SecondaryPage.xaml の Grid と /Grid の間に TextBlock を追加します。
        <Grid>
            <StackPanel Margin="0,0,0,10">
                <TextBlock Text="Secondary Page" Foreground="#FFF10F0F" FontSize="36"/>
                <TextBlock TextWrapping="Wrap" Text="Set Back Button"/>
            </StackPanel>
    
        </Grid>
    
  10. SecondaryPage.xaml.cs に OnNavigatedTo() 関数を追加します。
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                bool optedIn = false;
    
                if ((bool)e.Parameter)
                {
                    optedIn = true;
                }
    
                Frame rootFrame = Window.Current.Content as Frame;
    
                if (rootFrame.CanGoBack && optedIn)
                {
                    // If we have pages in our in-app backstack and have opted in to showing back, do so
                    SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
                        AppViewBackButtonVisibility.Visible;
                }
                else
                {
                    // Remove the UI from the title bar if there are no pages in our in-app back stack
                    SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
                        AppViewBackButtonVisibility.Collapsed;
                }
            }
    

超初心者のプログラム入門(C# Frame Work)