Xamarin.Fromsでボタンのクリックイベントでラベル「Welcome to Xamarin Forms and XAML!」を「MVVMでクリックした」に置き換え表示する方法をまとめました。

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

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

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

Page1.xamlを書き換える。

Page1.xaml

LabelとButtonを記述する。

Label Text="{Binding Text}"
Button x:Name="btn1" Text="Click Me"

<?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="XFPart2LBE01.Page1">
  
  <StackLayout>
    <Label Text="{Binding Text}" />
    <Button x:Name="btn1" Text="Click Me" />
  </StackLayout>

</ContentPage>

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

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

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace XFPart2LBE01

{

    public partial class Page1 : ContentPage

    {

        public Page1()

        {

            InitializeComponent();

            this.btn1.Clicked += Btn1_Clicked;

            _vm = new MyViewModel();

            this.BindingContext = _vm;

        }

        MyViewModel _vm;

        private void Btn1_Clicked(object sender, EventArgs e)

        {

            _vm.Text = "MVVM でクリックした";

        }

    }

}

ViewModelクラスの追加

引き継いできた BindableBase を継承しラベルに表示する文字列を Text プロパティで連携させます。

MyViewModel.cs

MyViewModel.cs

MyViewModel.cs

using System;

using System.ComponentModel;

using System.Runtime.CompilerServices;

namespace XFPart2LBE01

{

    class MyViewModel : BindableBase

    {

        private string _text;

        public string Text

        {

            get { return _text; }

            set { this.SetProperty(ref this._text, value); }

        }

    }

    public abstract class BindableBase : INotifyPropertyChanged

    {

        public event PropertyChangedEventHandler PropertyChanged;

        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)

        {

            if (object.Equals(storage, value)) return false;

            storage = value;

            OnPropertyChanged(propertyName);

            return true;

        }

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)

        {

            var eventHandler = this.PropertyChanged;

            if (eventHandler != null)

            {

                eventHandler(this, new PropertyChangedEventArgs(propertyName));

            }

        }

    }

}

App.cs

App.cs

MainPage = new Page1(); １行のみ

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

using Xamarin.Forms;

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

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

ビルド

「Click Me」ボタンをクリック

「MVVMでクリックした」が表示されます。

▫️参考ページ

Xamarin.Forms を XAML を使って書くために

Xamarin Forms with Visual Studio Part 1 [ContentPage]

目　次