Как установить wpf в visual studio

Обновлено: 05.07.2024

Предисловие

Следующий контент переведен из официальных документов Microsoft

Изучив это руководство, вы познакомитесь со многими инструментами, диалоговыми окнами и конструкторами, доступными при разработке приложений с использованием Visual Studio. Вы создадите приложение «Hello, World», спроектируете пользовательский интерфейс, добавите код и отладите ошибки. За это время вы научитесь использовать интегрированную среду разработки (IDE).

Предварительное условие

Настроить IDE

При запуске Visual Studio сначала открывается окно «Пуск». Выберите «Продолжить, но без кода», чтобы открыть среду разработки. Вы увидите окна инструментов, меню и панели инструментов, а также пространство главного окна. Окно «Инструменты» пристыковано к левой и правой сторонам окна «Приложение», с полем поиска, строкой меню и стандартной панелью инструментов вверху. При загрузке решения или проекта редактор и дизайнер отображаются в центре окна приложения. При разработке приложений большая часть времени будет проводиться в этой центральной области.

Создать проект

При создании приложения в Visual Studio вы должны сначала создать проект и решение. В этом примере будет создан проект Windows Presentation Foundation (WPF).

Откройте Visual Studio 2019.
В окне «Пуск» выберите «Создать новый проект».

4. На следующем экране дайте проекту имя «HelloWPFApp» и выберите «Создать».

Visual Studio создаст проект и решение HelloWPFApp, а «Обозреватель решений» отобразит различные файлы. «Конструктор WPF» отображает представление конструктора и представление XAML файла MainWindow.xaml в разделенном представлении. Вы можете сдвинуть разделитель, чтобы показать больше или меньше частей любого вида. Вы можете выбрать просмотр только визуального представления или представления XAML.

Примечания:Чтобы узнать больше о XAML (расширяемом языке разметки приложений), обратитесь кОбзор XAML для WPFстраница.

Вы можете настроить его после создания проекта. Чтобы выполнить эту операцию, выберите «Окно свойств» в меню «Вид» или нажмите F4. Затем вы можете отображать и изменять параметры элементов, элементов управления и других элементов в приложении.

Измените имя MainWindow.xaml

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

Дизайн пользовательского интерфейса (UI)

Если дизайнер не открыт, выберите «Greetings.xaml», а затем нажмите «Shift + F7», чтобы открыть дизайнер.

Мы добавим в это приложение три типа элементов управления: элемент управления TextBlock, два элемента управления RadioButton и элемент управления Button.

Добавить элемент управления TextBlock

Нажмите «Ctrl + Q», чтобы активировать окно поиска, а затем введите «панель инструментов». В списке результатов выберите «Вид»> «Панель инструментов».

На панели инструментов разверните узел «Общедоступные элементы управления WPF», чтобы просмотреть элемент управления TextBlock.

Добавьте элемент управления TextBlock в область конструктора, выбрав элемент «TextBlock» и перетащив его в окно в области конструктора. Отцентрируйте элемент управления в верхней части окна. В Visual Studio 2019 и более поздних версиях вы можете использовать красную справочную линию для центрирования элемента управления.

Ваше окно должно выглядеть как на изображении ниже:

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

Настроить текст в текстовом блоке

В представлении XAML найдите разметку TextBlock и измените свойство Text с TextBox изменить на Select a message option and then choose the Display button.

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

Если хотите, снова отцентрируйте TextBlock и сохраните изменения, нажав Ctrl + S или используя пункт меню «Файл».

Затем добавьте в форму два элемента управления RadioButton.

Добавить переключатель

В «Панели инструментов» найдите элемент управления «RadioButton». .

2. Добавьте два элемента управления RadioButton в область конструктора, выбрав элемент «RadioButton» и перетащив его в окно на поверхности конструктора. Переместите кнопки (выбирая их и используя клавиши со стрелками), чтобы кнопки отображались рядом под элементом управления TextBlock. Используйте красную контрольную линию для выравнивания элементов управления.

Ваше окно должно выглядеть так:

3. Слева от элемента управления RadioButton.«Атрибуты»В окне будет"название"Атрибут (находится в«Атрибуты»В верхней части окна) изменится на HelloButton 。

4. В окне «Свойства» элемента управления RadioButton справа измените свойство «Имя» на GoodbyeButton , Затем сохраните изменения.

Затем вы добавите отображаемый текст для каждого элемента управления RadioButton. Следующая программа обновит элемент управления RadioButton"содержание"Атрибуты.

Добавьте отображаемый текст для каждого переключателя

В XAML HelloButton с участием GoodbyeButton Атрибут "content" обновлен до "Hello" с участием "Goodbye" . Разметка XAML теперь должна напоминать следующий пример:

Установите переключатель в положение по умолчанию

На этом шаге HelloButton будет выбран по умолчанию, поэтому всегда будет выбран один из двух переключателей.

В представлении XAML найдите разметку для HelloButton.
Добавьте свойство IsChecked и установите для него значение «True». В частности, добавьте IsChecked="True" 。

Разметка XAML теперь должна напоминать следующий пример:

Последний добавленный элемент пользовательского интерфейса - это элемент управления Button.

Добавить кнопку управления

В «Панели инструментов» найдите элемент управления «Кнопка», а затем добавьте его в интерфейс дизайна под элементом управления RadioButton, перетащив элемент управления на форму в представлении конструктора. Если вы используете Visual Studio 2019 или более поздней версии, появится красная линия, которая поможет вам центрировать элемент управления.
В представлении XAML измените значение «содержимого» элемента управления Button с Content="Button" изменить на Content="Display" , Затем сохраните изменения.

Ваше окно должно выглядеть примерно так, как показано на рисунке ниже.

Разметка XAML теперь должна напоминать следующий пример:

Добавить код на кнопку дисплея

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

В это время открывается «Greetings.xaml.cs», и курсор находится на Button_Click Об инциденте.

2. Введите следующий код:

3. Сохраните заявку.

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

Найдите и исправьте ошибки

На этом этапе вы столкнетесь с предыдущей ошибкой, вызванной изменением имени файла MainWindow.xaml.

Начать отладку и найти ошибки

Запустите отладчик, нажав F5 или выбрав «Отладка», а затем «Начать отладку».

Появится окно «Режим прерывания», а в окне «Вывод» будет указано, что возникла исключительная ситуация IOException: «Не удалось найти ресурс'mainwindow.xaml '».

2. Выберите «Отладка»> «Остановить отладку», чтобы остановить программу отладки.

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

Укажите Greetings.xaml в качестве URI запуска

В «Обозревателе решений» откройте файл «App.xaml».
Будет StartupUri="MainWindow.xaml" изменить на StartupUri="Greetings.xaml" , Затем сохраните изменения.

Снова запустите отладчик (нажмите «F5»). Вы должны увидеть окно приветствия приложения.

Теперь закройте окно приложения и прекратите отладку.

Используйте точки останова для отладки

Вы можете протестировать код во время отладки, добавив несколько точек останова. Вы можете добавить точку останова, выбрав «Отладка»> «Переключить точку останова», щелкнув левое поле рядом со строкой кода, где вы хотите добавить точку останова в редакторе, или нажав F9.

Добавить точку останова

Откройте Greetings.xaml.cs и выберите следующую строку: MessageBox.Show("Hello.")
По выбору"отладка"-> «Переключить точку останова»Чтобы добавить точку останова из меню. Красный кружок появляется рядом со строкой кода в крайнем левом поле окна редактора.
Выберите следующую строку: MessageBox.Show("Goodbye.") 。
Нажмите клавишу «F9», чтобы добавить точку останова, а затем нажмите «F5», чтобы начать отладку.
В“Greetings”В окне выберите“Hello”Радиокнопка, а затем выберите"дисплей"Кнопка. Чтобы MessageBox.Show("Hello.") Строка будет выделена желтым цветом. Внизу IDE окна «авто», «локальное» и «мониторинг» состыкованы вместе слева, а окна «стек вызовов», «точка останова», «настройки исключений», «команда», «немедленный» и «вывод». Состыкованы справа.

6. В строке меню выберите «Отладка»> «Выход».

8. В“Greetings”В окне выберите“Goodbye”Радиокнопка, а затем выберите"дисплей"Кнопка. Строка MessageBox.Show("Goodbye.") Будет выделен желтым цветом.

10. Закройте окно приложения и прекратите отладку.

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

Просмотр представления элементов пользовательского интерфейса

В запущенном приложении вы увидите небольшой компонент, отображаемый в верхней части окна. Это помощник во время выполнения, с помощью которого вы можете быстро получить доступ к некоторым полезным функциям отладки. Нажмите первую кнопку «Перейти к дереву визуализации в реальном времени». Сразу вы увидите окно, содержащее дерево, которое содержит все визуальные элементы страницы. Разверните узел и найдите добавленную кнопку.

Сгенерировать релизную версию приложения

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

