Работа с элементами в конструкторе XAML

Элементы управления, макеты и фигуры можно добавлять в приложение в XAML, в коде или с помощью конструктора XAML. В этом разделе описывается, как работать с элементами в конструкторе XAML в Visual Studio или Blend для Visual Studio.

Добавление элемента в макет

Макет — это процесс изменения размера и размещения элементов в пользовательском интерфейсе. Чтобы разместить визуальные элементы, их необходимо поместить в панель макета. У него Panel есть дочернее свойство, которое является коллекцией типов FrameworkElement . Вы можете использовать различные Panel дочерние элементы, такие как Canvas, StackPanel и Grid, для размещения и упорядочивания элементов на странице.

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

Чтобы добавить элемент в макет в конструкторе XAML, выполните одно из следующих действий:

• Дважды щелкните элемент на панели элементов (или выберите элемент на панели элементов и нажмите клавишу ВВОД).

• Перетащите элемент из панели элементов в панель инструментов.

• На панели элементов выберите один из инструментов рисования (например, Эллипс или Прямоугольник), а затем нарисуйте элемент на активной панели.

Изменение порядка слоев элементов

Если в конструкторе XAML есть два элемента, один элемент появится перед другим в порядке слоев. В нижней части списка элементов в окне "Структура документа" находится передний элемент (за исключением случаев, когда для элемента задано свойство ZIndex ). При вставке элемента в страницу, форму или контейнер макета элемент автоматически помещается перед другими элементами активного контейнера. Чтобы изменить порядок элементов, можно использовать команды Order или перетащить элементы в дереве объектов в окне структуры документа.

Чтобы изменить порядок слоев, выполните одно из следующих действий.

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

• Щелкните правой кнопкой мыши элемент в окне структуры документа или на монтажной области, где вы хотите изменить порядок слоев, выберите пункт Порядок, а затем один из следующих вариантов:

  • Переместить на передний план, чтобы переместить элемент в начало порядка.

  • Переместить Вперед, чтобы сдвинуть элемент на один уровень вперед в порядке.

  • Переместить назад , чтобы переместить элемент на один уровень вниз в порядке.

  • Отправить обратно , чтобы отправить элемент до задней части заказа.

• Измените свойство ZIndex в разделе "Макет " в окне "Свойства". Для перекрывающихся элементов свойство ZIndex имеет приоритет над порядком элементов, отображаемых в окне структуры документа. Элемент с более высоким значением ZIndex отображается перед элементами, перекрывающимися.

Измените выравнивание элемента

Элементы на артборде можно выровнять с помощью команд меню или перетаскивания элементов к линейкам привязки.

Линия выравнивания — это визуальный элемент, который помогает выровнять элемент относительно других элементов в приложении.

Чтобы выровнять два или более элементов с помощью команд меню:

1. Выберите элементы, которые нужно выровнять. При выборе элементов можно выбрать несколько элементов, нажав и удерживая клавишу CTRL .

2. В разделе Макет окна Свойства выберите одно из следующих свойств в разделе Горизонтальное выравнивание: Слева, Центр, Справа или Растяжение.

3. Выберите одно из следующих свойств под VerticalAlignment в разделе Макет окна "Свойства": Сверху, По центру, Снизу или Растянуть.

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

При выравнивании краев граница выравнивания отображается для обозначения выравнивания. Граница выравнивания — красная черта. Границы выравнивания отображаются только при включении привязки к линиям привязки . Иллюстрация области, отображающей границу выравнивания, см. в разделе "Создание пользовательского интерфейса с помощью конструктора XAML".

Изменение полей элемента

Поля в конструкторе XAML определяют количество пустого пространства, которое находится вокруг элемента на рабочей области. Например, поля указывают объем пространства между внешними краями элемента и границами Grid панели, содержащей элемент. Поля также указывают объем пространства между элементами, содержащимися в объекте StackPanel.

Чтобы изменить поля элемента в окне "Свойства", выполните следующие действия.

1. Выберите элемент, поля которого нужно изменить.

2. В разделе Макет в окне Свойства измените значение (в пикселях или единицах, независимых от устройства и составляющих примерно 1/96 дюйма) для любого из свойств Отступа (Верхний, Левый, Правый или Нижний).

Чтобы изменить отступы элемента относительно контейнера макета элемента, щелкните на маркеры отступов, которые появляются вокруг элемента, когда элемент выделен и находится в контейнере макета. Иллюстрация, показывающая декораторы полей, см. в разделе "Создание пользовательского интерфейса с помощью конструктора XAML".

Если обрамление поля открыто по вертикали или горизонтали, эта граница не установлена. Если украшение границы закрыто, эта граница устанавливается.

При открытии декоратора поля, если противоположное поле не задано, ему устанавливается корректное значение согласно расположению элемента на рабочем поле. Для противоположных полей, таких как поля "Слева " и "Справа ", всегда устанавливается хотя бы одно свойство.

Элементы группы и разгруппировки

Группирование двух или нескольких элементов в конструкторе XAML создает новый контейнер макета и помещает эти элементы в этот контейнер. Размещение двух или нескольких элементов в контейнере макета позволяет легко выбирать, перемещать и преобразовывать группу, как если бы элементы в этой группе были одним элементом. Группирование также полезно для идентификации элементов, связанных друг с другом, например кнопок, составляющих элемент навигации. При разгруппировке элементов просто удаляется контейнер макета, содержащий элементы.

Группирование элементов в новый контейнер макета:

1. Выберите элементы, которые нужно сгруппировать. (Чтобы выбрать несколько элементов, нажмите и удерживайте клавишу CTRL , щелкнув их.

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

   Подсказка

   Если выбрать Viewbox, Border или ScrollViewer для группировки элементов, они помещаются в новую панель Grid внутри Viewbox, Border или ScrollViewer. При разгруппировке элементов в одном из этих контейнеров макета удаляется только элемент Viewbox, Border или ScrollViewer , а панель "Сетка " остается. Чтобы удалить Grid панель, снова разгруппировать элементы.

Чтобы разгруппировать элементы и удалить макет, щелкните правой кнопкой мыши группу, которую требуется разгруппировать, и щелкните "Разгруппировать". Вы также можете группировать или разгруппировать элементы, щелкнув правой кнопкой мыши выбранные элементы в окне структуры документа и выбрав команду "Группа в " или " Разгруппировать".

Сброс макета элемента

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

Чтобы сбросить макет элемента, щелкните правой кнопкой мыши элемент в окне структуры документа или на монтажной области, а затем выберите Макет>СброситьPropertyName, где PropertyName — это свойство, которое вы хотите сбросить (или выберите Макет>Сбросить все, чтобы сбросить все свойства макета элемента).

Связанный контент

• Создание пользовательского интерфейса с помощью конструктора XAML