Как стать автором
Обновить

WPF Series #2: Новая модель компоновки.

.NET
Попытаюсь освятить некоторые моменты, наиболее интересные как мне кажется.

Так что с места в карьер!



1. Что такое компоновка (Layout)?
Компоновка, по сути, это модель организации пользовательского интерфейса.

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 минуты — порогом минимума.

Время, как это ни банально, главный бич организации UI в WPF —
Вы можете создавать его несколько часов или более,
но порог минимума, как мне кажется, увеличился раза в два.

В отличие от модели 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>




Так просто мы сказали, что элементы одной панели будут иметь задник
красного цвета, а другой – серебряного:



2) Масштабируемое содержимое:

Теперь при локализации не будет ошибки, когда текст вылезает за пределы контрола.
Теперь нам не важно, какой DPI и зачастую даже разрешение у монитора пользователя,
наше приложение будет хорошо выглядеть равно хорошо и на 15’ и на плазме 52’.

3) Вложенность элементов дает нам преимущества в построении нестандартных
контролов и в контролировании содержимого.

4) Дублирование свойств можно избежать, используя стили и ресурсы.
5) Удобный Binding.

Что такое Binding? Binding – Привязка.

К чему и как можно привязывать данные и объекты можно почитать тут:
habrahabr.ru/blogs/net/41108, habrahabr.ru/blogs/net/41481

Почему он удобен?

a) Его не нужно описывать в Code Behind.
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/ru-ru/magazine/cc785480.aspx )

2) Легкая и удобная анимация.

Но об этом уже в следующей статье :)

P.S Если что то можете добавить, комментируйте, выберу и добавлю с указанием автора :)
Теги:WPF.Net
Хабы: .NET
Всего голосов 8: ↑7 и ↓1 +6
Просмотры4.1K

Похожие публикации

.NET WPF-разработчик
от 160 000 ₽Exquance SoftwareСанкт-ПетербургМожно удаленно
.Net разработчик
от 150 000 ₽ArtezioСаратов
.Net разработчик
от 150 000 ₽ArtezioСанкт-Петербург
C# .Net Developer
от 1 200 до 3 500 $Profit CenterМожно удаленно
Lead .NET Developer
до 5 000 $Spiral ScoutМожно удаленно

Лучшие публикации за сутки