WPFシリーズ#2:新しいレイアウトモデル。

私にとって最も興味深い点をいくつか強調してみます。



だからすぐに!







1.レイアウトとは(レイアウト)?

レイアウトは、本質的にユーザーインターフェイスの組織モデルです。



2. WPFのレイアウトの欠点は何ですか?

WinFormsで最も単純なフォームを作成するのにどれくらいの時間を費やしますか?







使用済み:2分

WPFで最も単純なフォームを作成するのにどれくらいの時間を費やしますか?







支出額:



要素の配置と作成には3分、要素の作成には4分

グリッドの列と行を使用して、不要なプロパティを削除します。 など



合計:スケーリングに応じて、4分または7分。



WPFコード:



<Window x:Class= "SimpleAppV2.Window1"

xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"

Title= "" Height= "300" Width= "568" WindowStyle= "ToolWindow" >



<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width= "100" ></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>



<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

<RowDefinition Height= "40" ></RowDefinition>

</Grid.RowDefinitions>



<Label Grid.Column= "0" Grid.Row= "0" HorizontalAlignment= "Center" VerticalAlignment= "Top" ></Label>

<TextBox Grid.Column= "1" Grid.Row= "0" BorderThickness= "2" BorderBrush= "Silver" />

<Button Grid.Column= "1" Grid.Row= "1" ></Button>

</Grid>

</Window>










これらを2分と呼びます-最小しきい値。



WPFのUI組織の主な惨事は、一見些細な時間です。

数時間以上作成できますが、

しかし、私にとっては、最小しきい値は2倍になりました。



Windows Formsモデルとは異なり、UIについて「先に考える」必要があります。

最も単純なユーティリティでも。



したがって、Rich UIを必要としない単純なプログラム、

WinFormsで記述する方が適切です。



また、WPFアプリケーションが

Webに移植できます。



私は人々にそれがすべて可能であると言っていないことでここで非難されました

Code Behindから行います...はい、もちろんできます:



using System.ComponentModel;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;



namespace SimpleAppV2

{

class GeneratingSampleWindow

{

///<summary>

/// Generatings the sample window.

///</summary>

public static void Generate()

{

Grid grid = new Grid();

Window window = new Window

{

WindowStyle = WindowStyle.ToolWindow,

Height = 300,

Width = 568,

Title = "" ,

Content = grid

};



ColumnDefinitioncolumnDefinition = new ColumnDefinition { Width = new GridLength(100) };

RowDefinitionrowDefinition = new RowDefinition { Height = new GridLength(40) };



grid.ColumnDefinitions.Add(columnDefinition);

grid.ColumnDefinitions.Add(newColumnDefinition());

grid.RowDefinitions.Add(newRowDefinition());

grid.RowDefinitions.Add(rowDefinition);



Label label = new Label

{

Content = "" ,

HorizontalAlignment = HorizontalAlignment.Center,

VerticalAlignment = VerticalAlignment.Top

};



TextBox textBox = new TextBox

{

BorderThickness = new Thickness(2),

BorderBrush = (Brush)TypeDescriptor.GetConverter( typeof (Brush)).ConvertFromInvariantString( "Silver" )

};



Button button = new Button {Content= "" };

SetGridColumnAndRow(grid, label, 0, 0);

SetGridColumnAndRow(grid, textBox, 1, 0);

SetGridColumnAndRow(grid, button, 1, 1);

window.ShowDialog();

}



///<summary>

/// Sets the grid column and row.

///</summary>

///<param name="grid">The grid.</param>

///<param name="element">The element.</param>

///<param name="Column">The column.</param>

///<param name="Row">The row.</param>

public static void SetGridColumnAndRow(Grid grid, UIElement element, int Column, int Row)

{

grid.Children.Add(element);

Grid.SetColumn(element, Column);

Grid.SetRow(element, Row);

}

}

}










3. WPFのレイアウトの利点は何ですか?



