Xamarin.Forms
Xamarin.Formsでのナビゲーション
サーチ…
NavigationPageフロー
using System;
using Xamarin.Forms;
namespace NavigationApp
{
public class App : Application
{
public App()
{
MainPage = new NavigationPage(new FirstPage());
}
}
public class FirstPage : ContentPage
{
Label FirstPageLabel { get; set; } = new Label();
Button FirstPageButton { get; set; } = new Button();
public FirstPage()
{
Title = "First page";
FirstPageLabel.Text = "This is the first page";
FirstPageButton.Text = "Navigate to the second page";
FirstPageButton.Clicked += OnFirstPageButtonClicked;
var content = new StackLayout();
content.Children.Add(FirstPageLabel);
content.Children.Add(FirstPageButton);
Content = content;
}
async void OnFirstPageButtonClicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new SecondPage(), true);
}
}
public class SecondPage : ContentPage
{
Label SecondPageLabel { get; set; } = new Label();
public SecondPage()
{
Title = "Second page";
SecondPageLabel.Text = "This is the second page";
Content = SecondPageLabel;
}
}
}
XAMLを使用したNavigationPageフロー
App.xaml.csファイル(App.xamlファイルはデフォルトでスキップされます)
using Xamrin.Forms
namespace NavigationApp
{
public partial class App : Application
{
public static INavigation GlobalNavigation { get; private set; }
public App()
{
InitializeComponent();
var rootPage = new NavigationPage(new FirstPage());
GlobalNavigation = rootPage.Navigation;
MainPage = rootPage;
}
}
}
FirstPage.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="NavigationApp.FirstPage"
Title="First page">
<ContentPage.Content>
<StackLayout>
<Label
Text="This is the first page" />
<Button
Text="Click to navigate to a new page"
Clicked="GoToSecondPageButtonClicked"/>
<Button
Text="Click to open the new page as modal"
Clicked="OpenGlobalModalPageButtonClicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
場合によっては、現在のナビゲーションではなくグローバルなページで新しいページを開く必要があります。たとえば、現在のページにボトムメニューがある場合は、現在のナビゲーションで新しいページをプッシュすると表示されます。ボトムメニューやその他の現在のページのコンテンツを隠している可視コンテンツ全体にページを開く必要がある場合は、新しいページをモーダルとしてグローバルナビゲーションにプッシュする必要があります。 App.GlobalNavigation
プロパティと下の例を参照してください。
FirstPage.xaml.csファイル
using System;
using Xamarin.Forms;
namespace NavigationApp
{
public partial class FirstPage : ContentPage
{
public FirstPage()
{
InitializeComponent();
}
async void GoToSecondPageButtonClicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new SecondPage(), true);
}
async void OpenGlobalModalPageButtonClicked(object sender, EventArgs e)
{
await App.GlobalNavigation.PushModalAsync(new SecondPage(), true);
}
}
}
SecondPage.xamlファイル(xaml.csファイルはデフォルトでスキップされます)
<?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="NavigationApp.SecondPage"
Title="Second page">
<ContentPage.Content>
<Label
Text="This is the second page" />
</ContentPage.Content>
</ContentPage>
XAMLによる階層ナビゲーション
デフォルトでは、ナビゲーションパターンはページのスタックのように機能し、前のページよりも新しいページを呼び出します。これにはNavigationPageオブジェクトを使用する必要があります。
新しいページを押す
...
public class App : Application
{
public App()
{
MainPage = new NavigationPage(new Page1());
}
}
...
Page1.xaml
...
<ContentPage.Content>
<StackLayout>
<Label Text="Page 1" />
<Button Text="Go to page 2" Clicked="GoToNextPage" />
</StackLayout>
</ContentPage.Content>
...
Page1.xaml.cs
...
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
}
protected async void GoToNextPage(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page2());
}
}
...
Page2.xaml
...
<ContentPage.Content>
<StackLayout>
<Label Text="Page 2" />
<Button Text="Go to Page 3" Clicked="GoToNextPage" />
</StackLayout>
</ContentPage.Content>
...
Page2.xaml.cs
...
public partial class Page2 : ContentPage
{
public Page2()
{
InitializeComponent();
}
protected async void GoToNextPage(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page3());
}
}
...
ページのポップアップ
通常、ユーザーは戻るボタンを使用してページを返しますが、これをプログラムで制御する必要がある場合があります。そのため、 NavigationPage.PopAsync()メソッドを呼び出して前のページに戻るか、 NavigationPage.PopToRootAsync()そのような...
Page3.xaml
...
<ContentPage.Content>
<StackLayout>
<Label Text="Page 3" />
<Button Text="Go to previous page" Clicked="GoToPreviousPage" />
<Button Text="Go to beginning" Clicked="GoToStartPage" />
</StackLayout>
</ContentPage.Content>
...
Page3.xaml.cs
...
public partial class Page3 : ContentPage
{
public Page3()
{
InitializeComponent();
}
protected async void GoToPreviousPage(object sender, EventArgs e)
{
await Navigation.PopAsync();
}
protected async void GoToStartPage(object sender, EventArgs e)
{
await Navigation.PopToRootAsync();
}
}
...
XAMLによるモーダルナビゲーション
モーダルページは、次の3つの方法で作成できます。
- 全画面ページのNavigationPageオブジェクトから
- アラートと通知
- ポップアップメニューであるアクションシートの場合
全画面モード
...
// to open
await Navigation.PushModalAsync(new ModalPage());
// to close
await Navigation.PopModalAsync();
...
アラート/確認と通知
...
// alert
await DisplayAlert("Alert title", "Alert text", "Ok button text");
// confirmation
var booleanAnswer = await DisplayAlert("Confirm?", "Confirmation text", "Yes", "No");
...
アクションシート
...
var selectedOption = await DisplayActionSheet("Options", "Cancel", "Destroy", "Option 1", "Option 2", "Option 3");
...
マスター詳細ルートページ
public class App : Application
{
internal static NavigationPage NavPage;
public App ()
{
// The root page of your application
MainPage = new RootPage();
}
}
public class RootPage : MasterDetailPage
{
public RootPage()
{
var menuPage = new MenuPage();
menuPage.Menu.ItemSelected += (sender, e) => NavigateTo(e.SelectedItem as MenuItem);
Master = menuPage;
App.NavPage = new NavigationPage(new HomePage());
Detail = App.NavPage;
}
protected override async void OnAppearing()
{
base.OnAppearing();
}
void NavigateTo(MenuItem menuItem)
{
Page displayPage = (Page)Activator.CreateInstance(menuItem.TargetType);
Detail = new NavigationPage(displayPage);
IsPresented = false;
}
}
マスター詳細ナビゲーション
以下のコードは、アプリケーションがMasterDetailPageコンテキストにあるときに非同期ナビゲーションを実行する方法を示しています。
public async Task NavigateMasterDetail(Page page)
{
if (page == null)
{
return;
}
var masterDetail = App.Current.MainPage as MasterDetailPage;
if (masterDetail == null || masterDetail.Detail == null)
return;
var navigationPage = masterDetail.Detail as NavigationPage;
if (navigationPage == null)
{
masterDetail.Detail = new NavigationPage(page);
masterDetail.IsPresented = false;
return;
}
await navigationPage.Navigation.PushAsync(page);
navigationPage.Navigation.RemovePage(navigationPage.Navigation.NavigationStack[navigationPage.Navigation.NavigationStack.Count - 2]);
masterDetail.IsPresented = false;
}
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow