Xamarin.Formsでスマホアプリ開発

C#Xamarin.Formsでスマホ開発#15 CarouselPageの作り方

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。

なぜCarouselPageが必要なのか?

CarouselPageを使うと左右にスワイプするだけでページを移動することができます。ちょうどスマホで写真を見ているときに,次の写真に移っていくような感じの動作でページ切り替えができるようになります。

WindowsFormsやWPF畑の場合,こういった操作はないので基本的にはいつもボタンを押させて画面を移動しますよね。AndroidやiOSではスワイプでどんどんページを移動することができるので,画像などを日付順で切り替えていく等,いろんな使い方ができると思います。ただUWPはスワイプに対応していないようなので,自動で出てくる矢印ボタンみたいなやつで左右に移動することになります。なんともWindowsという感じですね。

Androidが左右のスワイプで移動。UWPは矢印ボタンで移動。

CarouselPageの書き方

CarouselPageを機能させるには,メインとなるCarouselPageを作成し,そこに表示したいContentPageを複数定義していくというやり方になります。今回はCarouselMainPageというカルーセルページを作成し,その中にCarouselSub1PageとCarouselSub2Pageという2つのコンテンツページを定義することにします。

MenuPageに追加

MenuPageからCarouselMainPageを呼び出せるように実装したいと思います。前回はAAAAとBBBBというメニューを作りましたが,削除して,今回作成するCarouselMainPageを表示するメニューを作ります。今後のレクチャーでは機能ごとにメニューを作成し,メニューをたどればすぐに機能や書き方が思い出せるようなアプリケーションを作って,勉強した後も備忘録として残るソフトを完成させていきましょう。MenuPageは次のように書きます。

  • MenuDtoを作成する際,Titleは開くページ名,SubTitleは,そのページで実現する機能を備忘録的に記述しておきます。ImageNameはなんでもいいので,前回と同様にpngとしておきます。
  • ItemTappedイベントでは,タップされたアイテムのTitleでページ名を識別し,ページを表示するように実装しています。ここではCarouselMainPageが表示されるようになります。

CarouselMainPageの作成

新規追加でContentPageを作成し,名前をCarouselMainPageとします。

デフォルトのContentPageは次のようになっているので,カルーセルページになるように変更していきます。

【変更前】

【変更後】

  • 一番外側のContentPage の部分をCarouselPageに変更します。
  • Pagesフォルダーのページを参照するために「xmlns:pages=”clr-namespace:XSample.Pages”」を追加します。
  • カルーセルページのなかに表示するContentPageを指定します。ここではこれから作成するCarouselSub1PageとCarouselSub2Pageを指定します。

CarouselMainPageをカルーセルページに変更したので,コードビハインド側の継承をCarouselPageに変更する必要があります。

CarouselSub1PageとCarouselSub2Pageの作成

次にカルーセルページの中に表示するページを作成します。これは表示したいページを作成すればよいので,自由に作成してください。ここではCarouselSub1PageとCarouselSub2Pageという単純に文字だけを表示するページを作成します。どのページが表示されているかを識別できるように,ラベルのテキストを次のように変更しておきます。

この2つのページがCarouselMainPageのXamlで指定されているため,カルーセルページの中身として設定されます。

実行

実行すると次のように画面が表示されます。Androidはスワイプでページ移動ができます。UWPは自動で表示される矢印ボタンのようなボタンで移動します。

Udemyで公開しているC#のコースを1つ無料でプレゼントしています。こちらから確認してください。