1)論理ツリーのプロパティの継承。

プロパティはルート要素から自動的に継承されます。



< Page



xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" >

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<StackPanel Grid.Column= "0" Background= "Red" >

<TextBlock>Hello World 1</TextBlock>

<StackPanel>

<TextBlock>Hello World 4</TextBlock>

</StackPanel>

</StackPanel>

<StackPanel Grid.Column= "1" Background= "Silver" >

<TextBlock>Hello World 1</TextBlock>

<StackPanel>

<TextBlock>Hello World 4</TextBlock>

</StackPanel>

</StackPanel>

</Grid>

</ Page >












だから、私たちは1つのパネルの要素に背面があると言っただけです

赤と他の銀:







2)スケーラブルなコンテンツ:



ローカライズでは、テキストが制御不能になってもエラーは発生しません。

現在、DPIの値は気にせず、多くの場合、ユーザーのモニターの解像度も気にしません。

私たちのアプリケーションは、15 'および52'プラズマの両方で同じようによく見えます。



3)要素のネストは、非標準の構築に利点をもたらします

コントロールとコンテンツコントロール。



4)スタイルとリソースを使用することにより、プロパティの重複を回避できます。

5)便利なバインディング。



バインドとは バインディング-バインディング。



データとオブジェクトをバインドできる対象と方法については、こちらをご覧ください。

habrahabr.ru/blogs/net/41108、habrahabr.ru / blogs / net / 41481



なぜ便利なのですか?



a)コードビハインドで説明する必要はありません。

b)ところで、あなたはそれを実証することができます:



< Page

xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" >



<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<StackPanel Grid.Column= "0" Background= "Red" >

<TextBlock>Hello World 1</TextBlock>

<StackPanel>

<TextBlock>Hello World 4</TextBlock>

</StackPanel>

</StackPanel>

<StackPanel Grid.Column= "1" Background= "Silver" >

<TextBlock>Hello World 1</TextBlock>

<StackPanel>

<TextBlock>Hello World 4</TextBlock>

</StackPanel>

</StackPanel>

</Grid>

</ Page >












またはこれ:



< Page

xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" >



<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<StackPanel Grid.Column= "0" Background= "Red" >

<TextBlock>Hello World 1</TextBlock>

<StackPanel>

<TextBlock>Hello World 4</TextBlock>

</StackPanel>

</StackPanel>

<StackPanel Grid.Column= "1" Background= "Silver" >

<TextBlock>Hello World 1</TextBlock>

<StackPanel>

<TextBlock>Hello World 4</TextBlock>

</StackPanel>

</StackPanel>

</Grid>

</ Page >












またはこれ:



< Page

xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" >



<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<StackPanel Grid.Column= "0" Background= "Red" >

<TextBlock>Hello World 1</TextBlock>

<StackPanel>

<TextBlock>Hello World 4</TextBlock>

</StackPanel>

</StackPanel>

<StackPanel Grid.Column= "1" Background= "Silver" >

<TextBlock>Hello World 1</TextBlock>

<StackPanel>

<TextBlock>Hello World 4</TextBlock>

</StackPanel>

</StackPanel>

</Grid>

</ Page >












6)ウィンドウ要素を制御するコードは、実際に転送できます。

完全にウィンドウレイアウト自体に。



7)Webでの簡単な移植性(XBAP / WPF / E(Silverlight))。



8)簡単なアップグレード。



9)コード/デザインの分離。UIデザイナーで作業できます。

そのため、プログラマーが処理しても劣化しない。



4.新しいレイアウトモデルは何をもたらし、何をもたらしますか?



1)ルーティング可能なイベントとコマンドの新しいシステム。

msdn.microsoft.com/en-us/magazine/cc785480.aspx



2)簡単で便利なアニメーション。



しかし、それについては次の記事で詳しく説明します:)



PSあなたが何かを追加できる場合は、コメント、著者を選択して追加してください:)




All Articles