Поделиться через

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

  • Статья

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

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

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

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

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

  • В проекте Visual Studio в окне "Структура документа" выполните одно из следующих действий.

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

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

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

Hh965587.collapse_all(ru-ru,VS.120).gifИзменение порядка слоев элементов

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

Изменение последовательности слоев

  • Выполните одно из следующих действий.

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

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

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

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

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

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

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

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

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

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

Выравнивание нескольких элементов с помощью команд меню

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

  2. Выберите одно из следующих значений свойства HorizontalAlignment в разделе Макет окна свойств: По левому краю, По центру, По правому краю или Растяжение.

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

Выравнивание нескольких элементов с помощью линий привязки

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

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

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

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

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

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

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

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

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

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

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

    Важно!

    Элементы, помещенные в некоторые контейнеры макета, например Canvas, лишены графических элементов полей. У элементов, помещенных в StackPanel, имеются графические элементы левого и правого или верхнего и нижнего полей, в зависимости от ориентации StackPanel.

Группировка или разгруппировка элементов

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

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

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

  2. Щелкните правой кнопкой мыши выделенные элементы, щелкните Сгруппировать в, а затем выберите тип контейнера макета, в который будет заключена группа.

    Совет

    При выборе для группировки элементов Viewbox, T:Windows.UI.Xaml.Controls.Border или ScrollViewer, элементы размещаются в новой панели Grid в контейнере Viewbox, Border или ScrollViewer. Если необходимо разгруппировать элементы в одном из этих контейнеров макета, удаляются только контейнеры Viewbox, Border или ScrollViewer, а панель Grid остается. Для удаления панели Grid нужно разгруппировать элементы еще раз.

Разгруппировка элементов и удаление макета

  • Щелкните правой кнопкой мыши группу, которую необходимо разгруппировать, и выберите Разгруппировать.

Можно также выполнить группировку или разгруппировку элементов, щелкнув выделенные элементы правой кнопкой мыши в окне "Структура документа" и выбрав пункт Сгруппировать в или Разгруппировать.

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

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

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

  • Щелкните элемент правой кнопкой мыши в окне "Структура документа" или на монтажной панели и выберите Сбросить макет, а затем выберите свойство, которое нужно сбросить (или выберите Все, чтобы сбросить все свойства макета для элемента).

См. также

Основные понятия

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