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

Пошаговое руководство. Изменение XAML в конструкторе WPF

  • Статья

Конструктор WPF для Visual Studio предоставляет редактор XAML со многими из тех возможностей, которые можно найти в редакторах других языков, поддерживаемых Visual Studio. В этом разделе показаны способы использования таких возможностей, как IntelliSense и структуризация.

В данном пошаговом руководстве выполняются следующие задачи.

  • Создание проекта WPF.

  • Создание ресурсов.

  • Просмотр выделения синтаксиса.

  • Использование навигации по тегам.

  • Использование структуризации.

  • Использование технологии IntelliSense.

  • Использование разметки фигурными скобками.

  • Использование автоматического форматирования.

Примечание

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

Обязательные компоненты

Ниже приведены компоненты, необходимые для выполнения данного пошагового руководства.

  • Visual Studio 2010.

Создание проекта

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

Создание проекта

Создание ресурсов

Ресурсы в приложениях WPF будут использоваться часто. сред. Конструктор WPF обеспечивает свертываемую структуризацию для разделов ресурсов и навигацию по разделам ресурсов в окне Структура документа.

Создание ресурсов

  1. Откройте файл MainWindow.xaml в сред. Конструктор WPF.

  2. В представлении XAML вставьте следующий код после открывающего тега для окна MainWindow.

    Этот код XAML создает линейный градиент кисти, имеющей спектр цветов.

    <Window.Resources>
    <LinearGradientBrush x:Key="backgroundBrush1" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
</Window.Resources>

Выделение синтаксиса

сред. Конструктор WPF делает код XAML проще для чтения с помощью выделения цветом текста в соответствии с его синтаксисом.

Просмотр выделения синтаксиса.

  • В представлении XAML замените элемент по умолчанию <Grid> следующей разметкой.

    <Grid Name="grid1" Background="{StaticResource backgroundBrush1}">

</Grid>

    Элемент, свойство и значение свойства имеют разные цвета.

    Выделение синтаксиса в представлении XAML

    Расширение разметки привязано к свойству Background. Также изменяется фон сетки в представлении конструктора.

    Фоновый ресурс в представлении конструктора

    Можно изменять цвет элементов и атрибутов XAML. Дополнительные сведения см. в разделе Практическое руководство. Изменение параметров представления XAML.

Навигация по тегам

Перемещаться от тега к тегу можно с помощью навигатора по тегам. Можно также перемещаться с помощью представления "Структура документа". Дополнительные сведения см. в разделе Навигация по иерархии элементов документа WPF.

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

  1. В представлении XAML щелкните открывающий тег элемента <Grid>.

  2. В нижней части сред. Конструктор WPF найдите навигатор по тегам. В нем отображаются Grid (grid1) Window/Grid.

  3. В навигаторе по тегам переместите указатель мыши на элемент Window.

    Появится эскиз MainWindow.

    Навигатор по тегам с эскизом в представлении XAML

  4. В навигаторе по тегам щелкните гиперссылку Window.

    Открывающий тег элемента MainWindow выделится в представлении XAML.

  5. В представлении XAML щелкните тег <Window.Resources>.

    Навигатор по тегам отображает иерархию дерева XAML для элемента <Window.Resources>.

  6. В навигаторе по тегам щелкните стрелку "Выделить дочерний элемент" слева от элемента Ресурсы.

    Дочерний элемент отобразится во всплывающем окне.

  7. Щелкните LinearGradientBrush (backgroundBrush1).

    Элемент <LinearGradientBrush> выделяется в представлении XAML.

Структуризация

сред. Конструктор WPF полностью поддерживает свертываемую структуризацию. 

Использование структуризации

  1. В представлении XAML найдите элемент <Window.Resources>.

  2. Слева от открывающего тега щелкните кнопку сворачивания.

    Элемент <Window.Resources> сворачивается в одну строку.

    Свернутая структура в представлении XAML

  3. Слева от открывающего тега щелкните кнопку разворачивания.

    Элемент <Window.Resources> разворачивается в исходное состояние.

IntelliSense

сред. Конструктор WPF полностью поддерживает технологию Intellisense.

Использование технологии IntelliSense

  1. В элементе grid1 введите <Gr.

    Появится список IntelliSense с выбранным классом Grid.

    XAML IntelliSense

  2. Нажмите клавишу TAB, чтобы завершить ввод открывающего тега.

  3. Введите .c. (Не забудьте включить точку.)

    Появится список IntelliSense с первым свойством, начинающимся с выделенной буквы C.

  4. Используйте клавишу со стрелкой вниз для перехода к свойству ColumnDefinitions.

  5. Нажмите клавишу TAB, чтобы завершить ввод тега.

    Дополнительные сведения по использованию функции IntelliSense для пользовательских типов см. в разделе Практическое руководство. Импорт пространства имен в XAML.

Соответствие фигурных скобок

Можно перемещаться внутри элемента с помощью функции соответствия фигурных скобок.

Использование соответствия фигурных скобок

  1. В представлении XAML щелкните открывающий тег <LinearGradientBrush>.

  2. Нажмите клавишу CTRL+].

    Курсор переместится в конец открывающего тега.

  3. Снова нажмите клавишу CTRL+].

    Курсор переместится на начало закрывающего тега.

  4. Удалите закрывающую угловую скобку ">" из закрывающего тега элемента <LinearGradientBrush>.

  5. Введите ">" для завершения закрывающего тега.

    Представление XAML выделяет открывающие и закрывающие теги.

    Проверка парности фигурных скобок в представлении XAML

Автоматическое форматирование

Можно форматировать код XAML, нажав CTRL+KD и указав параметры автоматического форматирования. Дополнительные сведения см. в разделе Практическое руководство. Изменение параметров представления XAML.

Использование автоматического форматирования

  1. В представлении XAML выберите четыре элемента <GradientStop>.

  2. Нажмите клавиши SHIFT+TAB.

    Четыре объявления элемента переместятся влево.

  3. Нажмите клавиши CTRL+KD.

    Четыре объявления элемента отобразятся с отступом. Можете заметить и другие изменения в коде XAML.

  4. В первом теге <GradientStop> щелкните пробел перед атрибутом "Color".

  5. Нажмите клавишу ВВОД для перехода на новую строку.

  6. Щелкните пробел перед атрибутом "Offset" и нажмите клавишу ВВОД, чтобы начать новую строку.

  7. Нажмите клавиши CTRL+KD.

    Атрибуты остаются на новых строках.

  8. Вставьте четыре пробела перед атрибутом "Color" и нажмите клавиши CTRL+KD.

    Атрибут "Color" не изменяет положение.

См. также

Задачи

Практическое руководство. Импорт пространства имен в XAML

Практическое руководство. Изменение параметров представления XAML

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

Навигация по иерархии элементов документа WPF

Другие ресурсы

Конструктор WPF

Примеры использования XAML и кода