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

# Buttonに画像を表示する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/9c85a13f-5453-91a4-5d80-ec54675f1857.png)
**Xamarin Formsを選択する。**
**Windows APPを作成するような感覚で開発できる。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/cdb68f92-45df-67f7-712a-7fcca2aadff6.png)
**空白のプロジェクトを作成する。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/01aa9f5d-ea92-b95f-8161-d896291cae12.png)
**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を格納するフォルダの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/54cb30be-1b08-0fbf-ec51-d40bd487159e.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/8a6dfb43-46a4-5e85-ea70-810e9d8377ab.png)
**すべてのイメージファイルのプロパティを埋め込みリソースにする**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/c2b70a01-101b-2af4-525c-99af52b86b01.png)

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

```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();
        }
    }
}

```
実行すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/62b4ff6b-d89e-f133-68d7-9b217712b2fe.png)

#でもなんか足りない。

**そうだタッチ音が足りない。**
タッチしたときの音は、mp3形式の音を用意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/7bc91e55-928d-4620-95a5-4c9ddfcadb1c.png)
例えば、Assetsにclick.mp3のように用意します。いろんな音がFree soundで見つかるでしょう。
##プラグインは、Nugetパッケージマネージャーで導入します。
###「Xam.Plugin.SimpleAudioPlayer」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/53abdb4b-0312-7af0-2dc2-dc0e47797e54.png)

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

```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();
        }
        
    }
}
```