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

Руководство. Создание приложения WPF с помощью Visual Basic

В этом руководстве вы создадите приложение с помощью Visual Basic в интегрированной среде разработки Visual Studio .IDE. Программа будет использовать платформу пользовательского интерфейса #REF! (WPF). Используйте это руководство, чтобы ознакомиться со многими инструментами, диалоговым окнами и конструкторами, которые можно использовать в Visual Studio.

В этом руководстве вы узнаете, как:

  • Создание проекта
  • Настройка окна и добавление текста
  • Добавление кнопок и кода
  • Отладка и тестирование приложения
  • Отладка с точками останова
  • Сборка релизной версии

Что такое WPF?

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

  • Модель приложения
  • Ресурсы
  • Элементы управления
  • Графика
  • Макет
  • Привязка данных
  • Documents
  • Безопасность

WPF является частью .NET. Если вы ранее создали приложения с .NET с помощью #REF! или Windows Forms, интерфейс программирования должен быть знаком. WPF использует язык разметки расширяемых приложений XAML для предоставления декларативной модели программирования приложений. Дополнительные сведения см. в обзоре WPF .NET.

Предпосылки

Чтобы завершить работу с этим руководством, вам потребуется Visual Studio. Для бесплатной версии см. загрузки Visual Studio.

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

При создании приложения в Visual Studio сначала создается проект. В этом руководстве создайте проект #REF!.

  1. Откройте Visual Studio.

  2. В окне запуска выберите Создать проект.

    Снимок экрана начального окна в Visual Studio с выделенной опцией

  3. В окне Создать новый проект найдите WPF и выберите Visual Basic в списке всех языков. Выберите WPF App (.NET Framework), а затем выберите Next.

    Скриншот диалогового окна "Создание нового проекта" с введенным в поле поиска "WPF", выбранным в списке языков "Visual Basic" и выделенным шаблоном проекта "WPF App (.NET Framework)".

  4. Присвойте проекту имя, HelloWPFApp и нажмите кнопку "Создать".

    Visual Studio создает проект и решение HelloWPFApp. Обозреватель решений показывает различные файлы.

    Снимок экрана, показывающий файлы в проекте и решении HelloWPFApp в программе Обозреватель решений.

Конструктор WPF отображает представление конструктора и представление XAML окна MainWindow.xaml в режиме разделения экрана.

  1. Откройте Visual Studio.

  2. В окне запуска выберите Создать проект.

    Скриншот начального окна Visual Studio 2022 с выделенной опцией «Создать новый проект».

  3. В окне Создание нового проекта найдите WPF и выберите Visual Basic в списке всех языков. Выберите WPF App (.NET Framework), а затем выберите Next.

    Скриншот диалогового окна 'Создание нового проекта' с введенным в поле поиска 'WPF', 'Visual Basic' выбранным в списке языков, и обозначенным шаблоном проекта 'WPF приложение (.NET Framework)'.

  4. Присвойте проекту имя, HelloWPFApp и нажмите кнопку "Создать".

    Visual Studio создает проект и решение HelloWPFApp. Обозреватель решений показывает различные файлы.

    Снимок экрана, показывающий файлы в проекте и решении HelloWPFApp в Обозреватель решений в Visual Studio 2022.

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

Замечание

Дополнительные сведения о языке разметки расширяемых приложений (XAML) см. в XAML для WPF.

Настройка окна и добавление текста

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

  1. В Обозреватель решений откройте MainWindow.xaml.

  2. В представлении XAML измените значение свойства Window.Title с Title="MainWindow" на Title="Greetings".

  3. В левой части #REF! перейдите на вкладку Toolbox. Если он не отображается, выберите View>Toolbox в строке меню или Ctrl+Alt+X.

  4. Разверните Common WPF Controls или введите Text на панели поиска, чтобы найти TextBlock.

    Скриншот, показывающий окно 'Набор инструментов' с элементом управления TextBlock, выделенным в списке общих элементов управления WPF.

    Скриншот, демонстрирующий окно Панели инструментов в Visual Studio 2022 с выделенным элементом управления TextBlock в списке Общих элементов управления WPF.

  5. Выберите элемент TextBlock и перетащите его в окно в области конструктора. Элемент управления TextBlock можно переместить, перетащив его. Используйте рекомендации для размещения элемента управления.

    Снимок экрана: элемент управления TextBlock, расположенный в форме приветствия с видимыми рекомендациями.

    Разметка XAML должна выглядеть следующим образом:

    <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

  6. В представлении XAML найдите разметку для TextBlock и измените атрибут Text:

    Text="Select a message option and then choose the Display button."

    При необходимости снова выровняйте TextBlock по центру.

  7. Сохраните приложение, нажав кнопку "Сохранить все ". Кроме того, чтобы сохранить приложение, выберите "Сохранить все" в строке меню или нажмите клавиши CTRL. Рекомендуется сохранять данные часто и с самого начала.

Добавление кнопок и кода

