2016年

6月

09日

Xamarin.Froms  ScrollView 解説ページ

テキスト、画像を配置したスクロールビューです。ScrollViewの縦サイズを設定できます。

Android Windows Phone エミレーター表示

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

ScrollView04

HomePage.cs 追加

HomePage.cs の書き換え

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

using Xamarin.Forms;

namespace ScrollView04
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            // 花火の紹介
            StackLayout stackLayout01 = new StackLayout
            {
                Spacing = 20,

                Children = {
                    new Label {
                        Text = "花火の紹介",
                        TextColor = Color.Black,
                        FontSize = 40,
                        //XAlign = TextAlignment.Center,
                        //BackgroundColor = Color.Red,
                        // 横並び中央
                        HorizontalOptions = LayoutOptions.Center
                    }
                }
            };

            // 花火の画像 Image
            StackLayout stackLayout02 = new StackLayout
            {
                // スペースを使用してレイアウトを囲む
                Padding = 10,
                // 間隔
                //Spacing = 10,               
                // 横一列並べ
                Orientation = StackOrientation.Horizontal,
                // 横並び中央
                HorizontalOptions = LayoutOptions.Center,

                Children = {
                    new Image
                    {
                        Source = ImageSource.FromResource("ScrollView04.Images.icon640x640.png"),
                        // アスペクトを設定
                        Aspect = Aspect.AspectFit,
                        // 幅設定
                        WidthRequest = 80, // 160x160 1/2サイズ 320x320 1倍
                    },

                    // スペースボックス
                    new BoxView
                    {
                        Color = Color.Silver,// 塗りつぶし色
                        WidthRequest = 25,// 横のサイズ
                    },

                    new Image
                    {
                        Source = ImageSource.FromResource("ScrollView04.Images.icon640x640.png"),
                        // アスペクトを設定
                        Aspect = Aspect.AspectFit,
                        // 幅設定
                        WidthRequest = 80,  // 180x180 1/2サイズ 360x360 1倍
                    },
                }
            };

            // 花火の解説 Editor
            StackLayout stackLayout03 = new StackLayout
            {
                Children ={
                    new Editor
                    {
                        Text = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\r\n

                                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\r\n",
                        TextColor = Color.Blue,
                        BackgroundColor = Color.Silver,
                        FontSize = 20,
                        // Read Only 読み取りのみ
                        IsEnabled = false,
                        // 幅設定
                        WidthRequest = 0,
                        // 高さ設定
                        HeightRequest = 110
                    },
                }
            };

            // 花火の解説画像 Image
            StackLayout stackLayout04 = new StackLayout
            {
                // スペースを使用してレイアウトを囲む
                Padding = 10,
                // 間隔
                //Spacing = 10,               
                // 横一列並べ
                Orientation = StackOrientation.Horizontal,
                // 横並び中央
                HorizontalOptions = LayoutOptions.Center,

                Children = {
                    new Image
                    {
                        Source = ImageSource.FromResource("ScrollView04.Images.img01.png"),
                        // アスペクトを設定
                        Aspect = Aspect.AspectFit,
                        // 幅設定
                        WidthRequest = 360, // 180x180 1/2サイズ 360x360 1倍
                    }                                       
                }
            };

            // 花火の解説 Editor
            StackLayout stackLayout05 = new StackLayout
            {
                Children ={
                    new Editor
                    {
                        Text = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\r\n

                                   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\r\n",

                        TextColor = Color.Blue,
                        BackgroundColor = Color.Silver,
                        FontSize = 20,
                        // Read Only 読み取りのみ
                        IsEnabled = false,
                        // 幅設定
                        WidthRequest = 0,
                        // 高さ設定
                        HeightRequest = 110
                    },
                }
            };

            // 花火の解説画像 Image
            StackLayout stackLayout06 = new StackLayout
            {
                // スペースを使用してレイアウトを囲む
                Padding = 10,
                // 間隔
                //Spacing = 10,               
                // 横一列並べ
                Orientation = StackOrientation.Horizontal,
                // 横並び中央
                HorizontalOptions = LayoutOptions.Center,

                Children = {
                    new Image
                    {
                        Source = ImageSource.FromResource("ScrollView04.Images.img01.png"),
                        // アスペクトを設定
                        Aspect = Aspect.AspectFit,
                        // 幅設定
                        WidthRequest = 360, // 180x180 1/2サイズ 360x360 1倍
                    }
                }
            };

            StackLayout stackLayout = new StackLayout
            {
                Children =
                {
                    // 花火の紹介
                    stackLayout01,
                    // 花火の画像
                    stackLayout02,                  
                    // 花火の解説
                    stackLayout03,
                    // 花火の解説画像
                    stackLayout04,
                    // 花火の解説
                    stackLayout05,
                     // 花火の解説画像
                    stackLayout06,
                },

                // ScrollViewの縦サイズ
                HeightRequest = 1000
            };

            ScrollView scrollView = new ScrollView
            {
                // バックグランドカラー
                BackgroundColor = Color.Silver,
                // 
                VerticalOptions = LayoutOptions.FillAndExpand,

                // スタックレイアウトの配置
                Content = stackLayout
            };

            BackgroundColor = Color.Black; //White

            // Accomodate iPhone status bar.
            this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);

            // スクロールの配置
            Content = scrollView;
        }
    }
}

App.cs の書き換え

App.cs

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

using Xamarin.Forms;

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

 

目 次