Работа с элементами в конструкторе XAML
Элементы к приложению XAML (элементы управления, макеты и фигуры) можно добавлять, работая непосредственно с кодом, или с помощью конструктора XAML. В этом разделе описывается работа с элементами в конструкторе XAML в Visual Studio или Blend для Visual Studio.
Добавление элемента в макет
Макет — это процесс изменения размеров и положения элементов в пользовательском интерфейсе. Для размещения визуальных элементов необходимо поместить их в структуру Панель. Panel имеет дочернее свойство, которое является коллекцией типов FrameworkElement. Вы можете использовать разные дочерние элементы Panel, такие как Canvas, StackPanel и Grid, в качестве контейнеров макет, а также для размещения и упорядочения элементов на странице.
По умолчанию панель Grid используется в качестве контейнера макета верхнего уровня на странице или форме. Можно добавлять панели макета, элементы управления и другие элементы на верхнем уровне макета страницы.
Чтобы добавить элемент в макет в конструкторе XAML, выполните одно из следующих действий:
Дважды щелкните элемент на панели элементов (или выберите элемент на панели элементов и нажмите клавишу ВВОД).
Перетащите элемент с панели элементов в область рисования.
На панели элементов выберите один из инструментов рисования (например, Эллипс или Прямоугольник) и создайте объект на активной панели.
Изменение порядка слоев элементов
Если на монтажной панели конструктора XAML имеется два элемента, один из них будет находиться перед другим в структуре слоев. В нижней части списка элементов в окне "Структура документа" находится первый передний элемент (если не задано свойство ZIndex элемента). При вставке элемента на страницу, форму или в контейнер макета элемент автоматически помещается перед другими элементами в активном элементе контейнера. Чтобы изменить порядок элементов, можно использовать команды Порядок или перетаскивать элементы в дереве объектов в окне "Структура документа".
Чтобы изменить порядок слоев, выполните одно из следующих действий:
В окне Структура документа перетащите элементы вверх или вниз, чтобы создать требуемый порядок слоев.
Щелкните правой кнопкой мыши в окне "Структура документа" или в области рисования элемент, для которого требуется изменить порядок слоев, наведите указатель на элемент Порядок и выберите один из следующих параметров:
На передний план — чтобы показывать элемент перед всеми другими элементами.
Переместить вперед — чтобы переместить элемент на один уровень вперед.
Переместить назад — чтобы переместить элемент на один уровень назад.
На задний план — чтобы показывать элемент за всеми другими элементами.
Измените свойство ZIndex в разделе Макет окна "Свойства". Для перекрывающихся элементов свойство ZIndex имеет приоритет над порядком элементов, показанных в окне "Структура документа". Элемент с высшим значением свойства ZIndex отображается на переднем плане при перекрытии элементов.
Изменение выравнивания элемента
Вы можете выравнивать элементы в области рисования, используя команды меню или перетаскивая элементы к линиям привязки.
Линия привязки является визуальным средством, помогающим выравнивать элементы относительно других элементов в приложении.
Выравнивание нескольких элементов с помощью команд меню:
Выберите элементы, которые требуется выровнять. Можно выбрать несколько элементов, удерживая нажатой клавишу CTRL.
Выберите одно из следующих свойств в поле HorizontalAlignment в разделе Макет окна "Свойства": По левому краю, По центру, По правому краю или Растянуть.
Выберите одно из следующих свойств в поле VerticalAlignment в разделе Макет окна "Свойства": По верхнему краю, По центру, По нижнему краю или Растянуть.
Чтобы выровнять два и более элементов с помощью линий привязки, в конструкторе XAML в макете, который содержит по крайней мере два элемента, перетащите один из элементов или измените его размер, чтобы его край был выровнен с другим элементом.
Когда края будут выровнены, появится граница выравнивания. Граница выравнивания отображается в виде красной штриховой линии. Границы выравнивания появляются, только если привязка к линиям привязки включена. Изображение области рисования с границей выравнивания см. в разделе Создание пользовательского интерфейса с помощью конструктора XAML.
Изменение полей элемента
Поля в конструкторе XAML определяют количество пустого пространства вокруг элемента на монтажной панели. Например, поля указывают объем пространства между внешними краями элемента и границами Grid панели, содержащей элемент. Поля также определяют расстояние между элементами, содержащимися в StackPanel.
Изменение полей элемента в окне свойства:
Выберите элемент, поля которого требуется изменить.
В разделе Макет окна "Свойства" измените значение (в пикселях или в аппаратно-независимых единицах, равных приблизительно 1/96 дюйма) для любого из свойств полей (Верхнее, Левое, Правое или Нижнее).
В области рисования, чтобы изменить поля элемента относительно его контейнера макета, щелкните графические элементы полей, отображаемые вокруг элемента, когда элемент выбран и находится в пределах контейнера макета. Изображение графических элементов полей см. в разделе Создание пользовательского интерфейса с помощью конструктора XAML.
Если графический элемент поля открыт по вертикали или по горизонтали, значение поля не задано. Если графический элемент поля закрыт, значение поля задано.
Если при открытии графического элемента поля противоположное поле не задано, ему будет присвоено корректное значение в соответствии с расположением элемента в области рисования. Для противоположных полей, например полей Слева и Справа, всегда будет задано хотя бы одно значение.
Важно!
У элементов, помещенных в некоторые контейнеры макета, например Canvas, нет графических элементов полей. У элементов, помещенных в StackPanel, есть графические элементы левого и правого или верхнего и нижнего полей, в зависимости от ориентации StackPanel.
Группирование и разгруппировка элементов
Группировка нескольких элементов в конструкторе XAML создает новый контейнер макета и помещает эти элементы внутрь него. Размещение нескольких элементов в контейнере макета позволяет легко выбирать, перемещать и преобразовывать группу, как если бы элементы в этой группе были одним элементом. Группировка также полезна для определения элементов, которые чем-то связаны друг с другом, таких как различные кнопки, составляющих элемент навигации. при разгруппировке элементов просто удаляется контейнер макета, содержащий эти элементы.
Группировка элементов в новом контейнере макета:
Выберите элементы, которые требуется группировать. (Чтобы выбрать несколько элементов, нажмите и удерживайте клавишу CTRL при их выборе.)
Щелкните выделенные элементы правой кнопкой, наведите указатель на команду Сгруппировать в, а затем выберите тип контейнера макета, в котором будет размещена группа.
Совет
Если для группирования объектов выбран вариант Viewbox, Border или ScrollViewer, объекты размещаются на новой панели макета Grid в пределах элемента Viewbox, Border или ScrollViewer. Если необходимо разгруппировать элементы в одном из этих контейнеров макета, удаляются только контейнеры Viewbox, Border или ScrollViewer, а панель Grid остается. Для удаления панели
Gridнужно разгруппировать элементы еще раз.
Чтобы разгруппировать элементы и удалить макет, щелкните правой кнопкой мыши группу, которую необходимо разгруппировать, и выберите пункт Разгруппировать. Также можно группировать и разгруппировывать элементы, щелкнув правой кнопкой мыши выбранные элементы в окне "Структура документа" и выбрав пункт Сгруппировать в или Разгруппировать.
Переустановка макета элемента
Вы можете восстановить значения по умолчанию для отдельных свойств макета элемента с помощью команд переустановки макета. С помощью этой команды можно сбросить значения полей, выравнивания, ширины, высоты и размера элемента, как все одновременно, так и по-отдельности.
Чтобы переустановить макет элемента, в окне "Структура документа" или в области рисования щелкните правой кнопкой мыши элемент и последовательно выберите Макет>Сбросимя_свойства, где имя_свойства — это свойство, которое нужно переустановить (или выберите Макет>Сбросить все, чтобы переустановить все свойства макета элемента).