コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
/// <summary>
/// 左側のメニューページクラスです。
/// </summary>
public class MenuPage : ContentPage
{
public ListView Menu { get; set; }
public MenuPage()
{
Icon = "menu.png";
Title = "Menu"; // Icon を指定しても Title プロパティは必須項目です。
BackgroundColor = Color.FromHex("dce8ef");
// ListView 設定
Menu = new MenuListView();
var menuLabel = new ContentView
{
Padding = new Thickness(10, 36, 0, 5),
Content = new Label
{
TextColor = Color.FromHex("333"),
Text = "MENU",
FontSize = 18,
}
};
// タイトルの menuLabel と ListView を並べています。
var layout = new StackLayout
{
Spacing = 0,
VerticalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(menuLabel);
layout.Children.Add(Menu);
Content = layout;
}
}
/// <summary>
/// ListView を継承したクラスです。ItemsSource で List<MenuItem>、ItemTemplate で ImageCell を使用しています。
/// </summary>
public class MenuListView : ListView
{
public MenuListView()
{
// ListView の設定
List<MenuItem> data = new MenuListData();
ItemsSource = data;
VerticalOptions = LayoutOptions.FillAndExpand;
BackgroundColor = Color.Transparent;
// ImageCellをバインド
var cell = new DataTemplate(typeof(ImageCell));
cell.SetBinding(TextCell.TextProperty, "Title");
cell.SetBinding(ImageCell.ImageSourceProperty, "IconSource");
ItemTemplate = cell;
}
}
/// <summary>
/// ListView のデータ用のクラスです。TargetTypeに遷移先ページを指定します。
/// </summary>
public class MenuItem
{
//メニューに表示される題名をセットします。
public string Title { get; set; }
//アイコンファイルを指定します。
//Androidは \アプリ名.Droid\Resources\drawableフォルダの画像ファイルを指定します。
//iOSは \アプリ名.iOS\Resourcesフォルダの画像ファイルを指定します。
public string IconSource { get; set; }
// この Type で移動先のページクラスを指定しています。
public Type TargetType { get; set; }
}
/// <summary>
/// ListView のデータクラスです。
/// </summary>
public class MenuListData : List<MenuItem>
{
public MenuListData()
{
this.Add(new MenuItem()
{
Title = "TopPage",
IconSource = "top40.png",
TargetType = typeof(DetailPage) //Detailに設定するContentPage名を入力します。
});
}
}
<? xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns = "http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:view="clr-namespace:アプリ名;assembly=アプリ名"
x:Class="アプリ名.StartPage"
Title="アプリ名"
NavigationPage.TitleIcon="icon.png">
<!--以下のようにxamlでMenuPageを設定することもできます。-->
<!--<MasterDetailPage.Master>
<view:MenuPage />
</MasterDetailPage.Master>-->
</MasterDetailPage>
public partial class StartPage : MasterDetailPage
{
public NavigationPage NaviPage = null;
public StartPage() : base()
{
InitializeComponent();
//Menuページでクリックしたページに遷移できるようにイベント設定
var menuPage = new MenuPage();
menuPage.Menu.ItemSelected += (sender, e) => NavigateTo(e.SelectedItem as MenuItem);
//初回の親子関係を設定する
MasterBehavior = MasterBehavior.Popover;
this.Master = new アプリ名.MenuPage();
this.NaviPage = new NavigationPage(new アプリ名.DetailPage());
this.Detail = this.NaviPage;
}
void NavigateTo(MenuItem menu)
{
//Detailページを切り替えます
Page nextPage= (Page)Activator.CreateInstance(menu.TargetType);
this.NaviPage.Navigation.PushAsync(nextPage);
this.IsPresented = false;
}
}
public class App : Application
{
public App()
{
MainPage = new アプリ名.StartPage();
}
}
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。