少数の人々はそれを使用するので、私は、比較的競合WPFとしてスタートしました。申請書には、違いは何な感じとWinフォームすることができます。データ駆動型UI -私は私のインストラクターに非常に感謝し、間違っていた。しかし、私は、「WPFの素人の言語を」タイを押し込んだお勧めします、私は、WPFの魅力を学びました。
だから、とても良いフレームが、私はそうチュートリアルのほとんどは10年前の映像であることを、WPFの開発者は非常に少ない知って、書き留めてみたかったです。私の記録ではなく、本当にWPF、気持ち「のない奇妙な」のようなもののようである何のため。
A、UIレイアウト
言って行く：「人々は衣服の馬の鞍に依存している、」
それはどういう意味ですか？それは非常に精神、良い服を着た人を意味します。馬の鞍に重点を準備し、それは、チュンメイ非常に特別になります。この手段は何も米国は、人体のイメージに大きな影響を持っていません。「Rengui誠司」から、
我々は、WPFへの導入でそれを置くので
WPFは、専用のユーザインタフェース技術として、機能的なレイアウトは、その中核機能の一つです。ユーザーフレンドリーなインターフェースと優れたユーザーエクスペリエンスは、うまく設計されたレイアウトと不可分です。
WPFデザイナーが最大の部分は、レイアウトとアニメーションの両方で、レイアウトは、静的、動的なアニメーションであるワークロードこの移動のソフトウェア機能と対話するとき、ユーザが生成したユーザ経験が感じられます。
言い換えれば、レイアウトは、WPFの服です！
第二に、コントロールは
、「私は、彼は古いロマンチックなプラグ不足の投票を古いキャリアカモメ水依存掛けています。」
野生動物や野生のカモメの水に依存し、分離することができないことを意味することを
WPFでやってそう？ページレイアウト、ディスプレイ。それは、一つの制御で構成されています。WPFコントロールは、それらが美しい個（レイアウト）の鮮明な画像を形成し、環境の生存と不可分です。
あなたはこれらの要素のレイアウトを学ぶために開始する前に、我々は我々が使用する柔軟でなければならない、各要素のレイアウトは独自の特性を持って知っている必要があります。合理的な試合であることを全力をやって控えるしないでください。
（環境のようなだけで、合理的な試合になるために、それ以外の場合は米「行動への「生物学的侵略」」獲得何も損失があるだろうが、生態環境への負担を増加させた。この損傷を）
1、分類コントロールは
大まかに言えば、私たちは、ほとんどのコントロールを扱う毎日の仕事、すなわち6つのカテゴリー、より少ないものではありません。
図1に示すように、コントロールのレイアウト：複数の制御を受け、またはネストされた他のレイアウトを制御することができ、そのように組織UIコントロールのために配置：のStackPanel、グリッド、ドック、WrapPanel ,,キャンバス;
2、制御内容：制御のみ他方を収容することができ、ボタン、ウィンドウ：などのコンテンツとして又はレイアウト制御
などのコンテンツ制御の等価が、タイトルを追加することができ、：グループボックス、のTabItem; 3、タイトルコンテンツ制御
4、エントリー制御：データを表示します一般に列データのこの同じタイプ。リストボックス、コンボボックスとして、
表題エントリ・コントロールと5、次のような制御エントリの対応するものに加えてタイトル表示領域、：ツリービューアイテム、のMenuItem、しばしば階層データを表示するために使用される、
図6に示すように、特別なコンテンツ制御：そのようなテキストボックスの受信ストリング、TeztBlockを自由に制御受信テキスト形式、画像受信画像データの種類このような......比較的独立制御することができます。
このような分類はない理由については、実際には、我々は理解し、それを感じるようにする必要があります。それはあなたが私を見て、のようにそれを見て、外にツールバーからドラッグ、ではありません。....................................の死「とは何あなたは、知らないのか？」
良い、私たちはあまり詳細にこれらのコントロールをしない、我々はコントロールのレイアウトを紹介し、私は他のプロパティは、次を参照してくださいことができると信じて：
WPF基本的なコントロールを使用紹介：blog.csdn.net/niewq/artic ...
第三に、コントロールのレイアウトが
良く、最終的に我々は注目に来ました。WPFは、5レイアウトを提供してくれ、その特性が異なっている、お互いの中にネストすることができ、私たちはそれについて知ってみましょう。
図1に示すように、グリッド：リストレイアウト
2のStackPanel：スタックパネルレイアウト
3、WrapPanel：フローレイアウトパネル;（要素が水平に整列された場合、コンテンツは、ラップの幅を超える要素垂直配向は、コンテンツが高さ、ラップカラム超える場合）
4、 DockPanel：ドッキングパネル
5、キャンバス：パネル座標
1、グリッドリストレイアウト
グリッドとして訳語「グリッド、グリッド、グリッド、」
はい、それは1つずつに私達のページのように、グリッドのようなものです。
私たちは、2のTextBlockと2つのTextBoxの形に配置されたスタイルのログインウィンドウを達成したいのですが、イタリアを入力しない、彼らは一緒に重畳されています。
なぜそれが一緒に重なっていますか？
我々はグリッドにこのコンテナ関連の調整をしなかったので、彼は今のラインである「ビッググリッド」。各コースの重複では、プロパティがない限りMaginが、もちろん、これは私たちが達成したい効果ではありません設定します。
そこで、我々はによって設定しました
列<Grid.ColumnDefinitions> </ Grid.ColumnDefinitions>
行<Grid.RowDefinitions> </ Grid.RowDefinitions>
「分割グリッドは、」
我々は我々が判断するためにColumnDefinitionsのRowDefinitionsノードとノードを追加することができ、「グリッドは、複数のグリッドに分割されています。」
示されるように、グリッドは、4つに分割されています。
デザインウィンドウで見ることによって、我々は見つけるでしょう、グリッド線は4となって分類されます。
ああ？ああ、なぜ我々はそれオーバーラップも制御しませんか？我々は、格子は、その後、ダウンロードされ、それらを設定する必要はありませんので、私達は着手しました。
位置、マージの決定
コンテナは、当社のグリッドレイアウトコンテナである、追加のプロパティを追加します。
行場所：Grid.Row = "0"
の列場所：Grid.Column = "0"
デフォルトは、このように私たちの位置を調整するために、オーバーラップを生じさせ、0の値を設定されていません。
まあ、すべてが正常に戻っている、ボタンの増加は、どのボタンにそれをログインすることはできません！
設定により
細胞株を組み合わせた：Grid.RowSpan =「1」
セルの列を合わせた：Grid.ColumnSpan =「1」
1ビットのデフォルト値は、いくつかのいくつかの書き込みをマージします。
軽微な変更の後、私たちのインターフェースは、このようなになっています：
金額......少し醜い、私たちは、調整するためのいくつかの属性を追加し
、幅と高さを設定し
、私たちは広いColumnDefinition RowDefinitionの幅を設定し、高く設定する高さに
幅と高さのピクセルをサポートし、割合、および適応
ピクセルは、デジタル直接によって表すことができる
割合：単位で行う*
オートビット設定値：適応
まあ、私たちの視野を調整、のは、上記の知識を適用してみましょう：
まとめ
さて、私たちは、上記の幅と高さを要約：
我々グリッドスケール設定1により、行の最初の列：3（3我々は、フォームのサイズを引いたとき）、その大きさは比例変化していることがわかります。
第二に、一定の高さの両方を設定するグリッドの行は、我々は、彼らが、フォームの高さを変更する方法に関係なく一定であることがわかります。
最後の行は、適応を設定し、私は故意にボタン100の高さを設定し、我々はまた、テーブルの最後の行を見ることができ、あなたが知ることができる、100であるが、自動適応からの内容に基づいています。
2は、StackPanelのスタックパネルの
「スタック」二つの言葉に皆が「キュー」内のコンテナスタックパネルは、我々はウィンドウのグリッド移調のStackPanel下に置くかのように、それを体験しに来て、それに慣れていません。
セット方向
我々は、彼らが水平方向に、一つずつ、同じ行を見つけ、ボタンのStackPanel内部の多くを置きます。あなたはそれ好きではない場合は、もちろん、あなたはそれの方向を変えることができます！
向きを設定することにより
水平配向：オリエンテーション=「水平」
垂直配向：オリエンテーション=「垂直」（デフォルト）
内部要素自体は、その位置合わせを選択することができます
たHorizontalAlignment =センター、右の「左」
VerticalAlignmentを=「トップ」ボトム、センター、ストレッチを
図3に示すように、レイアウトフローWrapPanel
要素の内容が高さ、ラップカラムを超えたときに垂直配向）;コンテンツ幅、ラップを超える要素レベルが、場合整列
は、上記のように見えるかもしれないが、実際には、同じではありません。StackPanel内のサブ要素の数は、フォームのオーバーフローの幅（高さ）を超えると、自動的にラップレイアウト流れます。動的データを生成するために使用されます。
これは、詳細に記載されていない、そして上記特性は同じです。
4は、DockPanelレイアウトドック
、友人を開発完了winfromをDocl属性それを知っているし、私たちのドックのレイアウトは、我々はそれを実践しなければならない理由、です。
コントロールDockPanelコンテナは、それは追加の属性DockPanel.Dockが追加されます
DockPanel.Dock =「トップ」
DockPanel.Dock =「ボトム」
DockPanel.Dock =「左」
DockPanel.Dock =「右」
彼らは、コントロールが異なる幅と高さ（またはサイズ）を持って、順番に設定されることに注意してください、最後にドッキングされたコントロールに残りのすべてのインターフェイスのアカウントのサイズをデフォルトに、上下に駐車しています
左右をよく見、あなたは私が注目アイテムは、エリアをドッキング新しいコントロールは、すべての残りのページを占めて言ったことを知っていますよ。
図5は、キャンバスレイアウト座標
さて、これは本当にWinフォームレイアウトに相当し、そしてコントロールの位置を決定するための座標を設定します。
Canvasコンテナ内のコントロール、それは追加のプロパティを追加します
https://www.jianshu.com/p/577f1d15c9e0
http://www.jianshu.com/u/fa86f3cdaa11
Canvas.Top =「20」：ウィンドウの上部から
左側のウィンドウから：Canvas.Left =「100」
ウィンドウの下から：Canvas.Bottom =「20」
ウィンドウの右から：Canvas.Right =「0」
第四に、総合的なミニケース
読んだことがある場合は、我々はそれを少しケースを行います。
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.RowSpan="2" Grid.Column="0">
<Button Height="50">新建StackPanel</Button>
<Button Height="50">保存StackPanel</Button>
<Button Height="50">增加StackPanel</Button>
<Button Height="50">导入StackPanel</Button>
<Button Height="50">导出StackPanel</Button>
<Button Height="50">关闭StackPanel</Button>
</StackPanel>
<DockPanel Grid.Row="0" Grid.Column="1">
<TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center">我是DockPanel</TextBlock>
<WrapPanel>
<Button Width="200">WrapPanel</Button>
<Button Width="200">WrapPanel</Button>
<Button Width="200">WrapPanel</Button>
<Button Width="200">放不下啦WrapPanel</Button>
<Button Width="200">WrapPanel</Button>
</WrapPanel>
</DockPanel>
<Canvas Grid.Row="1" Grid.Column="1">
<TextBlock Canvas.Top="100" Canvas.Left="100">Canvas账号：</TextBlock>
<TextBox Canvas.Top="100" Canvas.Left="200">Canvas请输入账号：</TextBox>
<TextBlock Canvas.Top="130" Canvas.Left="100">Canvas密码：</TextBlock>
<TextBox Canvas.Top="130" Canvas.Left="200">Canvas请输入密码：</TextBox>
</Canvas>
</Grid>