В главном меню выберите «Создать»> «Чистое решение» по очереди, чтобы удалить промежуточные файлы и файлы вывода, созданные в процессе предыдущего создания. Это не обязательно, но это очистит выходные данные отладочной сборки.
Используйте раскрывающийся список на панели инструментов (в настоящее время отображается «Отладка»), чтобы изменить конфигурацию сборки HelloWPFApp с «Отладка» на «Выпуск».
Выберите «Создать»> «Создать решение», чтобы сгенерировать решение.
Созданный файл .exe можно найти в каталоге решения и проекта (. \ HelloWPFApp \ HelloWPFApp \ bin \ Release).

Интеллектуальная рекомендация

совместный запрос mysql с тремя таблицами (таблица сотрудников, таблица отделов, таблица зарплат)

1. Краткое изложение проблемы: (внизу есть инструкция по созданию таблицы, копирование можно непосредственно практиковать с помощью (mysql)) Найдите отделы, в которых есть хотя бы один сотрудник. Отоб.

[Загрузчик классов обучения JVM] Третий день пользовательского контента, связанного с загрузчиком классов

IP, сеанс и cookie

Помимо установки ссылок на все сборки WPF (PresentationCore.dll, PresentationFoundation.dll и WindowsBase.dll), вы также получаете начальные классы-наследники Window и Application и возможность использования файлов кода и связанный XAML-файл.

В Visual Studio 2010 предусмотрена панель инструментов (Toolbox), доступная через пункт меню View (Вид) и содержащая множество элементов управления WPF. Используя стандартное перетаскивание с помощью мыши, можно поместить любой из этих элементов управления на поверхность визуального конструктора элемента Window. При этом соответствующий XAML будет сгенерирован автоматически. Тем не менее, разметку можно также вводить и вручную, с использованием интегрированного редактора XAML.

Расположение панелей визуального конструктора легко изменять с помощью кнопок, встроенных в разделитель — Swap Panels (Поменять панели), которая помечена стрелками вверх/вниз, Horizontal Split (Разделить горизонтально) и Vertical Split (Разделить вертикально) и т.д. Уделите время на удобную для себя организацию панелей.

После помещения элементов управления на поверхность визуального конструктора можете использовать окно Properties (Свойства) для установки значений свойств выбранного элемента управления, а также для создания обработчиков событий для выбранного элемента. Для примера перетащите элемент управления — кнопку на любое место поверхности визуального конструктора. В результате Visual Studio сгенерирует XAML-разметку вроде показанной ниже:

Теперь с помощью окна Properties измените цвет фона (Background) элемента Button с использованием встроенного редактора кистей:

Для организации обработки событий, связанных с определенным элементом управления, также может использоваться окно Properties, но на этот раз нужно перейти на вкладку Events (События). Удостоверьтесь, что на поверхности визуального конструктора выбрана кнопка, в окне Properties перейдите на вкладку Events и найдите событие Click. Среда Visual Studio 2010 автоматически построит обработчик событий со следующим именем ИмяЭлементаУправления_ИмяСобытия.

Пока кнопка не переименована, в окне Properties отображается сгенерированный обработчик событий по имени button1_Click.

Содержание

1. Загрузить Microsoft Visual Studio
2. Создание нового проекта по шаблону WPF ( Windows Presentation Foundation )
3. Окно Microsoft Visual Studio после создания проекта по шаблону WPF Application
4. Файлы проекта, который создает Microsoft Visual Studio
5. Размещение элементов управления на форме (проектирование формы)
6. Настройка элементов управления Button , Label
7. Задание заголовка программы
8. Программирование события клика на кнопке «Показать»
9. Текст файла MainWindow.xaml.cs
10. Текст файла MainWindow.xaml
11. Запуск программы на выполнение

Поиск на других ресурсах:

Условие задачи

Выполнение

1. Загрузить Microsoft Visual Studio

В результате отобразится окно в котором пока что нет ни одного решения (solution).

2. Создание нового проекта по шаблону WPF ( Windows Presentation Foundation )

Чтобы вызвать окно создания нового проекта нужно вызвать команду

как изображено на рисунке 1.

Рис. 1. Команда создания нового проекта

В результате откроется окно New Project , изображенное на рисунке 2. В окне нужно выбрать следующие элементы:

Рис. 2. Окно создания проекта по шаблону WPF Application

3. Окно Microsoft Visual Studio после создания проекта по шаблону WPF Application

После создания проекта, система Microsoft Visual Studio примет приблизительный вид, как показано на рисунке 3.

Рис. 3. Окно Microsoft Visual Studio после создания проекта

На рисунке схематично показаны основные области, которые используются для создания приложений по шаблону WPF Application :

4. Файлы проекта, который создает Microsoft Visual Studio

Рис. 4. Окно утилиты Solution Explorer

5. Размещение элементов управления на форме (проектирование формы)

