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("タイミング")
}
};
}
}
}