как сделать оконное приложение в visual studio 2019
Шаг 1. Создание проекта приложения Windows Forms
Первый шаг в создании программы для просмотра изображений — это создание проекта приложения Windows Forms.
Откройте Visual Studio 2017.
В строке меню выберите Файл > Создать > Проект. Диалоговое окно должно выглядеть так же, как на следующем снимке экрана.
Диалоговое окно _ _»Новый проект»
В левой части диалогового окна Новый проект выберите Visual C# или Visual Basic, а затем — Классическое приложение Windows.
В списке шаблонов проектов выберите Приложение Windows Forms (.NET Framework). Назовите новую форму PictureViewer и нажмите кнопку ОК.
Дополнительные сведения см. в разделе Установка Visual Studio.
Открытие Visual Studio
На начальном экране выберите Создать проект.
В поле поиска окна Создание проекта введите Windows Forms. Затем в списке Тип проекта выберите Рабочий стол.
Применив фильтр Тип проекта, выберите шаблон Приложение Windows Forms (.NET Framework) для C# или Visual Basic и нажмите кнопку Далее.
Если шаблон Приложение Windows Forms (.NET Framework) отсутствует, его можно установить из окна Создание проекта. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов.
Затем нажмите кнопку Изменить в Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это. Выберите Продолжить, чтобы установить рабочую нагрузку.
В поле Имя проекта окна Настроить новый проект введите PictureViewer. Затем нажмите Создать.
Visual Studio создает решение для приложения. Решение играет роль контейнера для всех проектов и файлов, необходимых приложению. Более подробно эти термины поясняются далее в этом учебнике.
Сведения о проекте приложения Windows Forms
Среда разработки содержит три окна: главное окно, Обозреватель решений и окно Свойства.
Если какое-либо из этих окон отсутствует, можно восстановить макет окон по умолчанию. В строке меню выберите Окно > Сброс макета окна.
Можно также отобразить окна с помощью команд меню. В строке меню выберите Вид > Окно «Свойства» или Обозреватель решений.
Если открыты какие-либо другие окна, закройте их с помощью кнопки Закрыть (x) в верхнем правом углу.
Если выбрать файл, содержимое в окне Свойства изменится. Если открыть файл кода (с расширением .cs в C# и .vb в Visual Basic), откроется сам файл кода или конструктор для него. Конструктор — это визуальная поверхность, на которую можно добавлять элементы управления, такие как кнопки и списки. При работе с формами Visual Studio такая поверхность называется конструктор Windows Forms.
Окно «Свойства». В этом окне производится изменение свойств элементов, выбранных в других окнах. Например, выбрав форму Form1, можно изменить ее название путем задания свойства Text, а также изменить цвет фона путем задания свойства Backcolor.
В верхней строке в обозревателе решений отображается текст Решение «PictureViewer» (1 проект). Это означает, что Visual Studio автоматически создала для вас решение. Решение может содержать несколько проектов, но пока что вы будете работать с решениями, которые содержат только один проект.
В строке меню выберите Файл > Сохранить все.
Другой вариант — нажать кнопку Сохранить все на панели инструментов, как показано на рисунке ниже.
Visual Studio автоматически заполняет имя папки и имя проекта, а затем сохраняет проект в папке проектов.
Дальнейшие действия
Создание приложения Windows Forms на Visual Basic в Visual Studio
В рамках этого краткого знакомства с возможностями интегрированной среды разработки Visual Studio (IDE) вы создадите простое приложение на Visual Basic с пользовательским интерфейсом на основе Windows.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.
На некоторых снимках экрана в этом учебнике используется темная тема. Если вы не используете темную тему, но хотите переключиться на нее, см. страницу Персонализация интегрированной среды разработки и редактора Visual Studio.
Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio 2022, если еще не сделали этого.
На некоторых снимках экрана в этом учебнике используется темная тема. Если вы не используете темную тему, но хотите переключиться на нее, см. страницу Персонализация интегрированной среды разработки и редактора Visual Studio.
Создание проекта
Сначала вы создадите проект приложения Visual Basic. Для этого типа проекта уже имеются все нужные файлы шаблонов, что избавляет вас от лишней работы.
Откройте Visual Studio 2017.
В верхней строке меню последовательно выберите Файл > Создать > Проект.
Запустите Visual Studio.
На начальном экране выберите Создать проект.
В окне Создать проект выберите шаблон Приложение Windows Forms (.NET Framework) для Visual Basic.
(При желании вы можете уточнить условия поиска, чтобы быстро перейти к нужному шаблону. Например, введите Приложение Windows Forms в поле поиска. Затем выберите Visual Basic в списке языков и Windows в списке платформ.)
Если шаблон Приложение Windows Forms (.NET Framework) отсутствует, его можно установить из окна Создание проекта. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов.
Затем нажмите кнопку Изменить в Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это. Выберите Продолжить, чтобы установить рабочую нагрузку. После этого вернитесь к шагу 2 в процедуре Создание проекта.
В поле Имя проекта окна Настроить новый проект введите HelloWorld. Затем нажмите Создать.
Новый проект открывается в Visual Studio.
Создание приложения
Когда вы выберете шаблон проекта Visual Basic и зададите имя файла, Visual Studio открывает форму. Форма является пользовательским интерфейсом Windows. Мы создадим приложение Hello World, добавив элементы управления на форму, а затем запустим его.
Добавление кнопки на форму
Щелкните Панель элементов, чтобы открыть всплывающее окно «Панель элементов».
(Если параметр для всплывающего окна Панель элементов отсутствует, его можно открыть в строке меню. Для этого выберите Вид > Панель элементов. Либо нажмите клавиши CTRL+ALT+X.)
Щелкните значок Закрепить, чтобы закрепить окно Панель элементов.
Щелкните элемент управления Кнопка и перетащите его на форму.
В разделе Внешний вид (или Шрифты) окна Свойства введите Click this и нажмите клавишу ВВОД.
(Если окно Свойства не отображается, его можно открыть в строке меню.) Для этого щелкните Вид > Окно свойств. Или нажмите клавишу F4.)
Добавление метки на форму
Теперь, когда мы добавили элемент управления »Кнопка» для создания действия, давайте добавим элемент управления «Метка», куда можно отправлять текст.
Выберите элемент управления Метка в окне Панель элементов, а затем перетащите его на форму и расположите под кнопкой Нажмите это.
В разделе Проект или (DataBindings) окна Свойства измените имя Label1 на lblHelloWorld и нажмите клавишу ВВОД.
Добавление кода на форму
В окне Form1.vb [Design] дважды щелкните кнопку Нажмите это, чтобы открыть окно Form1.vb.
(Кроме того, можно развернуть узел Form1.vb в обозревателе решений, а затем выбрать Form1.)
Запуск приложения
Нажмите кнопку Запустить, чтобы запустить приложение.
Будет выполнено несколько операций. В интегрированной среде разработки Visual Studio откроются окна Средства диагностики и Вывод. Кроме того, вне этой среды откроется диалоговое окно Form1. Оно будет содержать вашу кнопку Нажмите это и текст Label1.
Закройте диалоговое окно Form1, чтобы завершить работу приложения.
Следующие шаги
Для получения дополнительных сведений перейдите к следующему руководству:
руководство. создание первого приложения WPF в Visual Studio 2019
в этой статье показано, как разработать классическое приложение Windows Presentation Foundation (WPF), включающее элементы, которые являются общими для большинства приложений WPF: разметка XAML (XAML), код программной части, определения приложений, элементы управления, макет, привязку данных и стили. Для разработки приложения вы будете использовать Visual Studio.
В этом руководстве описано следующее:
по завершении работы с этим руководством вы создадите автономное приложение Windows, которое позволяет пользователям просматривать отчеты о расходах для выбранных лиц. Приложение состоит из нескольких страниц WPF, размещенных в окне в стиле браузера.
пример кода, который используется в этом учебнике, доступен как для Visual Basic, так и для C# в учебнике пример кода приложения WPF.
язык кода примера кода можно переключать между C# и Visual Basic с помощью селектора языка в верхней части этой страницы.
Предварительные требования
Дополнительные сведения об установке новейшей версии Visual Studio см. в статье Установка Visual Studio.
Создание проекта приложения
Первым шагом является создание инфраструктуры приложения, включающей определение приложения, две страницы и изображение.
создайте новый проект приложения WPF в Visual Basic или Visual C# с именем ExpenseIt :
Введите имя проекта ExpenseIt и нажмите кнопку создать.
Visual Studio создает проект и открывает конструктор для окна приложения по умолчанию с именем MainWindow. xaml.
откройте Application. xaml (Visual Basic) или App. xaml (C#).
Этот XAML-файл определяет приложение WPF и все ресурсы приложения. Этот файл также используется для указания пользовательского интерфейса, в данном случае MainWindow. XAML, который автоматически отображается при запуске приложения.
КОД XAML должен выглядеть следующим образом в Visual Basic:
Аналогично следующему в C#:
Откройте файл MainWindow.xaml.
Этот XAML-файл является главным окном приложения и отображает содержимое, созданное на страницах. WindowКласс определяет свойства окна, такие как заголовок, размер или значок, а также обрабатывает события, такие как закрытие или скрытие.
Удалите Grid элементы из между NavigationWindow тегами.
Измените следующие свойства в коде XAML для NavigationWindow элемента:
Присвойте Title свойству значение » ExpenseIt «.
Задайте Height для свойства значение 350 пикселей.
Задайте Width для свойства значение 500 пикселей.
КОД XAML должен выглядеть следующим образом для Visual Basic:
И, как и в случае с C#:
Откройте файл MainWindow. XAML. vb или MainWindow. XAML. CS.
Этот файл является файлом кода программной части, который содержит код для работы с событиями, объявленными в файле MainWindow. XAML. Этот файл содержит разделяемый класс для окна, определенного в XAML-коде.
Добавление файлов в приложение
В этом разделе вы добавите в приложение две страницы и изображение.
Добавьте в проект новую страницу и назовите ее ExpenseItHome.xaml :
В Обозреватель решений щелкните правой кнопкой мыши ExpenseIt узел проекта и выберите команду добавить > страницу.
В диалоговом окне Добавление нового элемента шаблон Page (WPF) уже выбран. Введите имя ExpenseItHome и нажмите кнопку Добавить.
Эта страница является первой страницей, отображаемой при запуске приложения. Отобразится список людей для выбора, чтобы отобразить отчет о расходах для.
Задайте для параметра значение DesignHeight 350 пикселей, а для параметра — значение DesignWidth 500 пикселей.
Теперь XAML выглядит следующим образом для Visual Basic:
И, как и в случае с C#:
Откройте файл MainWindow.xaml.
Добавьте Source свойство в NavigationWindow элемент и задайте для него значение » ExpenseItHome.xaml «.
Этот набор устанавливается ExpenseItHome.xaml в качестве первой страницы, открытой при запуске приложения.
Пример XAML в Visual Basic:
Добавьте еще одну новую страницу WPF в проект и назовите ее файл ExpenseReportPage. XAML::
В Обозреватель решений щелкните правой кнопкой мыши ExpenseIt узел проекта и выберите команду добавить > страницу.
На этой странице отображается отчет о расходах для пользователя, выбранного на ExpenseItHome странице.
Откройте файл ExpenseReportPage. XAML.
Задайте для параметра значение DesignHeight 350 пикселей, а для параметра — значение DesignWidth 500 пикселей.
Файл ExpenseReportPage. XAML теперь выглядит следующим образом в Visual Basic:
Аналогично следующему в C#:
Откройте ExpenseItHome. XAML. vb и файл ExpenseReportPage. XAML. vb или ExpenseItHome. XAML. CS и файл ExpenseReportPage. XAML. CS.
Код должен выглядеть следующим образом ExpenseItHome :
И, как и для файл ExpenseReportPage:
Щелкните правой кнопкой мыши узел проекта и выберите команду Добавить > существующий элемент или нажмите клавиши SHIFT + ALT + A.
В диалоговом окне Добавление существующего элемента задайте для фильтра файлов значение все файлы или файлы изображений, перейдите к файлу изображения, который необходимо использовать, а затем нажмите кнопку Добавить.
Создание и запуск приложения
На следующем рисунке показано приложение с NavigationWindow кнопками:
Закройте приложение, чтобы вернуться к Visual Studio.
Создание макета
Макет предоставляет упорядоченный способ размещения элементов пользовательского интерфейса, а также управляет размером и положением этих элементов при изменении размера пользовательского интерфейса. Обычно макет создается с одним из следующих элементов управления макетом.
Каждый из этих элементов управления макета поддерживает определенный тип макета для своих дочерних элементов. ExpenseIt размеры страниц можно изменять, и каждая страница содержит элементы, расположенные горизонтально и вертикально рядом с другими элементами. В этом примере Grid используется как элемент макета для приложения.
Дополнительные сведения об Panel элементах см. в разделе Общие сведения о панелях. Дополнительные сведения о макете см. в разделе Layout.
В ExpenseItHome.xaml Задайте для Margin свойства Grid элемента значение «10, 0, 10, 10», которое соответствует левому, верхнему, правому и нижнему полям:
Можно также задать значения полей в окне свойства в категории Макет :
Добавьте следующий код XAML между Grid тегами, чтобы создать определения строк и столбцов:
GridТеперь должен содержаться следующий код XAML:
Добавление элементов управления
В этом разделе вы обновите пользовательский интерфейс домашней страницы, чтобы отобразить список людей, в которых вы выбрали одного пользователя для отображения отчета о расходах. Элементы управления — это объекты пользовательского интерфейса, позволяющие пользователям взаимодействовать с приложением. Более подробную информацию см. в разделе Элементы управления.
Чтобы создать этот пользовательский интерфейс, добавьте следующие элементы в ExpenseItHome.xaml :
Каждый элемент управления помещается в строку объекта Grid путем установки Grid.Row присоединенного свойства. Дополнительные сведения о вложенных свойствах см. в разделе Общие сведения о вложенных свойствах.
В ExpenseItHome.xaml добавьте в тег следующий код XAML между Grid тегами:
Создайте и запустите приложение.
На следующем рисунке показаны созданные элементы управления.
Добавление изображения и заголовка
В этом разделе вы обновите пользовательский интерфейс домашней страницы, используя изображение и заголовок страницы.
В ExpenseItHome.xaml добавьте еще один столбец в ColumnDefinitions с фиксированным Width 230 пикселов:
Переместите элементы управления во второй столбец, задав Grid.Column свойству значение 1 в каждом из трех элементов управления (граница, ListBox и кнопка).
Переместите каждый элемент управления по строке, увеличив его Grid.Row значение на 1 для каждого из трех элементов управления (границы, ListBox и Button) и для элемента Border.
Теперь XAML для трех элементов управления выглядит следующим образом:
Задайте для свойства Background значение watermark.png файл изображения, ДОбавив следующий код XAML в любое место между тегами и:
Перед Border элементом добавьте Label с содержимым «Просмотр отчета о расходах». Эта метка является заголовком страницы.
Создайте и запустите приложение.
На следующем рисунке показаны результаты только что добавленных элементов.
Добавление кода для обработчика событий
В ExpenseItHome.xaml добавьте Click к Button элементу обработчик событий. Дополнительные сведения см. в разделе инструкции. Создание простого обработчика событий.
Создание пользовательского интерфейса для файл ExpenseReportPage
Файл ExpenseReportPage. XAML отображает отчет о расходах для пользователя, выбранного на ExpenseItHome странице. В этом разделе вы создадите пользовательский интерфейс для файл ExpenseReportPage. Вы также добавите цвета фона и заливки в различные элементы пользовательского интерфейса.
Откройте файл ExpenseReportPage. XAML.
Добавьте следующий код XAML между Grid тегами:
Создайте и запустите приложение.
Появится страница отчета по расходам. Также обратите внимание, что кнопка обратной навигации включена.
На следующем рисунке показаны элементы пользовательского интерфейса, добавленные в файл ExpenseReportPage. XAML.
Элементы управления стиля
Внешний вид различных элементов часто одинаков для всех элементов одного типа в пользовательском интерфейсе. Пользовательский интерфейс использует стили для того, чтобы внешний вид можно было использовать в нескольких элементах. Многократное использование стилей помогает упростить создание XAML и управление им. В этом разделе атрибуты, установленные ранее для каждого элемента, заменяются стилями.
Откройте Application. XAML или app. XAML.
Добавьте следующий код XAML между Application.Resources тегами:
Этот код XAML добавляет следующие стили:
headerTextStyle для форматирования заголовка страницы Label;
labelStyle для форматирования элементов управления Label ;
columnHeaderStyle для форматирования DataGridColumnHeader;
listHeaderStyle для форматирования элементов управления Border заголовков списка;
В ExpenseItHome.xaml замените все между Grid элементами следующим кодом XAML:
Откройте файл ExpenseReportPage. XAML.
Замените все элементы на Grid следующий код XAML:
Создайте и запустите приложение. Внешний вид окна такой же, как и ранее.
Закройте приложение, чтобы вернуться к Visual Studio.
Привязка данных к элементу управления
В этом разделе вы создадите XML-данные, привязанные к различным элементам управления.
Данные создаются в виде Grid ресурса. Обычно эти данные загружаются в виде файла, но для простоты данные добавляются встроенным образом.
Дополнительные сведения о шаблонах данных см. в разделе Общие сведенияо создании шаблонов данных.
Замените существующий ListBox код XAML следующим:
Подключение данных в элементы управления
Далее предстоит добавить код для получения имени, выбранного на ExpenseItHome странице, и передачи его конструктору файл ExpenseReportPage. Файл ExpenseReportPage устанавливает в качестве контекста данных переданный элемент, который является элементом управления, определенным в привязке файл ExpenseReportPage. XAML к.
Откройте файл ExpenseReportPage.xaml.vb или ExpenseReportPage.xaml.cs.
Добавьте конструктор, принимающий объект, чтобы можно было передавать данные отчета о затратах выбранного человека.
Измените Click обработчик событий, чтобы вызвать новый конструктор, передающий данные отчета о затратах выбранного человека.
Применение стилей к данным с помощью шаблонов данных
В этом разделе вы обновите пользовательский интерфейс для каждого элемента в списках с привязкой к данным с помощью шаблонов данных.
Откройте файл ExpenseReportPage. XAML.
Привяжите содержимое элементов «Name» и «Department» Label к соответствующему свойству источника данных. Дополнительные сведения о привязке данных см. в разделе Общие сведения о привязке данных.
После открывающего Grid элемента добавьте следующие шаблоны данных, определяющие способ отображения данных отчета о расходах:
Замените DataGridTextColumn элементы DataGridTemplateColumn DataGrid элементом в элементе и примените к ним шаблоны. Кроме того, укажите ItemsSource атрибут со значением в DataGrid элементе.
Создайте и запустите приложение.
На следующем рисунке показаны обе страницы ExpenseIt приложения с примененными элементами управления, макет, стили, привязка данных и шаблоны данных:
Дальнейшие действия
Более подробную информацию о создании приложений см. в следующих разделах: