[Xamarin][CrossPlatform][Control] AbsoluteLayout

前回のStackLayoutは、コントロールを積み上げて配置するため、任意の位置に配置することはできませんでした。

今回紹介するAbsoluteLayoutを使用すると、任意の位置に任意のサイズで配置することが可能です。

早速XAMLコードを見てみましょう。

<AbsoluteLayout>
  <Label Text="左10,上20,幅300,高さ60"
    BackgroundColor="Fuchsia"
    AbsoluteLayout.LayoutBounds="10,20,300,60" />
  <Label Text="左80,上60,幅250,高さ500"
    BackgroundColor="Yellow"
    AbsoluteLayout.LayoutBounds="80,60,250,500" />
  <Label Text="左60,上180,幅200,高さ350"
    BackgroundColor="Olive"
    AbsoluteLayout.LayoutBounds="60,180,200,350" />
</AbsoluteLayout>

Absoluteコントロールの内側に配置したコントロールは、添付プロパティAbsoluteLayout.LayoutBoundsを使用できるようになります。このプロパティには「左からの位置」「上からの位置」「幅」「高さ」の4つの値をカンマで区切って指定することができます。

上記のXAMLコードの実行例を以下に示します。この例を見てもわかるとおり、自由に配置できることがわかります。

AbsoluteLayoutコントロールの使用例

 
関連記事

[Xamarin][CrossPlatform][Control] StackLayout

今回はStackLayoutコントロールについて見ていきましょう。

StackLayoutコントロールは、文字通りコントロールをスタック(積み上げ)表示するためのコントロールです。

■シンプルな使用例

もっともシンプルなStackLayoutのサンプルコードは以下の通りです。

このサンプルでは3つのLabelと1つのButtonコントロールを配置しています。コントロールは画面の上部から順に配置されていることがわかります。

上に詰まりすぎて、時刻表示部分と被っているのが残念です。

<StackLayout>
	<Label x:Name="lblMsg1" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg2" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg3" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Button Text="ABC" x:Name="btnOk"/>
</StackLayout>

StackLayoutシンプルな例

■Padding設定する

時刻部分と重ならないようにするためにはいくつか設定方法があります。

はじめにPaddingプロパティを使用してみましょう。このプロパティはStackLayout内に配置したコントロールとStackLayoutまでの余白を表します。逆の言い方をするとStackLayoutの内側に指定した値の余白ができるということです。

Padding=”30″とした場合は、上下左右全て余白が30になります。個々に設定したい場合はカンマで区切ってPadding=”左,上,右,下”のように指定します。

<StackLayout Padding="30">
	<Label x:Name="lblMsg1" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg2" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg3" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Button Text="ABC" x:Name="btnOk"/>

	<StackLayout Padding="10" BackgroundColor="Silver">
		<Label Text="Hello" BackgroundColor="Lime"/>
		<Label Text="Hello" BackgroundColor="Lime"/>
		<Label Text="Hello" BackgroundColor="Lime"/>
	</StackLayout>
</StackLayout>

Paddingの使用例

■Spacingプロパティ

Spacingプロパティを使用すると、StackLayout内に配置したコントロール間のスペースを指定することができます。

外側のStackLayoutはSpacingを30に、内包しているStackLayoutはSpacingを10に設定しています。コントロールの縦方向のスペースの違いを確認して下さい。

<StackLayout Padding="30" Spacing="30">
	<Label x:Name="lblMsg1" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg2" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Label x:Name="lblMsg3" Text="Welcome to Xamarin Forms!" BackgroundColor="Lime"/>
	<Button Text="ABC" x:Name="btnOk"/>

	<StackLayout Padding="10" Spacing="10"
			BackgroundColor="Silver">
		<Label Text="Hello" BackgroundColor="Lime"/>
		<Label Text="Hello" BackgroundColor="Lime"/>
		<Label Text="Hello" BackgroundColor="Lime"/>
	</StackLayout>
</StackLayout>

Spacingプロパティ

■Orientationプロパティ

StackLayoutは既定で垂直方向にコントロールが配置されます。

横方向に配置したい場合はOrientationプロパティにHorizontalを指定します。既定値はVerticalです。

<StackLayout Padding="30" Spacing="5" Orientation="Horizontal">
    <Label Text="Hello" BackgroundColor="Lime" HeightRequest="30"/>
    <Label Text="Hello" BackgroundColor="Lime"/>
    <Label Text="Hello" BackgroundColor="Lime"/>
</StackLayout>

Orientationプロパティ

 

 

[Xamarin][CrossPlatform][Control] ContentPage

今回から少しずつXamarin.Formsで使用可能なコントロールについて見ていきます。

Windows, MacのどちらのXamarin環境でも動作は同じものと思われます。是非参考にして下さい。

今回はContentPageについて見ていきましょう。

ContentPageはページ系コントロールの1つです。クロスプラットフォームのプロジェクトを作成すると、メインのページに配置されるので見たことがあるのではないでしょうか。

このコントロールは主にシングルページを表すためのもので、コントロールを1つだけ配置することができます。コンテナコントロールを使用することで複数のコントロールを配置することができます。

以下にStackLayoutを配置して、その中に LabelとButtonを配置する例を示します。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XamSample" x:Class="XamSample.XamSamplePage">
	<StackLayout Spacing="20" Padding="20"
			VerticalOptions="Center" Orientation="Horizontal">
		<Label x:Name="lblMsg" Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
		<Button Text="ABC" x:Name="btnOk"/>
	</StackLayout>
</ContentPage>

実行結果を以下に示します。

ContentPage