Основной форме приложения соответствует файл MainWindow.xaml .
С помощью панели инструментов Toolbox , на форме размещаются следующие элементы управления (компоненты) (рис. 5):

Рис. 5. Окно основной формы приложения после размещения элементов управления Button , Label

6. Настройка элементов управления Button , Label

Свойства элементов управления настраиваются с помощью окна Properties (см. рис. 3).

Для правильного отображения формы, нужно настроить соответствующие свойства следующих элементов управления:

Рис. 6. Элемент управления label1 типа Label

Рис. 7. Элемент управления button1 типа Button

7. Задание заголовка программы

Рис. 8. Задание заголовка программы

Рис. 9. Программирование события Click элемента управление button1

9. Текст файла MainWindow.xaml.cs

10. Текст файла MainWindow.xaml

Листинг файла для нашей задачи приблизительно следующий:

11. Запуск программы на выполнение

Теперь можно запускать программу на выполнение помощью команды Run из меню Run .

В этой статье показан пример создания WPF-приложения на основе MVVM паттерна проектирования. За основу используется PRISM 6, как MVVM-фреймворк и Autofac, как DI-контейнер.

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

Постараюсь очень кратко изложить основную мысль, поэтому сразу к делу. Для проекта выбираем WPF Application:

Название для проекта вы можете выбрать на своё усмотрение, а я всегда придерживаюсь принципов описанных в предыдущей статье. После того, как Visual Studio создат проект, я удалю файл MainWindow.xaml, для чистоты эксперимента.

Установка Nuget-пакетов

Для построения приложения по принципам MVVM мне потребуется фреймворк, который реализует этот принцип. Причем сам фреймворк может быть написан собственноручно или создан сторонними разработчиками. Я возьму PRISM фреймворк, который был разработан Microsoft, но в дальнейшем был отдан в OpenSource другим разработчикам, которые, надо сказать, честно, продолжают наращивать функционал.

Следующий на очереди DI-контейнер. В моем случае, это Autofac. Я сразу установлю Prism.Autofac, который установит как зависимость сам Autofac:

Главное окно и его ViewModel

Теперь пришло время создать новое главное окно программы. Так повелось, что для WPF-приложения я обычно использую название для главного окна Shell. Но перед этим создаем папки Views и ViewModels. Теперь создаем Shell.xaml и ShellViewModel.cs в соответствующих папках.

Bootstrapper на Autofac

Создаем Bootstrapper, который наследуем от AutofacBootstrapper:

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

App.xaml

Так как теперь для старта нашего приложения будет использоваться Bootstrapper, необходимо удалить "точку входа" из файла App.xaml.

Удалите выделенный на картинке атрибут.

ShellViewModel.cs

Чтобы наш ShellViewModel превратился в настоящий ViewModel для нашего представления, надо унаследовать класс от BindableBase, который являет собой реализацию интерфейса INotifyPropertyChanged. А еще добавил свойство DisplayName, которое буду использовать как заголовок для моего приложения.

Shell.xaml

Пришло время заняться представлением Shell. Для того, что наш ShellViewModel стал объектом DataContext для нашего Shell можно использовать несколько операций. Но для начала откройте разметку Shell.xaml и свяжите свойство Title со свойством DisplayName (из ShellViewModel).

Теперь можно как вариант в Code-Behind фале App.xaml.cs прописать следующий код

Можно запустить приложение и мы увидим заголовок главного окна программ будет "WPF PRISM (MVVM) + DI (Autofac)". Но перед тем как запустить надо инициализировать наш Bootstrapper в App.xaml.cs.

Вот теперь можно запускать

Не очень информативное представление но факт остается в следующем: MVVM - работает! Однако, надо сказать, что PRISM предоставляет более эстетичный вариант привязки View и ViewModel. Удалите из файла Shell.xaml.cs строку

Более того, я бы вам рекомендовал его больше никогда не открывать при использовании MVVM подхода.

Давайте применим другой подход. Для этого содержимое файла Shell.xaml в соответствии с приведенным листингом.

Можно запустить приложение. Результат будет тем же что и до этого, но теперь в Code-Behind файле чистота и порядок!

Заключение

Вряд ли созданный проект можно считать основой для конкретного приложения. Это просто начало начал. Для того чтобы проект стал проектом надо проделать еще кучу дополнительных телодвижений для подготовки инфраструктуры решения (solution). А вот количество телодвижений и их суть, уже зависит от того, какой тип приложения вы хотите построить: Модульное приложение, MDI-приложение, SDI-приложение и так далее. Одно могу сказать, что PRISM предоставляет все эти возможности.

Читайте также: