07日 5月 2016

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


<StackLayout BackgroundColor="White"
Padding="60"
VerticalOptions="Center">



<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(); １行のみ

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