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

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

  • Статья

Обновлен: Ноябрь 2007

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

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

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

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

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

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

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

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

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

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

Bb514686.alert_note(ru-ru,VS.90).gifПримечание.

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

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

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

  • Visual Studio 2008.

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

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

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

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

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

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

  1. Откройте файл Window1.xaml в WPF (конструктор).

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

    Этот код 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>

    Элемент, свойство и значение свойства имеют разные цвета. Кроме того, расширение разметки привязано к свойству Background. Также изменяется фон сетки в представлении конструктора.

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

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

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

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

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

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

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

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

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

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

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

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

  6. В навигаторе по тегам щелкните стрелку "Следующее выделение" слева от элемента Resources.

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

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

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

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

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

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

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

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

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

IntelliSense

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  4. В первом теге <GradientStop> щелкните пробел перед атрибутом "Color". Нажмите клавишу ВВОД для перехода на новую строку.

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

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

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

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

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

См. также

Задачи

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

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

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

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

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

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

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