2016年

5月

24日

Xamarin.Froms  TabbedPage  TopPage +  ListView + Page

シンプルなTabbedPageです。

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

Android Windows Phone エミレーター表示


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

TabbedPage01

ListItem.cs ListItemCell.cs サブクラスの追加

Page1 Page2 Page3 NextPage1の追加

Page1.xaml.csの書き換え

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace TabbedPage01
{
    public partial class Page1 : ContentPage
    {
        public Page1(string title)
        {
            InitializeComponent();

            Title = "Top";

            Content = new Image
            {
                Source = ImageSource.FromResource("TabbedPage01.Images.classmethod_Top.png"),
                // アスペクトを設定
                Aspect = Aspect.AspectFit
            };
        }
    }
}

ListItem.cs サブクラスの記述

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;

using Xamarin.Forms;

namespace TabbedPage01
{
    public class ListItem
    {
        public string Source { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public int Row { get; set; }
    }
}

Page2.xaml.cs の追加

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace TabbedPage01
{
    public partial class Page2 : ContentPage
    {
        public Page2(string title)
        {
            Title = "花火一覧";

            var listView = new ListView();

            // Source名:Android「-」「@2x」不可
            // ListItemサブクラスを参照
            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;
            // ListItemCellサブクラスを参照
            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);
        }
    }
}

ListItemCell.cs の追加

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;

using Xamarin.Forms;

namespace TabbedPage01
{
    public 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;
        }
    }
}

NextPage1.xaml.cs の書き換え

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace TabbedPage01
{
    public partial class NextPage1 : ContentPage
    {
        public NextPage1(int Row)
        {
            InitializeComponent();

            //RowLabel.Text = Row.ToString();
            System.Diagnostics.Debug.WriteLine("行数" + Row.ToString() + "行");

            // ListItemサブクラスを参照
            var items = 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}
            };

            TitleLabel.Text = items[Row].Title;
        }
    }
}

NextPage1.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"
             x:Class="TabbedPage01.NextPage1">

  <!-- 遷移先 名前ラベル -->
  <Label x:Name="TitleLabel"
         TextColor="White"
         FontSize="40"/>
 
</ContentPage>

Page3.xaml.cs の書き換え

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace TabbedPage01
{
    public partial class Page3 : ContentPage
    {
        public Page3(string title)
        {
            InitializeComponent();

            //タブに表示される文字列
            Title = title;
            //ラベルを生成
            var label1 = new Label
            {
                FontSize = 40,
                //ビューの中央に配置
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center,
                Text = title
            };
            Content = label1;//ラベルのみを配置する
        }
    }
}

App.cs の書き換え

App.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace TabbedPage01
{
    public class App : Application
    {
        public App()
        {
            // TabbedPageをMainPageとしてセットする
            MainPage = new TabbedPage()
            {
                Children = {
                new Page1("Top"),
                new Page2("花火一覧"),
                new Page3("タイミング")
                }
            };
        }
    }
}

 

目 次