コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
レイアウトの設定方法２ | Xamarin.Forms
- 2017/01/14
- 19:04
前回に引き続き、レイアウトの設定方法についてご説明していきます。
前回は縦方向に揃えたレイアウトと、横方向に揃えたレイアウトをご説明いたしました。今回はその両方向に揃えるレイアウトをご説明いたします。
前提条件
・Windows10
・Visual Studio 2015 Community Update3
・Xamarin 4.2.0.719 (NuGet Xamarin.Forms 2.3.2.127)
・macOS Sierra 10.12.1 / Xcode8.1 / Xamarin.iOS 10.2.0.4
１．縦横方向に揃えたラベルの配置方法
（１）まずは横方向に３つのラベルを配置します。横方向となるように Orientation を Horizontal に設定した StackLayout を３つ用意します。
（２）その Stacklayout の中にそれぞれ３つのラベルを配置します。
（３）Orientation を Horizontal に設定した StackLayout を１つ用意し、その中に（２）で作成した StackLayout を全て配置します。
以上で横方向に３つのラベル、縦方向に３つの StackLayout が配置でき、レイアウトの設定は完了です。
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="AppName.Views.TestPageXaml">
<StackLayout Orientation="Vertical" <!--縦に表示-->
VerticalOptions="Center"
HorizontalOptions="Center" >
<StackLayout Orientation="Horizontal" <!--横に表示-->
VerticalOptions="Center"
HorizontalOptions="Center" >
<Label Text="テスト１" VerticalOptions="Center" HorizontalOptions="Center" />
<Label Text="テスト２" VerticalOptions="Center" HorizontalOptions="Center" />
<Label Text="テスト３" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Horizontal" <!--横に表示-->
VerticalOptions="Center"
HorizontalOptions="Center" >
<Label Text="テスト４" VerticalOptions="Center" HorizontalOptions="Center" />
<Label Text="テスト５" VerticalOptions="Center" HorizontalOptions="Center" />
<Label Text="テスト６" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
<StackLayout Orientation="Horizontal" <!--横に表示-->
VerticalOptions="Center"
HorizontalOptions="Center" >
<Label Text="テスト７" VerticalOptions="Center" HorizontalOptions="Center" />
<Label Text="テスト８" VerticalOptions="Center" HorizontalOptions="Center" />
<Label Text="テスト９" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</StackLayout>
</ContentPage>
C#の場合
using Xamarin.Forms;
public class TestPageCs : ContentPage
{
public TestPageCs()
{
Label label1 = new Label
{
Text = "テスト１",
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
};
Label label2 = new Label
{
Text = "テスト２",
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
};
・
・
・
Label label9 = new Label
{
Text = "テスト９",
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
};
StackLayout content1 = new StackLayout
{
Orientation = StackOrientation.Horizontal, //横に表示
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
Children = {
label1, label2, label3,
}
};
StackLayout content2 = new StackLayout
{
Orientation = StackOrientation.Horizontal, //横に表示
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
Children = {
label4, label5, label6,
}
};
StackLayout content3 = new StackLayout
{
Orientation = StackOrientation.Horizontal, //横に表示
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
Children = {
label7, label8, label9,
}
};
Content = new StackLayout
{
Orientation = StackOrientation.Vertical, //縦に表示
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
Children = {
content1,
content2,
content3,
}
};
}
}
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html
- 関連記事
-
- Exception while loading assemblies: System.IO.FileNotFoundException: Could not load assembly のエラーが出力されビルドができない件 | Xamarin.Forms
- Remoted iOS Simulator for Windows の動作要件が Visual Studio Enterprise に変更された件 | Xamarin.Forms
- レイアウトの設定方法２ | Xamarin.Forms
- レイアウトの設定方法１ | Xamarin.Forms
- Xamlページを作成する方法 | Xamarin.Forms
