Rainbow Planet

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

C# Xamarin

Xamarin.Formsで画面遷移を実装する手順について+ソースコードも紹介

投稿日:2020年9月8日 更新日:

<目次>

(1) Xamarin.Formsで画面遷移を実装する手順について
 (1-1) 遷移先ページの追加
 (1-2) 画面遷移ロジック追加
  (1-2-1) ボタンコントロールの追加
  (1-2-2) NavigationPageへの変更
  (1-2-3) イベントハンドラの追加
 (1-3) 実装結果・イメージ動画

(1) Xamarin.Formsで画面遷移を実装する手順について

当記事ではXamarin.Formsで画面遷移を実装する手順について紹介いたします。また、手順と併せて最小プログラムも掲載します(Xamarin.Formsの新規プロジェクト作成直後から実装した例)。
ざっくりした全体像として、SubPageを新規作成した後に、MainPage側でそのSubPageに飛ぶボタンと画面遷移のロジック(イベントハンドラ)を追記する事で画面遷移を実現します。

(図111)⓪

(1-1) 遷移先ページの追加

①初期状態の確認
次の「(図111)①」がXamarin.Formsの新規プロジェクトを作成した直後の状態です。初期状態ではメイン画面(MainPage)しか無い状況ですので、新しくサブ画面(SubPage)を追加していきます。

(図111)①

②サブ画面の追加
ソリューションエクスプローラーで右クリックして「追加」→「新しい項目」を選択します。

(図111)②

③画面の種類選択
左ペインで「Visual C# アイテム」を選択し、中央では「コンテンツページ」を選択して、中央下部に任意の画面名を入力して、右下の「追加」を押下します。

(図111)③

④追加結果の確認
追加が完了すると、右側のソリューションエクスプローラーにて「SubPage.xaml」とそのコードビハインドの「SubPage.xaml.cs」が追加された事が確認できます。

(図111)④

本記事では、ラベルを少し目立たせるために表示文言やフォントサイズを変更します。これは見た目の装飾のためであり、画面遷移とは関係ないので任意ですが、MainPageと異なる文言にはした方が遷移した時の変化が分かり易いと思います。

//修正前
<Label Text="Welcome to Xamarin.Forms!"

//修正後
<Label Text="Welcome to Xamarin.Forms! This is your SubPage!"
	FontSize="40"

目次にもどる

(1-2) 画面遷移ロジック追加

(1-2-1) ボタンコントロールの追加

MainPage.xamlにボタンコントロール(=ボタン部品)の追加をします。「.xaml」はUI(画面)の定義体で、このファイルに「コントール」と呼ばれる画面部品を配置していきます。

<追加コード>

<Button Text="Button_ChangeText"
		Clicked="Button_Clicked"
		HeightRequest="100"
		WidthRequest="200" />

<全体:MainPage.xaml>

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="IT0118_App1.MainPage">

    <StackLayout>
        <Label  x:Name="label"
	            Text="Welcome to Xamarin.Forms! Rainbow Planet!"
                FontSize="20"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />
        <Button Text="Button_ChangeText"
		        Clicked="Button_Clicked"
		        HeightRequest="100"
		        WidthRequest="200" />
    </StackLayout>

</ContentPage>

(図121)

目次にもどる

(1-2-2) NavigationPageへの変更

Xamarin.Formsでページ遷移を行うためには「App.xaml」にてページ表示の仕組みを「NavigationPage」に変更します。
 
<追加コード>
//書き換え前(Before)
MainPage = new MainPage();

//書き換え後(After)
MainPage = new NavigationPage(new MainPage());

<全体:App.xaml.cs>

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

namespace IT0118_App1
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage());
        }

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

(図122)

目次にもどる

(1-2-3) イベントハンドラの追加

「MainPage.xaml.cs」にButtonクリック時のイベントハンドラを記述します。具体的にはMainPageからSubPageに遷移するロジックになります。

<追加コード>

private void Button_Clicked(object sender, EventArgs e)
{
	Navigation.PushAsync(new SubPage());
}

<全体:MainPage.xaml.cs>

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace IT0118_App1
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private void Button_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new SubPage());
        }
    }
}

(図123)Before

(図123)After

目次にもどる

(1-3) 実装結果・イメージ動画

上記のプログラムをF5でデバッグして、Andoroidのエミュレーターを起動したのが下図です。

(図131)Before

(図131)After

(操作動画)

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-C#, Xamarin

執筆者:


comment

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

関連記事

C#で文字列の前に付いてるアットマーク「@」について

<目次> (1) C#で文字列の前に付いてるアットマーク「@」について  (1-1) 概要  (1-2) 主な用途  (1-3) 注意点 (1) C#で文字列の前に付いてるアットマーク「@」について …

Xamarin.Formsのプロジェクトの構成について~各ファイルの役割や概要について~

<目次> (1) Xamarin.Formsのプロジェクトの構成について  (1-1) プロジェクト構造の概要  (1-2) プロジェクトの初期ファイルの一覧 (1) Xamarin.Formsのプロ …

C#のabstract(抽象クラス)とは?継承やoverrideの手順や使い方をご紹介

<目次> (1) C#の抽象クラスやabstractとは?意味や使い方をご紹介  (1-1) 抽象クラスとは?  (1-2) 抽象クラスの使い方   (1-2-1) 抽象クラスの定義   (1-2-2 …

C#で見るgetやsetとは?プロパティの基礎についてご紹介

<目次> (1) C#で見るgetやsetとは?プロパティの基礎についてご紹介  (1-1) プロパティとは?  (1-2) プロパティの構文  (1-3) サンプルプログラム  (1-4) プロパテ …

Xamarin.Formsのプロジェクトを新規作成する手順

<目次> (1) Xamarin.Formsのプロジェクトを新規作成する手順  (1-1) Xamarin.Formsプロジェクトの作成   (1-1-1) プロジェクト新規作成   (1-1-2) …

  • English (United States)
  • 日本語
Top