マージンでのプロパティの順序


218

XAMLにそのような文字列がある場合:

Storyboard.TargetProperty="Margin" From="1,2,3,4" To="0,0,0,0"

上下左右とは何ですか?1-右2-上3-左4-下

そうですか?


1
WPFマージン順序を検索したときの2番目の結果、stackoverflow.com / questions / 520422 /…。左上から右下
ルカゾイド


@PapaJohn @amit jha提供されたリンクをより具体的にするにはXAML Values、そのリンクのマージンのタイトルが付いたセクションを参照してください。
ナム

回答:


403
Margin="1,2,3,4"
  1. 左、
  2. 上、
  3. 正しい、

次のように2つのサイズだけを指定することもできます。

Margin="1,2"
  1. 左右
  2. 上と下

最後に、単一のサイズを指定できます。

Margin="1"
  1. すべての側面に使用

順序はWinFormsと同じです。


5
LTRBは覚えやすい短い表記法です。
2014年

44
注:これは、htmlのcss順序(上、右、下、左)とは異なる順序です。
Ruskin

7
CSSとは異なる何かを採用することにした理由について誰かが洞察を持っていますか?
Charles Clayton

5
@crclayton-私が書いたように; 順序はWinFormsと同じです。WinFormsはWPFの自然な前身なので、ソフトウェア(開発者)はWinFormsからWPFにアップグレードします。
エルノ2015年

30
いかがですか。WPFは西側から始まります。Netscapeは北から始まりますか?そして、明らかに両方とも時計回りです。
マーティンカポディッチ2016年

33

3つのユニークな状況があります。

  • 4つの数字、例えばMargin="a,b,c,d"
  • 2つの数字、例えばMargin="a,b"
  • 1つの番号、例えばMargin="a"

4つの数字

存在する場合は4つの数字、次には、そのlefttoprightbottom(中央左マージンから開始し右回り円)。最初の番号は常に「WPF」のような「西」です:

<object Margin="left,top,right,bottom"/>

例:使用するMargin="10,20,30,40"と、以下が生成されます。

ここに画像の説明を入力してください

2数字

ある場合2つの数字は、最初は左右の余白の厚さであり、第二は、トップ&ボトムマージン厚さです。最初の番号は常に「WPF」のような「西」です:

<object Margin="a,b"/> // Equivalent to Margin="a,b,a,b".

例:を使用するMargin="10,30"場合、左と右のマージンは両方とも10で、上と下のマージンは両方とも30です。

ここに画像の説明を入力してください

1番号

数値1つある場合は、その数値が繰り返されます(基本的には境界線の太さ)。

<object Margin="a"/> // Equivalent to Margin="a,a,a,a".

例:使用するMargin="20"と、以下が生成されます。

ここに画像の説明を入力してください

2020-05-27の更新

100を超える画面を持つ過去5年間、大規模なWPFアプリケーションに取り組んできました。5つのWPF / C#/ Java開発者のチームの一部。最終的には、1つの数値(境界線の太さ)または4つの数値のいずれかを使用して解決しました。私たちは決して2を使用しません。これは一貫しており、開発時の認知負荷を軽減するための良い方法のようです。


ルール:

すべての幅の数値は左側から始まり(「WPF」のような「西」)、時計回りに進みます(2つの数値の場合、時計回りに2回だけ進み、残りをミラーリングします)。


1
「2つの数値がある場合、最初の数値は左マージンと右マージンの厚さです」しかし、この例では、最初の数値は30であり、最終的には上下のマージンになります。
Peter Bruins

21

@MartinCapodiciのコメントが素晴らしいからといって、可視性を与えるための回答としてここに書きます。

すべて時計回り:

  • W PF start W est(左->上->右->下)
  • N etscape(すなわちCSS)を開始Nをオース(トップ>右>ボトム>左)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.