眺めて覚える C# Xamarin Button(4) Toast Image Sound

Buttonに画像を表示する。

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

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

MainPage.xamlは、そのまま使います。

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

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

</ContentPage>

Imageを格納するフォルダの作成

使用するイメージファイルをドラッグする

すべてのイメージファイルのプロパティを埋め込みリソースにする

イメージファイルをボタンに表示します。

MainPage.xaml.cs

using Android.Widget;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Android.Content;
using Android.Media;
using Android.Views;
using Android.Webkit;
using Xamarin.Essentials;
namespace ManyButtons
{
    // 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();
            Setup();
        }
        // Button に　Tag プロパティを追加
        class Mbutton : Xamarin.Forms.Button
        {
            public object Tag
            {
                get { return (object)GetValue(TagProperty); }
                set { SetValue(TagProperty, value); }
            }

            public static readonly BindableProperty TagProperty =
                BindableProperty.Create(nameof(Tag), typeof(object), typeof(Mbutton), null);
        }
        // Imagesのファイル定義
        List<string> flist = new List<string>()
        {
            "ManyButtons.Images.applications.ico" ,
            "ManyButtons.Images.audio_file.ico" ,
            "ManyButtons.Images.back.ico" ,
            "ManyButtons.Images.button_cancel.ico" ,
            "ManyButtons.Images.button_ok.ico" ,
            "ManyButtons.Images.cd.ico" ,
            "ManyButtons.Images.cdimage.ico" ,
            "ManyButtons.Images.cdr.ico" ,
            "ManyButtons.Images.clock.ico" ,
            "ManyButtons.Images.computer.ico" ,
            "ManyButtons.Images.configuration_settings.ico" ,
            "ManyButtons.Images.control_panel.ico" ,
            "ManyButtons.Images.desktop.ico" ,
            "ManyButtons.Images.down.ico" ,
            "ManyButtons.Images.exec.ico" ,
            "ManyButtons.Images.favorits.ico" ,
        };            
        // 16個のボタンを作成してグリットに配置
        void Setup()
        {
            var g = new Grid() {HeightRequest=400 };
            var k = 0;
            for(var i = 0; i < 4; i++)
            {
                for (var j = 0; j < 4; j++)
                {
                    if (k < flist.Count)
                    {
                        var b = new Mbutton()
                        {
                            Text = $"{k}",
                            Tag = k,
                            ImageSource = ImageSource.FromResource(flist[k]),
                        };
                        b.Clicked += B_Clicked;
                        g.Children.Add(b, j, i);
                        k++;
                    }
                }
            }
            //余白部の作成
            var l=new Label();
            g.Children.Add(l, 0, 8);
            Content = g;
        }

        private void B_Clicked(object s, EventArgs e)
        {
            var sx = s as Mbutton;
            Toast.MakeText(Android.App.Application.Context,
                $"{sx.Tag}がタッチされた", ToastLength.Short).Show();
        }
    }
}

実行すると

でもなんか足りない。

そうだタッチ音が足りない。
タッチしたときの音は、mp3形式の音を用意します。

例えば、Assetsにclick.mp3のように用意します。いろんな音がFree soundで見つかるでしょう。

プラグインは、Nugetパッケージマネージャーで導入します。

「Xam.Plugin.SimpleAudioPlayer」を選択します。

これでクリック音を出力できます。

play.cs

            var player = Plugin.SimpleAudioPlayer.CrossSimpleAudioPlayer.Current;
            player.Load("click.mp3");
            player.Play();

MainPage.xaml.cs

using Android.Widget;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Android.Content;
using Android.Media;
using Android.Views;
using Android.Webkit;
using Xamarin.Essentials;
namespace ManyButtons
{
    // 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();
            Setup();
        }
        // Button に　Tag プロパティを追加
        class Mbutton : Xamarin.Forms.Button
        {
            public object Tag
            {
                get { return (object)GetValue(TagProperty); }
                set { SetValue(TagProperty, value); }
            }

            public static readonly BindableProperty TagProperty =
                BindableProperty.Create(nameof(Tag), typeof(object), typeof(Mbutton), null);
        }
        // Imagesのファイル定義
        List<string> flist = new List<string>()
        {
            "ManyButtons.Images.applications.ico" ,
            "ManyButtons.Images.audio_file.ico" ,
            "ManyButtons.Images.back.ico" ,
            "ManyButtons.Images.button_cancel.ico" ,
            "ManyButtons.Images.button_ok.ico" ,
            "ManyButtons.Images.cd.ico" ,
            "ManyButtons.Images.cdimage.ico" ,
            "ManyButtons.Images.cdr.ico" ,
            "ManyButtons.Images.clock.ico" ,
            "ManyButtons.Images.computer.ico" ,
            "ManyButtons.Images.configuration_settings.ico" ,
            "ManyButtons.Images.control_panel.ico" ,
            "ManyButtons.Images.desktop.ico" ,
            "ManyButtons.Images.down.ico" ,
            "ManyButtons.Images.exec.ico" ,
            "ManyButtons.Images.favorits.ico" ,
        };            
        // 16個のボタンを作成してグリットに配置
        void Setup()
        {
            var g = new Grid() {HeightRequest=400 };
            var k = 0;
            for(var i = 0; i < 4; i++)
            {
                for (var j = 0; j < 4; j++)
                {
                    if (k < flist.Count)
                    {
                        var b = new Mbutton()
                        {
                            Text = $"{k}",
                            Tag = k,
                            ImageSource = ImageSource.FromResource(flist[k]),
                        };
                        b.Clicked += B_Clicked1;
                        g.Children.Add(b, j, i);
                        k++;
                    }
                }
            }
            //余白部の作成
            var l=new Label();
            g.Children.Add(l, 0, 8);
            Content = g;
        }

        private void B_Clicked(object s, EventArgs e)
        {
            var sx = s as Mbutton;
            Toast.MakeText(Android.App.Application.Context,
                $"{sx.Tag}がタッチされた", ToastLength.Short).Show();
            var player = Plugin.SimpleAudioPlayer.CrossSimpleAudioPlayer.Current;
            player.Load("click.mp3");
            player.Play();
        }

    }
}