2016年

5月

21日

Xamarin.Froms  MasterDetailPage  TopPage +  ListView + Page

シンプルなMasterDetailPageです。

概要レベルで要素を一覧するマスターページと、各要素の詳細ページを管理するページです。通常、マスターページがメニュー的な役割を担うことになります。

Listview花火一覧方法もまとめています。

Android Windows Phone エミレーター表示


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

MasterDetailPage04

Forms ContentPageを選択しMyMasterDetailPage.csの追加

MyMasterDetailPageの書き換え

using System;

using System.Collections.Generic;

using System.Linq;

using System.Reflection.Emit;

using System.Text;

 

using Xamarin.Forms;

 

namespace MasterDetailPage04

{

    // MasterDetailPageクラスを使用

    public class MyMasterDetailPage : MasterDetailPage

    {

        public MyMasterDetailPage()

        {

            

            // Menuの配列項目

            var ar = new[] { "Top", "花火一覧", "花火撮影タイミング" };

 

            // Menuのリストビュー

            ListView listView = new ListView

            {

                // Menuの項目

                ItemsSource = ar,

                // BackgroundColor

                BackgroundColor = Color.Gray,

            };            

            

            // マスターページ

            Master = new ContentPage

            {

                BackgroundColor = Color.FromRgba(0.86, 0.91, 0.94, 0.5),

                //iPhoneにおいて、ステータスバーとの重なりを防ぐためパディングを調整する

                Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0),

                Title = "Master", // 必須                

                Icon = "menu.png",

                Content = listView

            };

 

            // Menu一覧を選択タップ

            listView.ItemTapped += (sender, e) =>

            {

               

                ContentPage gotoPage;

 

                // Menu項目を switch文で照合

                switch (e.Item.ToString())

                {

 

                    case "Top":

                        gotoPage = new TopPage();

                        break;

                    case "花火一覧":

                        gotoPage = new SecondPage();

                        break;

                    case "花火撮影タイミング":

                        gotoPage = new ThirdPage();

                        break;

                    default:

                        gotoPage = new TopPage();

                        break;

                }

 

                // 選択ページを表示

                Detail = new NavigationPage(gotoPage);

                ((ListView)sender).SelectedItem = null;

                IsPresented = false;

            };

                

            // 初期画面Topページ

            Detail = new NavigationPage(new TopPage());// 必須 最初のページをセットする       

        }

    } 

}

TopPage.cs SecondPage.cs ThirdPage.cs NextPage1.csの追加

TopPage.cs の追加

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

 

using Xamarin.Forms;

 

namespace MasterDetailPage04

{

    public partial class TopPage : ContentPage

    {

        public TopPage()

        {

            InitializeComponent();

 

            Title = "Top";

 

            Content = new Image

            {

                Source = ImageSource.FromResource("MasterDetailPage04.Images.classmethod_Top.png"),

                // アスペクトを設定

                Aspect = Aspect.AspectFit

            };

        }

    }

}

SecondPage.cs の書き換え

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

 

using Xamarin.Forms;

 

namespace MasterDetailPage04

{

    public partial class SecondPage : ContentPage

    {

 

        public class ListItem

        {

            public string Source { get; set; }

            public string Title { get; set; }

            public string Description { get; set; }

            public int Row { get; set; }

        }

 

        public SecondPage()

        {

            Title = "花火一覧";

 

            var listView = new ListView();

 

            // Source名:Android「-」「@2x」不可

            listView.ItemsSource = new ListItem[] {

                new ListItem {Source = "fire1s.png", Title = "1.千輪 光跡編", Description="ISO:100 絞り:F13", Row=0},

                new ListItem {Source = "fire2s.png", Title = "2.柳 光跡編", Description="ISO:400 絞り:F8", Row=1},

                new ListItem {Source = "fire3s.png", Title = "3.菊先 光跡編", Description="ISO:100 絞り:F13", Row=2}

            };

 

            // セルの高さ

            listView.RowHeight = 84;

            listView.BackgroundColor = Color.Black;

            listView.ItemTemplate = new DataTemplate(typeof(ListItemCell));

            Content = listView;

 

            // セルの選択 ナビゲーションページNextPage1に画面遷移

            listView.ItemTapped += async (sender, e) =>

            {

                ListItem item = (ListItem)e.Item;

                System.Diagnostics.Debug.WriteLine("e:" + item);

                await Navigation.PushModalAsync(new NextPage1(item.Row));

                listView.SelectedItem = null;

            };

 

            Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

        }

    }

 

    class ListItemCell : ViewCell

    {

        public ListItemCell()

        {

            Image image = new Image

            {

                HorizontalOptions = LayoutOptions.FillAndExpand,

            };

            image.SetBinding(Image.SourceProperty, "Source");

 

            // セルタイトルラベル

            Label titleLabel = new Label

            {

                HorizontalOptions = LayoutOptions.FillAndExpand,

                FontSize = 20,

                FontAttributes = Xamarin.Forms.FontAttributes.Bold,

                TextColor = Color.White

            };

            titleLabel.SetBinding(Label.TextProperty, "Title");

 

            // セルサブタイトル

            Label descLabel = new Label

            {

                HorizontalOptions = LayoutOptions.Start,

                FontSize = 18,

                TextColor = Color.White

            };

            descLabel.SetBinding(Label.TextProperty, "Description");

 

            StackLayout viewLayoutImage = new StackLayout()

            {

                HorizontalOptions = LayoutOptions.Start,

                Orientation = StackOrientation.Vertical,

                Padding = 3,

                Children = { image }

            };

 

            StackLayout viewLayoutItem = new StackLayout()

            {

                HorizontalOptions = LayoutOptions.StartAndExpand,

                Orientation = StackOrientation.Vertical,

                Padding = 15,

                Children = { titleLabel, descLabel }

            };

 

            StackLayout viewLayout = new StackLayout()

            {

                HorizontalOptions = LayoutOptions.StartAndExpand,

                Orientation = StackOrientation.Horizontal,

                BackgroundColor = Color.Black,

                Children = { viewLayoutImage, viewLayoutItem }

            };

 

            View = viewLayout;

        }

    }

}

ThirdPage.cs の書き換え

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

 

using Xamarin.Forms;

 

namespace MasterDetailPage04

{

    public partial class ThirdPage : ContentPage

    {

        public ThirdPage()

        {

            Title = "花火撮影タイミング";

 

            Label homeLabel = new Label

            {

                Text = "花火撮影タイミング",

                FontSize = 40

            };

 

            var stackLayout = new StackLayout

            {

                Children = { homeLabel }

            };

 

            Content = stackLayout;

        }

    }

}

App.cs の書き換え

App.cs

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

 

using Xamarin.Forms;

 

namespace MasterDetailPage04

{

    public class App : Application

    {

        public App()

        {

            // MasterDetailPageを継承したクラスを生成してMainPageとする

            MainPage = new MyMasterDetailPage();

        }       

    }

}

 

目 次