2016年

5月

07日

Xamarin.Froms 自己紹介サンプル xamlレイアウト編集

「名前」を入力し「自己紹介する」ボタンをクリックする自己紹介アプリです。

HomePage.xamlのレイアウト編集方法をまとめています。

Androidエミレーター表示

ファイル --> 新規作成  --> プロジェクト(P)...  --> Cross-Platform --> Xamarin-Forms で作成

プロジェクト XFContenPageを右クリック --> 追加(D) --> 新しい項目(W)...をクリック

Cross-Platform --> code --> Forms Xaml Page を選択 名前:HomePage 追加

HomePage.xamlを書き換える。

HomePage.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"
             x:Class="XFPart2LBE03.HomePage"
             BackgroundColor="White">
  
   <!-- Padding 内側の余白 -->
   <StackLayout BackgroundColor="White"
                Padding="60"
                VerticalOptions="Center">
    
    <!-- 名前入力欄 -->
    <!-- Grid 表のようにレイアウトを配置できるレイアウト -->
    <Grid Padding="0,0,0,50">
    <Entry x:Name="MainEntry"
           BackgroundColor="Gray" />
    </Grid>
     
    <!-- 自己紹介ボタン -->
    <Button Clicked="Button_OnClicked"
            Text="自己紹介する"
            BackgroundColor="Green"
            TextColor="White"/>
    
    <!-- 自己紹介表示ラベル -->
    <Label x:Name="MainLabel"
           TextColor="Gray"
            FontSize="40"/>
    
  </StackLayout>

</ContentPage>

HomePage.xaml.csを書き換える。

HomePage.xaml.csにボタンクリック記述を追加する。

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

using Xamarin.Forms;

namespace XFPart2LBE03
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();
        }


     // 自己紹介ボタン
        private void Button_OnClicked(object sender, EventArgs e)
        {
            // 名前入力
            string text = MainEntry.Text;

            // 自己紹介テキスト
            MainLabel.Text = "私は" + text + "です。";
        }

    }
}

App.cs MainPageの書き換え

App.cs

this.MainPage = new HomePage(); 1行のみ

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

using Xamarin.Forms;

namespace XFPart2LBE03
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new HomePage();

            //MainPage = new ContentPage
            //{
            //    Content = new StackLayout
            //    {
            //        VerticalOptions = LayoutOptions.Center,
            //        Children = {
            //             new Label {
            //                 HorizontalTextAlignment = TextAlignment.Center,
            //                 Text = "Welcome to Xamarin Forms!"
            //             }
            //         }
            //    }
            //};
        }

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

ビルド

「自己紹介する」ボタンをクリック

私がmaedaです。」が表示されます。

 

目 次