По разным причинам большинство из нас использует десктопные приложения, как минимум, браузер 🙂 А у некоторых из нас возникает необходимость в написании своих. В этой статье я хочу пробежаться по процессу разработки несложного десктопного приложения с использованием технологии Windows Presentation Foundation (WPF) и применением паттерна MVVM. Желающих продолжить чтение прошу под кат.
Думаю, необязательно говорить, что WPF — это разработка Microsoft 🙂 Технология эта предназначена для разработки десктопных приложений под Windows, начиная с Windows XP. Почему именно так? Это связано с тем, что WPF работает поверх платформы .NET, минимальные требования которой — Windows XP и новее. К сожалению, WPF не работает на других платформах, хотя есть шансы, что в ближайшее время это изменится: в стадии разработки находится WPF-based фреймворк Avalonia.
В чём особенность WPF?
Два основных отличия WPF от других средств построения десктопных приложений:
- Язык разметки XAML, предназначенный для разметки самого интерфейса окна.
- Рендеринг посредством DirectX, аппаратное ускорение графики.
Я не буду углубляться в подробности, т.к. это не совсем тема статьи. Если интересно, то гуглить XAML, WPF rendering, milcore.dll и DirectX 🙂
ПИШЕМ ПРИЛОЖЕНИЕ СПИСОК ДЕЛ НА C# WPF ОТ НАЧАЛА ДО КОНЦА | DATAGRID | JSON ПАРСИНГ РАБОТА С ФАЙЛАМИ
О чём эта статья?
Эта статья содержит пример приложения, построенного на технологии WPF:
Я постараюсь ориентировать материал статьи в практическую сторону в стиле «повторяй за мной» с пояснениями.
Что нам понадобится для повторения статьи?
Небольшой опыт разработки на C# 🙂 Как минимум, нужно хорошо понимать синтаксис языка. Также понадобится Windows-машина (в примерах будет Win 10) с установленной на ней Visual Studio (в примерах будет 2017, есть бесплатная Community версия). При установке VS необходимо будет включить поддержку десктопной разработки под платформу .NET
Так же в этом разделе я опишу создание проекта.
Запускаем VS, создаём новый проект, тип приложения выбираем WPF App (.NET Framework) (можно ввести в строке поиска справа вверху), называем как угодно.
После создания нового проекта откроется окно редактора интерфейса, у меня оно выглядит так
Внизу находится редактор разметки, вверху — предпросмотр интерфейса окна, но можно поменять относительное расположение редактора кода и предпросмотра интерфейса так, что они будут располагаться в горизонтальном порядке, с помощью вот этих кнопок (справа на границе двух областей):
Перед тем, как начать
Элементы окна (их ещё называют контрОлами от слова Control) должны размещаться внутри контейнера или внутри другого элемента типа ContentControl. Контейнер — это специальный контрол, позволяющий разместить внутри себя несколько дочерних контролов и организовать их взаимное расположение. Примеры контейнеров:
C# WPF MONEY example of a desktop application | пример программы на языке программирования C# (WPF)
- Grid — позволяет организовать элементы по столбцам и строкам, ширина каждого столбца или строки настраивается индивидуально.
- StackPanel — позволяет расположить дочерние элементы в одну строку или столбец.
Есть и другие контейнеры. Поскольку контейнер тоже является контролом, то внутри контейнера могут быть вложенные контейнеры, содержащие вложенные контейнеры и так далее. Это позволяет гибко располагать контролы относительно друг друга. Так же с помощью контейнеров мы можем не менее гибко управлять поведением вложенных контролов при изменении размеров окна.
MVVM и интерфейс INotifyPropertyChanged. Копия текста.
Итогом этого примера станет приложение с двумя контролами, в одном из которых можно редактировать текст, а в другом только просматривать. Изменения из одного в другой будут переходить синхронно без явного копирования текста с помощью привязки (binding).
Итак, у нас есть свежесозданный проект (я назвал его Ex1), перейдём в редактор разметки и первым делом заменим контейнер, указанный по умолчанию ( ) на . Этого контейнера будет достаточно, т.к. нам понадобится расположить всего лишь два контрола один над другим. Укажем явно, каким образом будут располагаться компоненты, добавив свойство Orientation=»Vertical». Добавим внутрь стек панели парочку элементов: поле для ввода текста и поле для отображения текста. Поскольку эти контролы не будут содержать вложенного кода, можно описать их самозакрывающимся тегом (см. код ниже). После всех вышеописанных процедур код описания контейнера и вложенных контролов должен принять такой вид:
Теперь сосредоточимся на цели этого примера. Мы хотим, чтобы при наборе текста в текстбоксе этот же текст синхронно отображался в текстблоке, избежав при этом явной операции копирования текста. Нам понадобится некая связующая сущность, и вот тут-то мы и подошли к такой штуке, как привязка (binding), о которой было сказано выше.
Привязка в терминологии WPF — это механизм, позволяющий связывать некоторые свойства контролов с некоторыми свойствами объекта C#-класса и выполнять взаимное обновление этих свойств при изменении одной из частей связки (это может работать в одну, в другую или в обе стороны сразу). Для тех, кто знаком с Qt, можно провести аналогию слотов и сигналов. Чтобы не растягивать время, перейдём к коду.
Итак, для организации привязки нужны свойства контролов и некое свойство некоего C#-класса. Для начала разберёмся с XAML-кодом. Текст обоих контролов хранится в свойстве Text, поэтому добавим привязку для этих свойств. Делается это так:
C#. WPF. Пример создания нового приложения, поддерживающего платформу WPF (Windows Presentation Foundation). Создание приложения-приветствия «Hello world!» Обзор осн
Пример создания нового приложения, поддерживающего платформу WPF ( Windows Presentation Foundation ). Создание приложения-приветствия «Hello world!» Обзор основных файлов проекта
Поиск на других ресурсах:
Условие задачи
Используя графическую систему отображения Windows Presentation Foundation ( WPF ), разработать приложение, которое по нажатию кнопки выводит приветствие «Hello world!» . Приложение разработать в среде Microsoft Visual Studio .
Выполнение
1. Загрузить Microsoft Visual Studio
В результате отобразится окно в котором пока что нет ни одного решения (solution).
2. Создание нового проекта по шаблону WPF ( Windows Presentation Foundation )
Чтобы вызвать окно создания нового проекта нужно вызвать команду
File -> New -> Project.
как изображено на рисунке 1.
Рис. 1. Команда создания нового проекта
В результате откроется окно New Project , изображенное на рисунке 2. В окне нужно выбрать следующие элементы:
- во вкладке Installed Templates выбрать Visual C# ;
- в основной вкладке выбрать WPF Application ;
- в поле Name задать имя проекта. Оставим имя по умолчанию WPF Application1, которое предлагает система;
- в поле Location выбирается папка, в которой будет создан проект. В нашем случае название папки (каталога) «C:ProgramsC_SharpWPF» ;
- в поле Solution Name задается имя решения. Оставим имя по умолчанию WpfApplication1.
Рис. 2. Окно создания проекта по шаблону WPF Application
3. Окно Microsoft Visual Studio после создания проекта по шаблону WPF Application
После создания проекта, система Microsoft Visual Studio примет приблизительный вид, как показано на рисунке 3.
Рис. 3. Окно Microsoft Visual Studio после создания проекта
На рисунке схематично показаны основные области, которые используются для создания приложений по шаблону WPF Application :
- 1 – Панель инструментов Toolbox. Здесь отображаются элементы управления, которые предназначены для организации взаимодействия пользователя с приложением. Например, кнопки, текстовые строки, поля ввода и т.п.
- 2 – Окно Solution Explorer, в котором отображаются файлы проекта (проектов). С помощью выбора нужного файла (мышкой или клавиатурой) в Solution Explorer можно перейти к его редактированию в основном окне.
- 3 – Основное окно, которое отображает форму приложения. Этому окну соответствует файл (модуль) MainWindow.xaml . Этот файл описывает характеристики формы на языке XAML ( Extensive Application Markup Language ).
- 4 – Текст характеристик основной формы на языке XAML, соответствующий файлу MainWindow.xaml .
- 5 – Файл MainWindow.xaml.cs , который соответствует тексту на языке C# . В тексте этого файла формируется программный код управления приложением, созданным по шаблону WPF Application .
- 6 – Окно Properties, в котором отображаются свойства (Properties) и события (Events) основной формы приложения.
4. Файлы проекта, который создает Microsoft Visual Studio
После создания приложения по шаблону WPF Application , система создаст ряд файлов. Эти файлы можно просмотреть в окне утилиты Solution Explorer (рис. 4). Ниже рассмотрены основные файлы проекта:
1. Файл AssemblyInfo.cs – содержит общую информацию о сборке в виде атрибутов. Можно изменять эти атрибуты, с целью корректировки информации, которая ассоциируется со сборкой.
2. Раздел References – отображает информацию о сборках и .dll файлах этих сборок, которая используется для создания данного проекта. Подробную информацию о файлах сборок можно просмотреть в Object Browser (команда View->Object Browser ).
3. Файл App.xaml.cs – представляет собой данное приложение на языке C# . В файле представлен класс App , который унаследован из класса Application . В данном случае класс Application инкапсулирует в себе WPF -приложение.
4. Файл App.xaml – представляет данное приложение, которое описано на языке XAML .
5. Файл MainWindow.xaml . В этом файле представляется код на языке XAML ( Extensive Application Markup Language ). Язык XAML позволяет представить окно программы набором дескрипторов, которые после запуска программы используются для генерации объектов.
6. Файл MainWindow.xaml.cs – в этом файле помещается программный код на языке C# . Здесь есть возможность добавлять собственные классы, методы, обработчики событий, интерфейсы, делегаты и прочее. Этот файл соответствует главной форме приложения. В этом файле представлен класс MainWindow , который инкапсулирует в себе члены данных, методы, обработчики событий и другие элементы, которые будут использоваться в программе.
Рис. 4. Окно утилиты Solution Explorer
5. Размещение элементов управления на форме (проектирование формы)
Основной форме приложения соответствует файл MainWindow.xaml .
С помощью панели инструментов Toolbox , на форме размещаются следующие элементы управления (компоненты) (рис. 5):
- элемент управления типа Label. Будет создан объект (переменная) с именем label1. Этот элемент управления представляет собой текстовое сообщение, которое отображается на форме;
- элемент управления типа Button. Создается объект (переменная) с именем button1. Этот элемент управления представляет собой обычную кнопку. После клика на этой кнопке будет отображаться текст «Hello world!» .
Рис. 5. Окно основной формы приложения после размещения элементов управления Button , Label
6. Настройка элементов управления Button , Label
Свойства элементов управления настраиваются с помощью окна Properties (см. рис. 3).
Для правильного отображения формы, нужно настроить соответствующие свойства следующих элементов управления:
- в элементе управления label1 свойство Content = «» (пустая строка);
- в элементе управления button1 свойство Content = «Показать» .
Рис. 6. Элемент управления label1 типа Label
Рис. 7. Элемент управления button1 типа Button
7. Задание заголовка программы
Рис. 8. Задание заголовка программы
8. Программирование события клика на кнопке «Показать»
В соответствии с условием задачи, программа должна отображать текст «Hello world!» после нажатия на кнопке «Показать» . Этой кнопке соответствует элемент управления button1 . Для отображения сообщения «Hello world!» нужно запрограммировать событие Click элемента управления button1 . Система Microsoft Visual Studio сформирует соответствующий программный код, в котором нужно запрограммировать собственные действия. Метод, соответствующий этому программному коду, называется обработчик события. Обработчик события – это обычный метод (функция).
Программирование события выполняется с помощью окна Properties .
Последовательность шагов следующая.
- С помощью мышки активировать (выделить) элемент управления button1 .
- С помощью мышки активировать (выделить) вкладку Event в окне Properties . В результате отобразится перечень событий, которые поддерживаются элементом управления button1 (рисунок 9).
- Сделать двойной клик в области текста события Click . В результате активизируется окно модуля (файла) MainWindow.xaml.cs , в котором отобразится обработчик события button1_Click() . Этот обработчик будет вызываться при нажатии на кнопке «Показать» . Пока что текст обработчика следующий:
private void button1_Click(object sender, RoutedEventArgs e)
4. В теле обработчика события на языке C# нужно набрать текст
label1.Content = «Hello world!»;
Рис. 9. Программирование события Click элемента управление button1
9. Текст файла MainWindow.xaml.cs
Файл MainWindow.xaml.cs отображает текст программы на языке C#. В нашем случае для прибавлению, созданного по шаблону WPF Application , текст файла следующий:
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfApplication1 < /// /// Interaction logic for MainWindow.xaml /// public partial class MainWindow : Window < public MainWindow() < InitializeComponent(); >private void button1_Click(object sender, RoutedEventArgs e) < label1.Content = «Hello world!»; > > >
10. Текст файла MainWindow.xaml
Файл MainWindow.xaml отображает размещение элементов управления (кнопки, текстовые поля, сообщения, графические объекты и т.д.), представленных в окнах приложения WPF. Таким образом, представление графической части отделено от программного кода. Графическая часть представляется этим файлом, а программная часть представлена файлом MainWindow.xaml.cs .
Листинг файла для нашей задачи приблизительно следующий:
Window x_Class=»WpfApplication1.MainWindow» xmlns_x=»https://schemas.microsoft.com/winfx/2006/xaml» Title=»MainWindow» Height=»350″ Width=»525″> Grid Height=»282″> Button Content=»Показать» Height=»23″ HorizontalAlignment=»Left» Margin=»180,143,0,0″ Name=»button1″ VerticalAlignment=»Top» Width=»75″ Click=»button1_Click» /> Label Height=»28″ HorizontalAlignment=»Left» Margin=»180,61,0,0″ Name=»label1″ VerticalAlignment=»Top» /> Grid> Window>
11. Запуск программы на выполнение
Теперь можно запускать программу на выполнение помощью команды Run из меню Run .
Связанные темы
Источник: www.bestprog.net
Пример программы на wpf
Для создания приложения на WPF и C# необходимы две вещи: текстовый редактор для написания кода программы и компилятор для компиляции кода в приложение.
В качестве текстового редактора можно взять любой понравившийся, например, Visual Studio Code
А для компиляции и запуска программы нам потребуется .NET SDK. Для его установки перейдем на официальный сайт по ссылке .NET SDK
После установки .NET SDK для первого проекта определим какую-нибудь папку. Например, в моем случае это будет папка C:dotnetwpfhelloapp . Откроем терминал/командную строку и перейдем к созданной папке проекта с помощью команды cd
cd C:dotnetwpfhelloapp
В данном случае мы для создания и запуска проекта мы будем использовать встроенную инфраструктуру .NET CLI, которая устанавливается вместе с .NET SDK.
Для создания проекта в .NET CLI применяется команда dotnet new , после которой указывается тип проекта. Для создания проекта WPF применяется шаблон — wpf . Поэтому введем в терминале команду
dotnet new wpf
После выполнения этой команды у нас будет создан следующий проект:
Структура проекта WPF
Рассмотрим базовую структуру простейшего стандартного проекта WPF:
- helloapp.csproj : стандартный файл проекта C#, который соответствует назанию проекта (по умолчанию названию каталога) и описывает все его настройки.
- App.xaml задает ресурсы приложения и ряд конфигурационных настроек в виде кода XAML. В частности, в файле App.xaml задается файл окна программы, которое будет открываться при запуске приложения. Если вы откроете этот файл, то можете найти в нем строку StartupUri=»MainWindow.xaml» — то есть в данном случае, когда мы запустим приложение, будет создаваться интерфейс из файла MainWindow.xaml . App.xaml.cs — это файл кода на C#, связанный с файл App.xaml , который также позволяет задать ряд общих ресурсов и общую логику для приложения, но в вид кода C#.
- AssemblyInfo.cs содержит информацию о создаваемой в процессе компиляции сборке
- MainWindow.xaml представляет визуальный интерфейс окна приложения в виде кода XAML. MainWindow.xaml.cs — это файл логики кода на C#, связанный с окном MainWindow.xaml .
WinExe net7.0-windows enable true enable
- OutputType : определяет выходной тип проекта. Должен иметь значение WinExe — то есть выполняемое приложение с расширением exe под Windows
- TargetFramework : определяет применяемую для компиляции версию фреймворка .NET. Поскольку при создании проекта была выбрана версия .NET 7, а сам проект зависит от компонентов Windows, то здесь должно быть значение net7.0-windows
- Nullable : подключает в проект функционалность ссылочных nullable-типов
- UseWindowsForms : указывает, будет ли проект использовать WPF (для этого устанавливается значение true )
- ImplicitUsings : подключает в проект функциональность неявно подключаемых глобальных пространств имен
Запуск проекта
Проект по умолчанию уже имеет некоторую примитивную базовыую логику. Итак, запустим проект. Для этого выполним команду
dotnet run
При запуске запускается графическое окно, код которого определяют файлы MainWindow.xaml/MainWindow.xaml.cs:
После запуска приложения студия компилирует его в файл с расширением exe. Найти данный файл можно, зайдя в папку проекта и далее в каталог binDebugnet7.0-windows
Создание первого приложения
Однако приложение с пустым окном — не слишком показательный пример. Добавим в него чуть больше функционала. Для этого откроем файл логики кода окна приложения — MainWindow.xaml.cs . Сейчас он имеет следующий код:
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace helloapp < public partial class MainWindow : Window < public MainWindow() < InitializeComponent(); >> >
Здесь определен класс MainWindow, который наследуется от класса Window и берет от него всю базовую функциональность окон. А в конструкторе этого класса вызывается метод InitializeComponent() , который позволяет применить интерфейс из файла MainWindow.xaml .
Теперь изменим файл MainWindow.xaml.cs следующим образом:
using System.Windows; namespace helloapp < public partial class MainWindow : Window < public MainWindow() < InitializeComponent(); >private void Button_Click(object sender, RoutedEventArgs e) < MessageBox.Show(«WPF на METANIT.COM»); >> >
Здесь добавлен метод Button_Click , который будет выступать в качестве обработчика нажатия кнопки. Ообработчики нажатия кнопки должны принимать два параметра типов object и RoutedEventArgs . В самом обработчике вызывается метод MessageBox.Show , который отображает окно с сообщением. Отображаемое сообщение передается в качестве параметра.
Теперь определим саму кнопку. Для этого перейдем к файлу MainWindow.xaml , который содержит разметку визуального интерфейса в виде кода XAML. По умолчанию он имеет следующее содержимое:
XAML в целом напоминает язык разметки HTML: здесь у нас сначала определен элемент верхнего уровня Window — окно приложения, в нем определен элемент Grid — контейнер верхнего уровня, в который мы можем добавлять другие элементы. Каждый элемент может иметь определенные атрибуты. Более подробно с языком XAML и элементами мы познакомимся позднее, а пока изменим эту разметку на следующую:
Для определения кнопки внутри элемента Grid определен элемент Button . Для этого элемента с помощью атрибутов можно установать различные его характеристики. Так, в данном случае устанавливаются следующие атрибуты:
- Content : содержимое кнопки
- FontSize : высота шрифта
- Width : ширина кнопки
- Height : высота кнопки
- Click : обработчик нажатия кнопки. Здесь подключается созданный выше в файле кода C# метод Button_Click . В итоге по нажатию на эту кнопку сработает метод Button_Click
Запустим приложение и нажмем на кнопку, и нам должно отобразиться сообщение:
Источник: metanit.com