Experiments Never Fail

Xamarin.Forms XAML で、Margin の上下左右の順番

Xamarin.Forms の XAML で マージン(Margin)やパディング(Padding)を書くとき、上下左右の順番がわからなくなるのでメモ。

XAML に Margin や Padding (いわゆる Thickness)をリテラルで書くときの順番は、 「left, top, right, bottom」 だ。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MarginTest"
x:Class="MarginTest.MarginTestPage"
BackgroundColor="Silver">

<BoxView
Margin="10, 20, 30, 40"
BackgroundColor="Red"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />

</ContentPage>

「"左" をスタートに時計まわり」 と覚えておきたい。

Thickness のコンストラクタの引数を見てもよい。

// syntax
public Thickness (Double left, Double top, Double right, Double bottom)

ちなみに css の margin: 10px 20px 30px 40px; は、 ”上” をスタートに時計まわり だ、紛らわしい。

published at tags: Xamarin Xamarin.Forms XAML