眺めて覚える C# Xamarin Button(2)

ボタンをタッチして表示するプログラム。

Visual Studio 2019でプロジェクトを作成する。

Xamarin Formsを選択する。
Windows APPを作成するような感覚で開発できる。

空白のプロジェクトを作成する。

MainPage.xamlを開いてButtonを作成します。

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="HelloButton.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

1.Labelをプログラムから扱うために名前を付けます。
2.Buttonとイベントを定義します。

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="HelloButton.MainPage">
    <StackLayout>
        <!-- Place new controls here -->
　　　　 <!--x:Name="label" 名前を定義する。-->
        <Label x:Name="label" Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    　　　<!--ボタンとイベントを定義する-->
　　　　　<Button Text="Touch Me"
            Clicked="BtnClick"
            />
    </StackLayout>

</ContentPage>

ボタンのイベントハンドラを追加します

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 HelloButton
{
    // 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();
        }
        //イベントハンドラの定義追加
        void BtnClick(object s,EventArgs e)
        {
            //ラベルのTextに時刻を表示します。
            label.Text = DateTime.Now.ToString("HH:mm:ss");
        }
    }
}

実行結果は、

ボタンをタッチすると時刻が表示される。

文字の大きさを変えてみる。

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 HelloButton
{
    // 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();
        }
        //イベントハンドラの定義追加
        void BtnClick(object s,EventArgs e)
        {
            //ラベルのTextに時刻を表示します。
            label.FontSize = 64; //font size指定
            label.Text = DateTime.Now.ToString("HH:mm:ss");
        }
    }
}

改造して繰り返し時計を表示する

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 HelloButton
{
    // 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();
        }
        //イベントハンドラの定義追加
        void BtnClick(object s, EventArgs e)
        {
            Button b = s as Button;
            label.FontSize = 64;
            b.IsEnabled = false;
            // タイマーインタラプトルーチン
            Device.StartTimer(TimeSpan.FromSeconds(1),
                ()=> {
                    label.Text = DateTime.Now.ToString("HH:mm:ss");
                    return true;
                });
        }
    }
}

実行すると時計を表示し続ける。