WPF Series # 2: New Layout Model.

I will try to consecrate some moments, the most interesting as it seems to me.

So right off the bat!


')
1. What is a Layout?
Layout is essentially a user interface organization model.

2. What are the cons of layout in WPF?
How much time we spend to create the simplest form in WinForms?



Cost: 2 minutes
How much time do we spend on creating the simplest form in WPF?



Spent:

3 min for positioning and creating elements and 4 minutes for
removing unnecessary properties, using columns and rows of the grid and. t. n.

Total: 4 or 7 minutes, depending on further scaling.

WPF Code:

<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>


Let's call these 2 minutes the minimum threshold.

Time, no matter how trite, is the main scourge of the UI organization in WPF -
You can create it for several hours or more,
but the minimum threshold, it seems to me, has increased by a factor of two.

Unlike the Windows Forms model, you have to “think ahead” over the UI,
even in the simplest utilities.

Therefore, unpretentious programs that do not need Rich UI,
better to write on winforms.

You also need to consider the fact that our application on WPF
can be transferred to the web.

I was reproached for not telling people that all this is possible.
make Code Behind. ... Yes, of course you can:

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. What are the advantages of layout in WPF?

1) Inheritance of properties in a logical tree.
Properties are automatically inherited from the root element:

< 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 >



So just we said that the elements of one panel will have a back
red and the other silver:



2) Scalable content:

Now at localization there will be no error when the text gets out of control.
Now it doesn't matter to us which DPI and often even the resolution at the user's monitor,
our app will look good equally on both 15 'and on plasma 52'.

3) The nesting of elements gives us advantages in the construction of non-standard
controls and in controlling the content.

4) Duplication of properties can be avoided by using styles and resources.
5) Convenient Binding.

What is Binding? Binding - Binding.

What and how to bind data and objects can be read here:
habrahabr.ru/blogs/net/41108 , habrahabr.ru/blogs/net/41481

Why is it convenient?

a) It does not need to be described in Code Behind.
b) By the way, you can demonstrate it:

< 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 >



Or this:

< 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 >



Or this:

< 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) The code that controls the elements of the window can be moved almost
completely on the window layout itself.

7) Easy portability on the Web (XBAP / WPF / E (Silverlight)).

8) Easy upgrade.

9) Separation of code / design, which allows the designer to work on the UI,
so that later it does not deteriorate when reworked by the programmer.

4. What results and gives a new layout model?

1) New system of routed events and commands.
( msdn.microsoft.com/ru-ru/magazine/cc785480.aspx )

2) Easy and convenient animation.

But about this in the next article :)

PS If you can add something, comment, select and add, indicating the author :)