横スクロールして画面遷移させる
参考 Xamarin スワイプジェスチャを利用して画面遷移する
単純なCarouselPageの作成 1
Page1をCarouselPageとしてに設定して、横スクロールでPage2に画面遷移する
(Page1およびPage2をプロジェクトに追加する）
Page1.xamlの変更
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CarouselPage02"
x:Class="CarouselPage02.Page1">
<!-- ContentPageをCarouselPageに変更する -->
<!-- xmlns:local="clr-namespace:CarouselPage02"を追加 -->
<ContentPage>
<ContentPage.Content>
<StackLayout>
<Label Text="Page1"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
<!-- 画面遷移するページの設定 -->
<local:Page2/>
</CarouselPage>
Page1.xaml.csの変更
public partial class Page1 : CarouselPage // ContentPageからCarouselPageへ変更する
{
public Page1()
{
InitializeComponent();
}
}
単純なCarouselPageの作成 2
ContentPage内にコンテンツページを指定して画面遷移する。開いた時の最初のページをPage2にする。
Page1, Page2, Page3をプロジェクトに追加する（プロジェクト名：CarouselPage03）
Page1.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="CarouselPage03.Page1">
<ContentPage.Content>
<StackLayout>
<Label Text="Page1"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
MainPageの変更
MainPage.xaml.csの基底クラスをContentPageからCarouselPageに変更する。CurrentPageページを設定して最初のページを指定する。
public partial class MainPage : CarouselPage
{
public MainPage()
{
InitializeComponent();
// 最初のページを指定
this.CurrentPage = this.Children[1];
}
}
MainPage.xamlのルート要素をCarouselPageに変更してPage1, Page2, Page3を内部に追加する（xmlns:local=”clr-namespace:CarouselPage03″を追加）
<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CarouselPage03"
x:Class="CarouselPage03.MainPage">
<local:Page1/>
<local:Page2/>
<local:Page3/>
</CarouselPage>