01日 6月 2016

Xamarin.Froms CarouselPage スワイプページ

スワイプによって複数のページをスライドすることができるページです。

Android Windows Phone エミレーター表示

ファイル --> 新規作成 --> プロジェクト(P)... --> Cross-Platform --> Xamarin-Forms で作成

CarouselPage01

HomePage.cs 追加

HomePage.cs の書き換え

// CarouselPageクラスを継承
public class HomePage : CarouselPage

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;

using Xamarin.Forms;

namespace CarouselPage01
{
// CarouselPageクラスを継承
public class HomePage : CarouselPage
{
public HomePage()
{
Children.Add(new BluePage());
Children.Add(new RedPage());
Children.Add(new YellowPage());
}
}
}

BluePage.cs,RedPage.cs,YellowPage.csを追加

BluePage.cs の書き換え

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace CarouselPage01
{
public partial class BluePage : ContentPage
{
public BluePage()
{
BackgroundColor = Color.Blue;

var label1 = new Label
{
FontSize = 40,
TextColor = Color.White,
//ビューの中央に配置
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Text = string.Format("Page1 Color.Blue")
};
Content = label1;//ラベルのみを配置する
}
}
}

RedPage.cs の書き換え

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace CarouselPage01
{
public partial class RedPage : ContentPage
{
public RedPage()
{
BackgroundColor = Color.Red;

var label1 = new Label
{
FontSize = 40,
TextColor = Color.White,
//ビューの中央に配置
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Text = string.Format("Page2 Color.Red")
};
Content = label1;//ラベルのみを配置する
}
}
}

YellowPage.cs の書き換え

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace CarouselPage01
{
public partial class YellowPage : ContentPage
{
public YellowPage()
{
BackgroundColor = Color.Yellow;

var label1 = new Label
{
FontSize = 40,
TextColor = Color.Blue,
//ビューの中央に配置
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
Text = string.Format("Page3 Color.Yellow")
};
Content = label1;//ラベルのみを配置する
}
}
}

App.cs の書き換え

App.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace CarouselPage01
{
public class App : Application
{
public App()
{
// The root page of your application
MainPage = new HomePage();
}

}
}