Rainbow Engine

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

C# Xamarin

Xamarin.FormsでHelloworldする手順+Buttonコントロール追加のサンプルコード紹介

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

<目次>

(1) Xamarin.FormsでHelloworldする手順
 (1-1) Xamarin.Formsプロジェクト構成の概要
 (1-2) MainPage.xamlの修正
 (1-3) MainPage.xaml.csの修正
 (1-4) 疎通確認

(1) Xamarin.FormsでHelloworldする手順

当記事ではXamarin.Formsの新規プロジェクトを作成した後に、少しコードを追加して「Helloworld」する手順を紹介します。Xamarin.Formsの新規プロジェクトの作り方については下記記事にて紹介しています。
https://rainbow-engine.com/xamarin-create-project/

(1-1) Xamarin.Formsプロジェクト構成の概要

修正に入る前に、まずはプロジェクト全体の構成について少し触れさせて頂きます。

(1-1-1) プロジェクトの構成概要

Xamarin.Formsは主に2つのプログラムが中心となっています。画面(UI部分)が「XAML」で定義されており、その背後のロジック(プログラム)部分が「C#」で定義されており、連携して動きます。

XAML部分は具体的には「MainPage.xaml」というファイル名で、C#部分(=コード・ビハインド)は「MainPage.xaml.cs」というファイル名でそれぞれ作られています(※他にも構成するプログラムがありますが、今回はHelloworldにおいて使う部分のみの紹介に留めます)

(図111)

今回は上記2つのプログラムに対して、下記の変更を行います。
①「XAML」にボタンを新規に追加する
②「C#」にそのボタンを押した際の処理を追加する

(図112)

コード・ビハインドとは?

「コード・ビハインド」とはオブジェクト指向のプログラミング等において「UI部分」と「ロジック部分」(プログラム)とを別々のファイルに分ける技術です。この技術はASP.NETやXAMLといった、Microsoftの開発基盤において使われており、デザイナーとプログラマが独立して働く事を可能にしています。

目次にもどる

(1-2) MainPage.xamlの修正

デフォルト状態(新規プロジェクト作成時)から以下の点を変更しています。

<修正> Labelコントロールにx:Name属性を追加(11行目)。これはC#側でラベルを操作する際に使う名前になります。
<追加> Buttonコントロールを丸ごと追加(17行目~20行目)。ボタン押下の際のイベントハンドラは「Button_Clicked」という名前になります。
<?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>
        <!-- 修正: x:Name属性を追加(11行目) -->
        <Label  x:Name="label"
                Text="Welcome to Xamarin.Forms!"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand" />
				
        <!-- 追加: Buttonコントロールを追加(17行目~20行目) -->
        <Button Text="Button_ChangeText"
		        Clicked="Button_Clicked"
		        HeightRequest="100"
		        WidthRequest="200" />
    </StackLayout>

</ContentPage>

<各項目の説明>

項目 説明
<StackLayout> ・コントロール(フォーム部品)を縦方向に並べて表示するレイアウトです。
<Label>コントロール ・「x:Name」属性を追加で指定しましたが、この「x:Name」属性の値を利用して、ロジック側(プログラム側)からもこのコントロールにアクセスする事が可能です。
・具体的にはクラスとして扱う事ができ、例えば「label.Text = “Hoge”」のように「labelクラスのText変数」の扱いでアクセスが可能です。
<Button>コントロール ・ボタンがクリックされた(Clicked)際に発動するイベントハンドラとして「Button_Clicked」を指定しています。
・イベントハンドラの内容については「MainPage.xaml.cs」の方に記述します。

(図121)修正イメージ

目次にもどる

(1-3) MainPage.xaml.csの修正

デフォルト状態(新規プロジェクト作成時)から以下の点を変更しています。

<追加> ・Button_Clickedのイベントハンドラを追加し、テキストの値書き換えとサイズ変更を行っています。
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();
        }

        //追加①:Button_Clikckedの
        private void Button_Clicked(object sender, EventArgs e)
        {
            label.Text = "Welcome to Xamarin.Forms Ranbow Planet!";
            label.FontSize = 40;
        }
    }
}

(図131)修正イメージ

目次にもどる

(1-4) 疎通確認

①上記の修正を行った後にデバッグ(F5)を押下
(図141)

②エミュレータ画面のボタンを押下
(図142)

(操作動画)

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-C#, Xamarin

執筆者:


comment

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

関連記事

ASP.NET MVC(C#)でHelloWorldする手順

<目次> (1) ASP.NET MVC(C#)でHelloWorldする手順  (1-1) プロジェクトの作成  (1-2) Controller(コントローラー)の作成  (1-3) Veiw(ビ …

C#のIListとは?Listとの違いや使いどころもご紹介

<目次> (1) C#のIListとは?Listとの違いや使いどころもご紹介  (1-1) IListやIList<T>とは?  (1-2) Listとの違い  (1-3) IListの利 …

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

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

C#のデリゲートが分からない・・を解決!初心者向けになるべく分かり易く説明してみた

<目次> (1) C#のデリゲートが分からない・・を解決!初心者向けになるべく分かり易く説明してみた  (1-1) デリゲートとは?「関数へのポインタ」だけでは説明しきれない・・  (1-2) デリゲ …

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

<目次> (1) Xamarin.Formsで画面遷移を実装する手順について  (1-1) 遷移先ページの追加  (1-2) 画面遷移ロジック追加   (1-2-1) ボタンコントロールの追加   ( …

  • English (United States)
  • 日本語
Top