Buttonに画像を表示する。
Xamarin Formsを選択する。
Windows APPを作成するような感覚で開発できる。
空白のプロジェクトを作成する。
MainPage.xamlは、そのまま使います。
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?><ContentPagexmlns="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 --><LabelText="Welcome to Xamarin.Forms!"HorizontalOptions="Center"VerticalOptions="CenterAndExpand"/></StackLayout></ContentPage>Imageを格納するフォルダの作成
使用するイメージファイルをドラッグする
すべてのイメージファイルのプロパティを埋め込みリソースにする
イメージファイルをボタンに表示します。
MainPage.xaml.cs
usingAndroid.Widget;usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;usingXamarin.Forms;usingAndroid.Content;usingAndroid.Media;usingAndroid.Views;usingAndroid.Webkit;usingXamarin.Essentials;namespaceManyButtons{// Learn more about making custom code visible in the Xamarin.Forms previewer// by visiting https://aka.ms/xamarinforms-previewer[DesignTimeVisible(false)]publicpartialclassMainPage:ContentPage{publicMainPage(){InitializeComponent();Setup();}// Button に Tag プロパティを追加classMbutton:Xamarin.Forms.Button{publicobjectTag{get{return(object)GetValue(TagProperty);}set{SetValue(TagProperty,value);}}publicstaticreadonlyBindablePropertyTagProperty=BindableProperty.Create(nameof(Tag),typeof(object),typeof(Mbutton),null);}// Imagesのファイル定義List<string>flist=newList<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個のボタンを作成してグリットに配置voidSetup(){varg=newGrid(){HeightRequest=400};vark=0;for(vari=0;i<4;i++){for(varj=0;j<4;j++){if(k<flist.Count){varb=newMbutton(){Text=$"{k}",Tag=k,ImageSource=ImageSource.FromResource(flist[k]),};b.Clicked+=B_Clicked;g.Children.Add(b,j,i);k++;}}}//余白部の作成varl=newLabel();g.Children.Add(l,0,8);Content=g;}privatevoidB_Clicked(objects,EventArgse){varsx=sasMbutton;Toast.MakeText(Android.App.Application.Context,$"{sx.Tag}がタッチされた",ToastLength.Short).Show();}}}実行すると
でもなんか足りない。
そうだタッチ音が足りない。
タッチしたときの音は、mp3形式の音を用意します。
例えば、Assetsにclick.mp3のように用意します。いろんな音がFree soundで見つかるでしょう。
プラグインは、Nugetパッケージマネージャーで導入します。
「Xam.Plugin.SimpleAudioPlayer」を選択します。
これでクリック音を出力できます。
play.cs
varplayer=Plugin.SimpleAudioPlayer.CrossSimpleAudioPlayer.Current;player.Load("click.mp3");player.Play();MainPage.xaml.cs
usingAndroid.Widget;usingSystem;usingSystem.Collections.Generic;usingSystem.ComponentModel;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;usingXamarin.Forms;usingAndroid.Content;usingAndroid.Media;usingAndroid.Views;usingAndroid.Webkit;usingXamarin.Essentials;namespaceManyButtons{// Learn more about making custom code visible in the Xamarin.Forms previewer// by visiting https://aka.ms/xamarinforms-previewer[DesignTimeVisible(false)]publicpartialclassMainPage:ContentPage{publicMainPage(){InitializeComponent();Setup();}// Button に Tag プロパティを追加classMbutton:Xamarin.Forms.Button{publicobjectTag{get{return(object)GetValue(TagProperty);}set{SetValue(TagProperty,value);}}publicstaticreadonlyBindablePropertyTagProperty=BindableProperty.Create(nameof(Tag),typeof(object),typeof(Mbutton),null);}// Imagesのファイル定義List<string>flist=newList<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個のボタンを作成してグリットに配置voidSetup(){varg=newGrid(){HeightRequest=400};vark=0;for(vari=0;i<4;i++){for(varj=0;j<4;j++){if(k<flist.Count){varb=newMbutton(){Text=$"{k}",Tag=k,ImageSource=ImageSource.FromResource(flist[k]),};b.Clicked+=B_Clicked1;g.Children.Add(b,j,i);k++;}}}//余白部の作成varl=newLabel();g.Children.Add(l,0,8);Content=g;}privatevoidB_Clicked(objects,EventArgse){varsx=sasMbutton;Toast.MakeText(Android.App.Application.Context,$"{sx.Tag}がタッチされた",ToastLength.Short).Show();varplayer=Plugin.SimpleAudioPlayer.CrossSimpleAudioPlayer.Current;player.Load("click.mp3");player.Play();}}}