Приложение использует два переключателя и кнопку. Чтобы добавить их, выполните следующие действия. Вы также добавляете в кнопку код Visual Basic. Этот код ссылается на выбор радиокнопки.

  1. На панели элементов найдите RadioButton.

    Скриншот с окном панели инструментов, в котором выбран элемент управления RadioButton из списка обычных элементов управления WPF.

    Screenshot с окном панели инструментов Visual Studio 2022 с элементом управления RadioButton, выбранным в списке общих элементов управления WPF.

  2. Добавьте два элемента управления RadioButton в область конструктора, выбрав элемент RadioButton и перетащив его в область конструктора. Переместите кнопки, выбрав их и используя клавиши со стрелками. Поместите кнопки рядом с элементом управления TextBlock.

    Снимок экрана: форма приветствия с элементом управления TextBlock и двумя переключателями.

  3. В окне "Свойства " левого элемента управления RadioButton измените свойство Name в верхней части окна "Свойства " на HelloButton.

    Скриншот, показывающий окно свойств Обозревателя решений для RadioButton 'HelloButton'.

    Скриншот показывает окно свойств обозревателя решений в Visual Studio 2022 для переключателя 'HelloButton'.

  4. В окне "Свойства " правого элемента управления RadioButton измените свойство Name на GoodbyeButton.

  5. Обновите атрибут Content для и на и в XAML.

    <Grid>
     <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
     <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
</Grid>

  6. В представлении XAML найдите разметку для HelloButton и добавьте атрибут IsChecked :

    IsChecked="True"

    Атрибут IsChecked со значением True означает, что HelloButton по умолчанию проверяется. Этот параметр означает, что радиокнопка всегда выбрана, даже при запуске программы.

  7. В панели инструментовнайдите элемент управления кнопкой . Затем перетащите кнопку в область конструктора под элементами управления RadioButton.

  8. В представлении XAML измените значение Content для элемента управления Button с на .

    <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

    Окно должно выглядеть следующим образом.

    Снимок экрана, показывающий форму приветствия с текстовым блоком, переключателями с метками "Hello" и "Goodbye", а также элементом управления кнопкой с меткой "Отображение", все расположены на форме.

  9. В области конструктора дважды щелкните кнопку Отображение.

    MainWindow.xaml.vb открывается, помещая курсор в событие .

    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)

End Sub

  10. Добавьте следующий код:

    If HelloButton.IsChecked = True Then
    MessageBox.Show("Hello.")
ElseIf GoodbyeButton.IsChecked = True Then
    MessageBox.Show("Goodbye.")
End If

Отладка и тестирование приложения

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

  1. В Обозреватель решений щелкните правой кнопкой мыши MainWindow.xaml и выберите Rename. Переименуйте файл в Greetings.xaml.

  2. Запустите отладчик, нажав клавишу F5 или выбрав отладку, а затем запустите отладку.

    Откроется окно режима останова , а окно вывода указывает, что произошло исключение.

    Снимок экрана показывает окно "Необработанное исключение" с сообщением System.IO.Exception: "Невозможно найти ресурс mainwindow.xaml".

  3. Остановите отладчик, выбрав ОтладкаОстановить отладку.

    В начале этого раздела вы переименовали MainWindow.xaml в Greetings.xaml . Код по-прежнему относится к MainWindow.xaml как URI запуска приложения, поэтому проект не может запуститься.

  4. В Обозреватель решений откройте файл Application.xaml.

  5. Измените на .

  6. Запустите отладчик еще раз (нажмите клавишу F5). Теперь вы должны увидеть окно Приветствие вашего приложения.

    Снимок экрана: окно приветствия с видимыми элементами управления TextBlock, RadioButtons и Button. Выбрана радиокнопка "Hello".

  7. Выберите Hello и кнопку Отобразить, а затем Goodbye и кнопку Отобразить. Чтобы остановить отладку, используйте значок закрытия в правом верхнем углу.

Дополнительные сведения см. в статье Compile a WPF Application и Debug WPF.

Отладка с точками останова

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

  1. Откройте Greetings.xaml.vb и выберите следующую строку:

  2. Добавьте точку останова, нажав клавишу F9 или выбрав отладку, а затем переключив точку останова.

    Красный круг отображается рядом со строкой кода в левом поле окна редактора.

  3. Выберите следующую строку:

  4. Нажмите клавишу F9 , чтобы добавить точку останова, а затем нажмите клавишу F5 , чтобы начать отладку.

  5. В окне приветствия нажмите кнопку "Hello " и нажмите кнопку "Отобразить".

    Строка выделена желтым цветом. В нижней части интегрированной среды разработки окна "Авто", "Локальные" и "Наблюдение" закреплены вместе слева. Окна "Стек вызовов", "Точки останова", "Параметры исключений", "Команды", "Немедленное" и "Выходные данные" закреплены справа.

  6. В строке меню выберите ОтладкаStep Out.

    Приложение запускается снова. Откроется диалоговое окно со словом "Hello".

  7. Нажмите кнопку "ОК ", чтобы закрыть диалоговое окно.

  8. В окне приветствия выберите переключатель прощание, а затем нажмите кнопку отображения.

    Строка выделена желтым цветом.

  9. Выберите ключ F5, чтобы продолжить отладку. Когда появится диалоговое окно, нажмите кнопку "ОК ", чтобы закрыть диалоговое окно.

  10. Закройте окно приложения, чтобы остановить отладку.

  11. В строке меню выберите ОтладкаОтключить все точки останова.

Сборка релизной версии

Убедившись, что все работает, можно подготовить релизную сборку приложения.

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

  2. Измените конфигурацию сборки для HelloWPFApp с Debug на Release, используя выпадающий список на панели инструментов.

  3. Выберите СборкаСобрать решение.

Поздравляем с завершением работы с этим руководством! Вы можете найти .exe, который вы построили, в каталоге вашего решения и проекта (...\HelloWPFApp\bin\Release).

Следующий шаг

Перейдите к следующей статье, чтобы узнать, как создать приложение Windows Forms в Visual Studio с помощью Visual Basic.

Создайте приложение Windows Forms

Дополнительные сведения о Visual Studio см. в следующем разделе:

  • советы по повышению производительности
  • Last updated on