#567 – Установка связанных свойств Layout в Blend

Область панели Properties позволяет вам устанавливать связанные с разметкой контрола. Включает в себя свойства типа полей отступов, выравнивания, высоты, ширины и смещений.

По умолчанию только несколько полных наборов свойств разметки отображаются.

Читать полностью »

28.05.2012

#497 – Использование UniformGrid для создания группы кнопок одинакового размера

Вы можете использовать StackPanel для придания ее дочерним элементам одинакового размера в одном из ее измерений. Это трудно сделать в другом измерении размера.

В примере ниже используется StackPanel для нескольких кнопок. Они одной высоты, но разной ширины.

Читать полностью »

17.02.2012

#496 – Использование StackPanel для создания группы кнопок одинакового размера

Зачастую вы хотите расположить группу кнопок в GUI по вертикали или горизонтали. Обычно используя StackPanel для этого.

Давайте предположим, что вы хотите серию кнопок расположенных вертикально с правой стороны окна.

Читать полностью »

16.02.2012

#492 – Разметка может изменяться во время выполнения

Преимущество flow-based разметки против coordinate-based в том, что элементы в пользовательском интерфейсе подстраивают размер под содержание. Дизайнер GUI не имеет явного задания размера и расположения для каждого дочернего элемента.

Разметка контейнеров в WPF не только позиционирует дочерние элементы в режиме дизайна, но переизмеряет и перестраивает размещение дочерних элементов, когда некоторые свойства дочерних элементов меняются. Например, если свойство Content у контрола Label изменится, то родительской контейнер обновит представление на новый текст.

В примере ниже, когда Label содержащий название фильма меняется кнопки сдвигаются вправо.

Читать полностью »

10.02.2012

#479 – Использование преобразования разметки над дочерними элементами в Canvas

Вы можете использовать LayoutTransform на дочерних элементах Canvas для преобразования их графического представления. Особенно вы можете использовать RotateTransform, ScaleTransform или SkewTransform.

Читать полностью »

24.01.2012

#472 – Распределение площади UniformGrid по умолчанию

Вы обычно устанавливаете число строк и колонок UniformGrid используя Rows и Columns свойства. Вы также можете пропустить эти свойства и UniformGrid установит число строк и колонок основываясь на количестве дочерних элементов.

UniformGrid пытается создать площадь разметки, автоматически устанавливая число строк и колонок как в списке ниже:

  • 1 элемент – 1 строка, 1 колонка
  • 2-4 элементов – 2 строки, 2 колонки
  • 5-9 элементов – 3 строки, 3 колонки
  • 10-16 элементов – 4 строки, 4 колонки
  • И так далее

Обратите внимание, что UniformGrid в этом случае всегда имеет тоже число строк и колонок.

Читать полностью »

13.01.2012

#469 – Заполнение UniformGrid справо налево

UniformGrid обычно располагает свои дочерние элементы слева на право, начиная с первой строки (сверху вниз, слева направо). Вы можете изменить поведение, используя свойство FlowDirection.

По умолчанию значение для FlowDirection является LeftToRight. Если вы укажите значение RightToLeft, то UniformGrid будет заполнять дочерние элементы справа налево в каждой строке (Строки все также будут заполняться сверху вниз).

Читать полностью »

10.01.2012

#468 – Свойство FirstColumn позволяет получить пустые ячейки в UniformGrid

UniformGrid содержит дочерние элементы в порядке, в котором они появляются в файле XAML где UniformGrid определен. Они располагаются в первой строке (слева на право) пока строка не заполнится и не начнется вторая строка.

Дочерний элемент обычно появляется в первой колонке первой строки. Вместо этого вы можете сделать, чтоб первый элемент появился в другой колонке, указав значение свойства FirstColumn. Это свойство указывает начинающийся с 0 номер колонки, где должен появится первый элемент. Дочерние элементы продолжают заполнять соответствующие колонки в первой строке и продолжаются во вторую, когда первая заполнится.

Читать полностью »

09.01.2012

#467 – Использование UniformGrid для равномерного распределения строк и колонок

Панель разметки UniformGrid похожа на Grid, тем что дочерние элементы располагаются в строках и колонках. Но разница с Grid в том:

  • Вы не указываете никакой информации о размерах для каждой строки и колонки
  • Все колонки одной ширины
  • Все строки одной высоты
  • Вы указываете желаемое количество строк и колонок
  • Вы не указываете строку и колонку для дочерних элементов

Дочерние элементы автоматически размещаются последовательно в ячейках грида. Каждая строка заполняется слева на право, начиная с первой строки.

Читать полностью »

06.01.2012

#454 – UseLayoutRounding против SnapsToDevicePixels

Класс UIElement имеет SnapsToDevicePixels свойство для контроля пиксельного выравнивания. Когда установлено в true для самого верхнего по уровню элемента, все дочерние элементы выравниваются по пиксельным границам, для избегания сглаживания (антиалиазинга).

В .NET 4.0, класс FrameworkElement получил свойство UseLayoutRounding, которое также предотвращает сглаживание (анитиалиасинг) выравниванием по аппаратным пикселям.

Читать полностью »

21.12.2011

#453 – Свойство UseLayoutRounding выравнивает части по пиксельным границам

Потому что WPF позиционирует GUI элементы используя машинно независимые единицы, маленькие GUI элементы могут выглядеть нечеткими при отображении за счет сглаживания (антиалиасинга).

Обратите внимание что края элементов Border немного размыты в примере ниже. Каждый элемент должен быть шириной в 2 на этом устройстве, но сглаживание приводит к нечеткости краев.

Читать полностью »

20.12.2011

#447 – Вы можете использовать преобразования разметки с DockPanel

Вы можете использовать LayoutTransform индивидуально для каждого дочернего элемента в контейнере DockPanel для масштабирования или поворота элементов.

В примере ниже у нас есть четыре контрола Label, каждый пристыкован к одной из сторон DockPanel. Надпись слева, сверху, справа используют LayoutTransform повернуть их наружу.

Читать полностью »

10.12.2011

#434 – Режим Canvas Layout в Blend

По умолчанию во время редактирования Grid в Blend отступы сохраняются, когда вы изменяете разметку Grid, но визуальное представление контролов может меняться. Это состояние называется режим сеточной разметки и индицируется маленькой иконкой в верхнем левом углу Grid в дизайн пространстве.

Читать полностью »

21.11.2011

#433 – Сохранение отступов во время редактирования Grid в Blend

Если у вас есть простой Grid 2x2 и вы используете для дизайнерское пространство Blend для размещения Button в Grid'е. Если поместить Button перетаскиванием, ее свойства Grid.Row и Grid.Column будут установлены соответственно и ее Margin будет установлен в соответствии с местом куда вы бросите кнопку.

Читать полностью »

18.11.2011

#429 – Свойства дочерних элементов которые влияют на разметку

Панели разметки, такие как StackPanel и Grid, служат контейнерами дочерним элементам, чей тип UIElement (В реальности большинство дочерних элементов наследуются от FrameworkElement в свою очередь наследуется от UIElement).

Панели разметки соблюдают значения следующих свойств их дочерних элементов. Все эти свойства определены в FrameworkElement.

Читать полностью »

15.11.2011

#428 – Прочие настройки Layout в Blend

Вы можете использовать окно настроек в Blend для установки любых свойств контрола расположенного в layout контейнере, включая layout зависимые свойства.

Для примера считаем, что имеем Grid содержащий пару контролов Button. Если нажать на одну из кнопок, то вы увидите ее свойства в окне свойств справа в интерфейсе дизайнера.

Читать полностью »

11.11.2011

#426 – Панели разметки имеют поля отступа

Обычно установка полей отступа элементов содержащихся внутри панели разметки делается для создания пустого пространства между различными элементами и созданием пустого пространства между элементом и краями панели.

Вот окно, содержащее Grid (бежевый фон), который содержит несколько контролов. Без установке полей отступа.

Читать полностью »

10.11.2011

#423 – Установка максимального Height и Width в Rows и Columns для Grid

Аналогично как вы устанавливаете минимум для ширины и высоты строки и колонки в Grid, вы можете установить максимум для высоты и ширины.

Вы можете установить максимум высоты строки в Grid используя свойство MaxHeight для элементы RowDefinition. Вы можете установить максимум ширины колонки, используя свойство MaxWidth для элементы ColumnDefinition.

