2016年

6月

06日

Xamarin.Froms  StackLayout レイアウト Children複数設定

StackLayout レイアウト Children複数設定についてメモしておきます。

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

using Xamarin.Forms;

namespace StackLayout04
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            //iPhoneにおいて、ステータスバーとの重なりを防ぐためパディングを調整する
            Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

            // 縦並べ
            StackLayout stackLayout = new StackLayout
            {
                Spacing = 0,
                // 縦並べ
                VerticalOptions = LayoutOptions.FillAndExpand,
                Children = {
                    new Label {
                        Text = "Start 左",
                        FontSize = 32,
                        BackgroundColor = Color.Red,
                        HorizontalOptions = LayoutOptions.Start,
                    },

                    new Label {
                        Text = "中央",
                        FontSize = 32,
                        BackgroundColor = Color.Red,
                        HorizontalOptions = LayoutOptions.Center
                    },

                    new Label {
                        Text = "End 右",
                        FontSize = 32,
                        BackgroundColor = Color.Red,
                        HorizontalOptions = LayoutOptions.End
                    },

                }

            };

            // 中心並べ
            StackLayout stackLayoutCenter = new StackLayout
            {
                Spacing = 0,
                // 縦並び均等中央
                VerticalOptions = LayoutOptions.FillAndExpand,
                Children = {
                    new Label {
                        Text = "↑↓縦並び均等中央",
                        FontSize = 32,
                        XAlign = TextAlignment.Center,
                        BackgroundColor = Color.Red,
                        // 横並び中央
                        //HorizontalOptions = LayoutOptions.Center
                    },
                }
            };

            // 横一列並べ
            StackLayout stackLayoutHorizontal = new StackLayout
            {
                Spacing = 0,
                // 横一列並べ
                Orientation = StackOrientation.Horizontal,
                Children = {
                    new Label {
                        Text = "Start 左",
                        FontSize = 32,
                        BackgroundColor = Color.Blue
                    },

                    new Label {
                        Text = "Center",
                        FontSize = 32,
                        BackgroundColor = Color.Blue,
                        HorizontalOptions = LayoutOptions.CenterAndExpand
                    },

                    new Label {
                        Text = "End 右",
                        FontSize = 32,
                        BackgroundColor = Color.Blue
                    },

                }
            };

            // 横一列並べ
            StackLayout stackLayoutHorizontal01 = new StackLayout
            {
                Spacing = 15,
                // 横一列並べ
                Orientation = StackOrientation.Horizontal,
                Children = {
                    new Label {
                        Text = "Start 左",
                        FontSize = 22,
                        WidthRequest = 90,
                        XAlign = TextAlignment.Center,
                        BackgroundColor = Color.Blue
                    },

                    new Label {
                        Text = "中央1",
                        FontSize = 22,
                        WidthRequest = 90,
                        XAlign = TextAlignment.Center,
                        BackgroundColor = Color.Blue,
                        //HorizontalOptions = LayoutOptions.CenterAndExpand
                    },

                    new Label {
                        Text = "中央2",
                        FontSize = 22,
                        WidthRequest = 90,
                        XAlign = TextAlignment.Center,
                        BackgroundColor = Color.Blue,
                        //HorizontalOptions = LayoutOptions.CenterAndExpand
                    },

                    new Label {
                        Text = "End 右",
                        FontSize = 22,
                        WidthRequest = 90,
                        XAlign = TextAlignment.Center,
                        BackgroundColor = Color.Blue
                    },

                }
            };

            this.Content = new StackLayout
            {
                Children =
                {
                    // 上 縦並べ
                    stackLayout,
                    // 中心並べ
                    stackLayoutCenter,
                    // 下 横一列並べ
                    stackLayoutHorizontal,
                    // 下 横一列並べ
                    stackLayoutHorizontal01
                }
            };
        }
    }
}

 

目 次