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

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

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



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 Если что то можете добавить, комментируйте, выберу и добавлю с указанием автора :)