Читать полностью »

04.11.2011

#422 – Установка минимального Height и Width в Rows и Columns для Grid

Вы можете установить минимальную высоту для строки в Grid, используя свойство MinHeight. Вы также можете установить минимальную ширину колонки используя свойство MinWidth.

В примере ниже мы установили минимальную ширину первой колонки, даже если значение свойства Width установлено в Auto. Мы также установили минимум для 4-й колонки, ширина которой установлена в 1* (аналогично ширине 3-й конки).

Читать полностью »

03.11.2011

#399 – WrapPanel изменяет разметку потомков, когда изменяются их размеры

Мы видели что WrapPanel располагает свои дочерние элементы по горизонтали, заполняя за раз по строке или по вертикале, заполняя за раз по колонке.

WrapPanel так же пересчитывает разметку своих дочерних элементов, в то время как размер самой WrapPanel изменяется. В этом случае расположение дочерних элементов изменяется.

Предположим, что у нас есть WrapPanel у которой свойство Orientation установлено в значение Horizontal. Это расположит дочерние элементы слева на право, на первой строке и начнет вторую строку как только первая заполнится.

Читать полностью »

03.10.2011

#398 – Элемент WrapPanel

Элемент WrapPanel служит контейнером для коллекции дочерних элементов, располагая свои дочерние элементы одним из двух способов:

  • В горизонтальной ориентации (по умолчанию). Дочерние элементы добавляются слева на право, пока строка не заполнится и потом переносятся на следующую строку
  • В вертикальной ориентации. Дочерние элементы добавляются сверху вниз, пока колонка не заполнится и затем переносятся на следующую колонку

Читать полностью »

30.09.2011

#392 – Использование свойства SnapsToDevicePixels для предотвращения антиалиасинга

Потому что WPF позиционирует GUI элементы, используя машинно-независимые единицы, маленькие GUI элементы могут выглядеть нечеткими при отображении за счет сглаживания (антиалиасинга).

Обратите внимание не согласованный (не одинаковый) внешний вид вертикальных линий в примере ниже. Каждая линия должна быть одинакового размера, так как мы определили ее в 1 WPF unit шириной (1 пиксель на 96 dpi).

Читать полностью »

22.09.2011

#391 – Антиалиасинг может привести к нечеткому отображению GUI элементов

Вы определяете позицию и размер для GUI элементов в WPF используя машинно независимые единица (device-independent units) В одной единице 1/96 дюйма или 1 пиксель на 96 dpi экране. Это позволяет объектам иметь постоянный физический размер, несмотря на разрешение.

Из за того что вы не указываете в терминах пикселей, края объектов не всегда выстраиваются в точности по пикселям. WPF использует антиалиасинг, когда отображает GUI элементы. Для примера, если элемент только занимает половину пикселя, то этот пиксель отображается в половину яркости.

Читать полностью »

21.09.2011

#388 – Разметка контейнеров не предоставляет скроллинг

Ни один из контролов панелей WPF (контейнеры) автоматически не обеспечивают прокрутку. Если их дочерние элементы не вписываются в доступное пространство, то дочерние контролы обрезаются.

В примере ниже мы у нас есть вертикальная StackPanel с серией контролов типа Label. Помните, что первая надпись не подстраивает под размер окна и прикреплена справа. Последняя надпись аналогично не подстраивается и прикреплена снизу окна.

Читать полностью »

15.09.2011

#387 – Установка цвета фона для того чтобы увидеть как работает разметка

Иногда сложно понять, как контейнер располагает свои дочерние элементы. Вы можете использовать свойство Background для каждого контрола или панели для получения лучшего представления об этих вещах.

Предположим у нас есть GUI который включает несколько элементов управления и две вложенные панели.

Читать полностью »

15.09.2011

#386 – Разметка = Панели + FrameworkElements + Alignment/Margins/Padding

Разметка в WPF это процесс, который определяет размер и позиции всех элементов пользовательского интерфейса.

Пользовательский интерфейс состоит из внешнего Window или Page которые содержат иерархию элементов пользовательского интерфейса. Иерархия может содержать личные элементы пользовательского интерфейса или панели, которые по очереди содержат коллекцию дочерних FrameworkElements.

