2016年

6月

01日

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();
        }
       
    }
}

 

目 次