iPhone iScene
lukeおじさんのページ
シンプルな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();
}
}
}
▫️参考ページ
Xamarin.FormsでListViewコントロールを使用するには？
Xamarin.Forms ページ（Formsを使用したアプリ作成の第１歩）
Xamarin.Forms expand/collapseするリスト型のビュー
Xamarin.Forms（Android）ScrollViewの中にあるListViewをスクロールさせる
コメントをお書きください