【Xamarin】NavigationPage のサンプルコード

Xamarinエキスパート養成読本」の「特集3」にて NavigationPage の実装例が載っていたものの、実装を省略していて使用方法がいまひとつ分からなかったので改めて調べてみた。
 

 

画面を遷移したときに、ウェブブラウザのように「戻る」ボタンを表示させるページのこと。
 

実行例

起動直後 f:id:dnkrnka:20181021211059p:plain:w200  
「NAVIGATE!」ボタン押下後 f:id:dnkrnka:20181021211201p:plain:w200 画面上部に「もどる」相当のボタンがある

 

プロジェクト構成

f:id:dnkrnka:20181021205251p:plain
 

ソリューション名 XamlSamples  
コード(1) App.xaml アプリ全体の制御をする
App.xaml.cs  
コード(2) MainPage.xaml 起動したときに最初に開かれる画面の制御をする
MainPage.xaml.cs  
コード(3) HelloXamlPage.xaml 今回は MainPage を開くときに装飾をして Navigation モードで MainPage を開く
HelloXamlPage.xaml.cs  

 

App.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.App">
  <Application.Resources>

  </Application.Resources>
</Application>

 

App.xaml.cs

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace XamlSamples
{
  public partial class App : Application
  {
    public App()
    {
      InitializeComponent();

//    MainPage = new MainPage();  // 初期状態
      MainPage = new NavigationPage(new MainPage()); // NavigationPage に変更した
    }

    protected override void OnStart()
    {
      // Handle when your app starts
    }

    protected override void OnSleep()
    {
      // Handle when your app sleeps
    }

    protected override void OnResume()
    {
      // Handle when your app resumes
    }
  }
}

 

MainPage.xaml

  • 起動時の画面である。
  • 「Welcome to Xamarin.Forms!」という文字を表示する
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamlSamples"
             x:Class="XamlSamples.MainPage">

  <StackLayout>
    <!-- Place new controls here -->
    <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
  </StackLayout>

</ContentPage>

 

MainPage.xaml.cs

  • 起動時に開かれる画面の定義・実装をする。
  • ボタンが押下されたら HelloXamlPage クラスに遷移する。
  • 「Navigate!」ボタンを用意する。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamlSamples
{
  public partial class MainPage : ContentPage
  {
    public MainPage()
    {
      InitializeComponent();
      Button button = new Button
      {
        Text = "Navigate!",
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Center
      };

      button.Clicked += async (sender, args) =>
      {
        await Navigation.PushAsync(new HelloXamlPage());
      };

      Content = button;
    }
  }
}

 

HelloXamlPage.xaml

  • 「Hello XAML Page」と表示するプログラム。
  • 文字が15度だけ傾いている。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.HelloXamlPage"
             Title="Hello XAML Page">
  <ContentPage.Content>
    <Label Text="Hello, XAML!"
               VerticalOptions="Center"
               HorizontalTextAlignment="Center"
               Rotation="-15"
               IsVisible="true"
               FontSize="Large"
               FontAttributes="Bold"
               TextColor="Blue" />
  </ContentPage.Content>
</ContentPage>

 

HelloXamlPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamlSamples
{
  [XamlCompilation(XamlCompilationOptions.Compile)]
  public partial class HelloXamlPage : ContentPage
  {
    public HelloXamlPage()
    {
      InitializeComponent();
    }
  }
}