Panel это абстрактный класс, который служит родительским для конкретных панелей разметки, включая Canvas, DockPanel, Grid, StackPanel и WrapPanel.

Читать полностью »

14.09.2011

#385 – Вы можете вкладывать панели контролов

Обычно приложение состоит из верхнего контрола типа панель, который содержит другие, создавая иерархию панелей, которая определяет разметку вашего GUI.

В примере на самом верхнем уровне расположен трех строчный Grid, который содержит StackPanel в первой строке, 2×2 Grid во второй и другую StackPanel в третьей.

Читать полностью »

13.09.2011

#384 – Преимущества Flow-Based разметки

WPF предоставляет ряд преимуществ flow-based разметки по умолчанию.

Независимость от разрешения

Это не настоящие преимущество именно flow-based разметки, но преимущество, основанное на утверждении, что указание в WPF позиций и размеров в аппаратно независимых единицах, лучше чем в пикселях. Если текущие настройки DPI совпадают с нативными DPI устройства, тогда фактический размер GUI элементов будет, как ожидалось.

Читать полностью »

12.09.2011

#383 – Проблемы с Layout основанными на координатах

WPF использует flow-based разметку по умолчанию (например, StackPanel и Grid контейнеры), с coordinate-based разметкой как опциональной возможностью (например, Canvas).

На первый взгляд coordinate-based разметка кажется проще. Вы можете установить позицию и размер каждого контрола как вам хочется на ваш взгляд. Flow-based разметка может немного разочаровать во время того как вы пытаетесь организовать дочерние элементы как вам надо.

Читать полностью »

09.09.2011

#329 – Принципы Layout в WPF

WPF использует flow-based модель разметки по умолчанию, где каждый дочерний элемент расположен в контейнере и однозначно позиционируются на основе их контента. Это является противоположностью coordinate-based разметке, где контролы получают определенный размер и позицию.

Родительский контейнер (наследник Panel) ответственен за выяснение размера и позиции для всех своих дочерних элементов.

Читать полностью »

27.06.2011

#321 – HorizontalAlignment и VerticalAlignment

Свойства HorizontalAlignment и VerticalAlignment указывают, как дочерний контрол должен быть расположен и какой размер иметь внутри родительского контейнера.

По умолчанию контролы располагаются вертикально в StackPanel растягиваясь по горизонтали для заполнения ширины StackPanel. Контейнер StackPanel устанавливает размеры своих дочерних элементов таким способом, потому что дочернее свойство HorizontalAlignment установлено по умолчанию в значение Stretch.

Мы можем переопределить это поведение, установив HorizontalAlignment в значение Left, Center или Right. Контрол будет выровнен как показано и ширина установится в соответствии с контентом.

Читать полностью »

15.06.2011

#320 – Размер по умолчанию дочерних контролов StackPanel

По умолчанию StackPanel использует следующую логику для задания размеров дочерних элементов:

Если Orientation в значении вертикально:

  • Высота дочернего элемента устанавливается в соответствии с контентом
  • Ширина дочернего элемента растягивается до ширины StackPanel

Если Orientation в значении горизонтально:

  • Ширина дочернего элемента устанавливается в соответствии с контентом
  • Высота дочернего элемента растягивается до высоты StackPanel

В примере ниже показано как дочерние элементы располагаются вертикально.

Читать полностью »

14.06.2011

#180 – Как работают Layout

Размещение в WPF зависит от контейнера (такие как Grid, StackPanel) в котором размещаются дочерние элементы (такие как Button, Label). Контейнер задает конечный размер и позицию для каждого дочернего элемента, что определяет, как дочерние элементы отобразятся.

Процесс размещения запускается, когда контейнер впервые отобразится или когда свойство дочернего контрола изменится (если свойство может влиять на размещение).

Читать полностью »

08.01.2011

#6 – WPF Layout

WPF использует потоковую модель расположения (flow-based layout) для позиционирования элементов управления, а не на основе координатой модели, в которой местоположение каждого элемента управления задается с помощью точных координат пикселей. Это расположение модели, подобно тому, как на веб-страницах задается расположение с помощью CSS.

Читать полностью »

18.07.2010