Rainbow Planet

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

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

関連記事

C#でNLogライブラリを用いてログ出力を行う方法

<目次> (1) C#でNLogライブラリを用いてログ出力を行う方法  (1-1) NLogの概要  (1-2) NLogの導入手順  (1-3) NLogの初期実装手順  (1-4) NLogのサン …

C#のvarの使いどころは?初めての方に向けてサンプルプログラムを使ってご紹介

<目次> (1) C#のvarの使いどころは?初めての方に向けてサンプルプログラムを使ってご紹介  (1-1) ArrayListに異なるデータ型が混在しているパターン  (1-2) LINQのクエリ …

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

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

C#で文字列をタブやスペースで区切り配列に格納する方法

<目次> (1) C#で文字列をタブやスペースで区切り配列に格納する方法  (1-1) 基本構文  (1-2) 基本構文サンプルプログラム  (1-3) 応用構文  (1-4) 応用構文サンプルプログ …

C#のDB接続時のエラー(provider: Named Pipes Provider, error: 40 – Could not open a connection to SQL Server)

<目次> (1) 記事の目的  (1-1) エラー概要  (1-2) エラー原因  (1-3) エラー対策   (1-3-1) SQLServer:リモート接続を有効化   (1-3-2) SQLSe …

  • English (United States)
  • 日本語
Top