Создание графического интерфейса в Visual Studio 2017 (C++)
В интернете можно обнаружить множество роликов, насколько легко было создавать графические приложения в Visual Studio 2010 через «Windows Forms Application». В VS2015 и VS2017 с инструментами для новичков стало сложнее. Создать приложение можно несколькими способами, наиболее простым является через «CLR Empty Project». Статья предназначена для новичков, но предполагает, что читатель уже не испытывает проблем с созданием консольных приложений вида «Hello World». Бесплатную VS Community 2017 можнос скачать с visualstudio.com.
1. В первую очередь перечислим, какие компоненты должны быть установлены для создания графического приложения на языке С++. Их три, все относятся к разделу «Desktop development with C++»:
— VC++ 2017 v141 toolset (x86,x64)
— Windows 10 SDK (10.0.15063.0) for Desktop C++ x86 and x64
— C++/CLI support
2. После установки среды разработки переходим
File > New > Project. ( ^+N )
В появившемся окне отыскиваем Installed > Visual C++ > CLR > CLR Empty Project 
Поля внизу заполняем традиционным для таких программ способом. В названии проекта лучше не допускать пробелов, иначе вам потом придётся мудрить в коде.
3. Необходимо добавить в приложение главную форму. Есть два равносильных пути достижения этой цели.
Первый: в «Solution Explorer» правой кнопкой мыши на названии проекта, во всплывшем контексном меню Add > New Item.
Второй способ: в главном меню выбираем Project > Add New Item.
Или просто нажимаем ^+A
Во появившемся окне Visual C++ > UI > Windows Form 
Главная форма программы создана. На некоторых компьютерах в данный момент возможно выскакивание ошибки 0x8000000A, в этом случае нужно просто закрыть вкладку.
Эта ошибка хорошо известна ещё по Visual Studio 2015. Можете почитать её обсуждение, к примеру, на сайте Microsoft по ссылке1, ссылке2, ссылке3. И более лучшего решения, чем закрывать вкладку, ещё нет. По всей видимости, команда разработчиков Visual Studio не считает эту ошибку достаточно серьёзным делом, чтобы ломать о неё копья.
5. В «Solution Explorer» двойным щелчком открыть в редакторе файл MyForm.cpp. Скопировать в него текст
#include «MyForm.h»
using namespace System;
using namespace System::Windows::Forms;
[STAThread]
void main(array ^ args) <
Application::EnableVisualStyles();
Application::SetCompatibleTextRenderingDefault(false);
Project1 ::MyForm form;
Application::Run(%form);
>
Заменив Project1 на название вашего проекта. (Теперь понятно, почему ранее мною не рекомендовалось использовать в названии проекта пробелы?)
Отлично, всё готово! Теперь проект компилируем и запускаем. Но если у вас ранее выскакивала 0x8000000A, то быстрее всего вам придётся перезапустить Visual Studio и вновь загрузить в нём проект. Далее ошибка ни в чём не проявится.
6. Для того, чтобы добавить на нашу только что созданную форму новые элементы, понадобится панель Toolbox. Полезно запомнить горячую клавишу ^!X 
Работа с размещением элементов на форме сложностей вызвать не должна. Работает здесь всё удобнее, чем wxWidgets в CodeBlocks или wxDev-C++. Никаких глюков мною замечено не было.
Для изменения свойств только что созданного элемента интерфейса щёлкните на нём правой кнопкой и в контекстном меню выберите, соответственно, Properties.
Испытаем кнопку в работе. Сделаем так, чтобы по её названию появлялось окно с умным текстом. Двойной щелчок по элементу на форме вызовет редактор кода с уже прописанным в нём шаблоном. Добавим внутрь фигурных скобок команду
MessageBox::Show(«Hello World»,
«My heading», MessageBoxButtons::OKCancel,
MessageBoxIcon::Asterisk);
Запускаем и проверяем!
Дополнительная информация
Альтернативные способы создания графических приложений в Visual Studio 2017.
Пара слов для общего развития о нескольких технологиях, на которые вы будете постоянно натыкаться при чтении документации по разработке GUI в Visual Studio.
Примечания:
В интернете можно наткнуться на заголовок «Full C and C++ IDE with Visual Studio». Оттуда закачиваются те же самые стандартные дистрибутивы Visual Studio, проверено по контрольным суммам.
P.S.
Теперь можно немного поэкспериментировать с элементами интерфейса. Ниже показан код простейшего графического калькулятора:
private: System::Void button6_Click(System::Object^ sender, System::EventArgs^ e) <
Application::Exit();
>
private: System::Void radioButton1_CheckedChanged(System::Object^ sender, System::EventArgs^ e) <
label1->Text = «+»;
>
private: System::Void radioButton2_CheckedChanged(System::Object^ sender, System::EventArgs^ e) <
label1->Text = «-«;
>
private: System::Void radioButton3_CheckedChanged(System::Object^ sender, System::EventArgs^ e) <
label1->Text = «*»;
>
private: System::Void radioButton4_CheckedChanged(System::Object^ sender, System::EventArgs^ e) <
label1->Text = «/»;
>
А теперь можно попытаться сотворить что-то более похожее на стандартное window-приложение. Пока простейшее.
double iFirstNum;
double iSecondNum;
double iResult;
String^ iOperator;
private: System::Void btnCE_Click(System::Object^ sender, System::EventArgs^ e) <
/*button CE («Clear Entry» is supposed to be used to clear only the thing you are currently
typing into the calculator, before you have performed any operation on it.*/
tbDisplay->Text = «0»;
>
private: System::Void buttonS_Number_Click(System::Object^ sender, System::EventArgs^ e) <
//Number Buttons Event
Button ^ Numbers = safe_cast (sender);
if (tbDisplay->Text == «0»)
tbDisplay->Text = Numbers->Text;
else
tbDisplay->Text += Numbers->Text;
>
private: System::Void buttonS_Arithmetic_Click(System::Object^ sender, System::EventArgs^ e) <
//Operator Buttons Event
Button ^ op = safe_cast (sender);
iFirstNum = Double::Parse(tbDisplay->Text);
tbDisplay->Text = «0»;
iOperator = op->Text;
lblShowOp->Text = System::Convert::ToString(iFirstNum) + » » + iOperator;
>
private: System::Void btnEquals_Click(System::Object^ sender, System::EventArgs^ e) <
//Equals
iSecondNum = Double::Parse(tbDisplay->Text);
lblShowOp->Text += » » + tbDisplay->Text + » = » + System::Convert::ToString(iResult);
tbDisplay->Text = System::Convert::ToString(iResult);
>
private: System::Void btnDot_Click(System::Object^ sender, System::EventArgs^ e) <
//Decimal Point
if (!tbDisplay->Text->Contains(«.»))
tbDisplay->Text += «.»;
>
private: System::Void btnPM_Click(System::Object^ sender, System::EventArgs^ e) <
//Plus-Minus
if (tbDisplay->Text->Contains(«-«))
tbDisplay->Text = tbDisplay->Text->Remove(0, 1);
else
tbDisplay->Text = «-» + tbDisplay->Text;
>
Как продолжение, существует видеоролик
«Visual C++ Scientific Calculator Tutorial» (53:31, Paul Oamen, 2016 Oct 2, Visual Studio 2015). Судя по голосу, автор тот же. К показанному выше калькулятору прибавляется конвертер температуры и ряд более научных функций. Предупрежу, что итоговое «творение» имеет массу изъянов и глюков, поэтому видео можно просматривать исключительно для изучение приёмов программирования. Но не используйте его в качестве образца того, как нужно создавать калькуляторы.
Необходимые знания:
Создайте новый проект, в качестве типа шаблона установите приложение Windows Forms, как показано на рисунке 1:
Рисунок 1. Создание нового проекта.
Назовите проект RandWindow и нажмите кнопку ОК.
Создание оконных приложений сводится к созданию всех необходимых диалоговых окон, а также к размещению на них необходимых элементов. В дальнейшем мы настраиваем обработку событий, создаваемых пользователем, и настраиваем технические аспекты работы программы. В нашем случае сначала разместим все необходимые элементы управления на главной форме, после чего добавим обработчик события перемещения мыши и обработку нажатия кнопок.
Добавление новых элементов управления на форму
Итак, после того как вы ввели имя проекта, установили необходимый шаблон и нажали кнопку ОК, MS Visual Studio автоматически создаст каркас оконного приложения, после чего мы сможем добавить на него новые оконные элементы.
Для этого необходимо перетащить необходимый оконный элемент из окна инструментов (ToolBox).
Нашему окну потребуется 2 элемента поля для ввода, в которые мы будем выводить координаты указателя мыши, что облегчит нам понимание работы программы.
В центре окна будет находиться надпись, которую мы создадим с помощью элемента Label.
Снизу будут расположены 2 кнопки.
Перейдите в свойства строки Label1, где измените текст на «Вы стремитесь сделать мир лучше?». Также измените тип шрифта, для этого найдите свойство Font (рис. 5).
Рисунок 5. Свойство Font элемента Label.
После чего установите тип шрифта Tahoma, ширину шрифта Bold и размер равный 16 (рис. 6).
Рисунок 6. Установки шрифта.
Далее измените текст на кнопках, используя свойство Text.
Полученная заготовка окна программы будет выглядеть следующим образом (рис. 7).
Рисунок 7. Форма будет выглядеть следующим образом.
Техническая часть работы программы
Определение перемещения указателя мыши по форме
Щелкните непосредственно на части формы создаваемого приложения (НЕ на одном из элементов).
Теперь перейдите к свойствам формы с помощью щелчка правой кнопки мыши -> контекстное меню свойства.
Теперь необходимо перейти к списку возможных событий, которые может получать данное окно. Для этого щелкните на кнопке «Event» (события), как показано на рисунке 8:
Рисунок 8. Переход к списку возможных событий.
Когда пользователь передвигает указатель мыши по нашему окну, операционная система посылает сообщение программе с текущими координатами указателя. Они-то нам и нужны.
Чтобы назначить обработчик данного события, найдите строку MouseMove (рис. 9), после чего сделайте двойной щелчок в поле справа от нее – автоматически добавится обработчик события движения мыши и добавится функция Form1_MouseMove в коде нашей программы.
Рисунок 9. После двойного щелчка справа от MouseMove появиться данная строка, и автоматически совершится переход к коду функции-обработчика данного события.
Добавьте в эту функцию 2 строки, чтобы ее код стал выглядеть следующим образом.
Данная функция, обрабатывающая событие перемещения указателя мыши над формой, получает 2 параметра: объект отправитель и экземпляр класса MouseEventsArgs, содержащий информацию о координатах указателя мыши и других текущих свойствах.
textBox1 и textBox2 это экземпляры класса textbox, реализующие управление нашими элементами поля для ввода.
Член данных экземпляров Text позволяет установить текст в данных полях.
Таким образом, если теперь откомпилировать программу (F5), при перемещении указателя мыши по форме окна мы будем видеть координаты указателя (внутри формы), которые будут непрерывно изменяться.
Теперь вернемся к заготовке нашей формы. Для это щелкните на соответствующей закладке (Form1.cs [Конструктор]), как показано на рисунке 10:
Рисунок 10. Переход к конструктору форм C#.
Сделайте двойной щелчок по первой кнопке: Visual Studio автоматически добавит код обработки данной кнопки при нажатии.
Добавьте следующие строки кода:
Теперь снова вернитесь к конструктору и добавьте вторую кнопку, также с помощью двойного щелчка по ней.
Она будет содержать следующий код:
Как видите, здесь мы немного усложнили код вызова окна-сообщения, чтобы продемонстрировать то, как оно работает, более подробно. Все параметры передаваемые в функцию Show закомментированны в исходном коде.
Теперь нам осталось только реализовать перемещение окна в тот момент, когда мышь приближается к кнопке «Да, конечно».
Для этого мы добавим код в функцию:
private void Form1_MouseMove(object sender, MouseEventArgs)
Принцип очень прост: получая координаты движения мыши, мы проверяем не входят ли они в квадрат, очерчивающий нашу кнопку с небольшим запасом. Если да, то мы генерируем 2 случайных числа, которые будут использованы для перемещения окна.
Мы бы могли просто отслеживать сообщение о наведении указателя мыши на кнопку, но оно приходит с заметной задержкой, в связи с чем пользователь без особого труда нажмет на кнопку да, поэтому мы будем просто вычислять попадание курсора в зону вокруг кнопки.
Также нам понадобится объявить несколько «рабочих» переменных, которые мы будем в дальнейшем использовать.
Генерация случайных чисел
Random rnd = new Random();
Здесь мы объявили экземпляр класса Random (rnd), с помощью которого мы будем генерировать случайные числа. В дальнейшем мы будем использовать код, вида rnd.Next (диапазон_генерации) или rnd.Next (от, до -1) для генерации случайного числа.
Также мы объявим еще несколько переменных, часть из которых сразу будет инициализирована.
tmp_location объявляется для того, чтобы в будущем временно хранить текущее положение окна.
Также нам следует подумать о том, что при случайном перемещении, наше окно может выйти далеко за пределы экрана.
_h и _w будут хранить в себе размеры экрана пользователя, которые определяются при их инициализации.
Теперь код этой функции будет выглядеть следующим образом:
Вот, собственно, и все. Откомпеллировав приложение, можете попробовать нажать на кнопку «Да, конечно». Это будет крайне трудно.
Как написать интерфейс программы на c
Урок № 26. Первое графическое приложение
Создание первого приложения с графическим интерфейсом
Доброго времени суток! В этом уроке мы создадим Ваше первое приложение с графическим интерфейсом в MS Visual Studio. Это будет своего рода «Hello World» для графических приложений. Скажу сразу, что использование Windows Forms — не единственный способ создания графических приложений (приложения с графическим интерфейсом пользователя) для C# программистов, но начать изучение лучше именно с этого. И так, запускаем Visual Studio.
Запустили? Тогда к делу! Идем в главное меню и выбираем пункт «Файл — Создать — Проект», как показано на рисунке ниже.
Создание нового проекта
В появившемся окне:
В общем, как показано на рисунке ниже.
Опции создания проекта
Указали что нужно? Тогда нажимайте на кнопку «OK». Теперь вы должны увидеть примерно следующее (основные области выделены прямоугольниками):
Только что созданный проект
На рисунке выше, я обозначил основные области: область дизайнера (слева вверху), область обозревателя решений (справа вверху) и область свойств (справа внизу). С этими областями, мы будем работать чаще всего.
В области дизайнера, сейчас располагается пустая «форма», это так называемое окно, в данном случае, главное окно нашей программы. В области свойств, отображаются свойства выделенного в дизайнере элемента, в данном случае, нашей формы, ну а область обозревателя решений, содержит файлы проекта, в том числи, относящиеся и к формам (окнам) программы. А теперь, давайте немного изменим нашу форму, и запустим это первое приложение.
Для этого, выделим в дизайнере форму (для этого, можно просто кликнуть левой кнопкой мыши по форме) и перейдем в блок свойств, в котором найдем строку «Text» (слово текст, ищем в левом столбце), как показано на рисунке ниже.
Свойство «Text» основной формы приложения
Обратите внимание, в левом столбце указано имя (название свойства), а в правом — его значение.
В данном случае, мы имеем дело с текстовым свойством, и его значение, отображается в заголовке окна, так что, давайте теперь укажем там что-то свое, например, что-то вроде: «Главное окно», как показано на рисунке ниже:
Установка свойства формы
Теперь, можно собрать проект и запустить. Для этого идем в главное меню и выбираем пункт «Сборка — Собрать решение». А потом запускаем приложение, для этого выбираем пункт «Отладка — Запуск без отладки» в главном меню. В результате Вы должны увидеть окно следующее окно.
Окно первого графического приложения
В следующем уроке, мы рассмотрим простую работу с дизайнером форм, и настройку элементов графического интерфейса, а на этот урок подошел к концу, мы создали первое графическое приложение, собрали и запустили его.
Кроссплатформенный GUI на C# и веб-технологии
Зачем?
Идентичный интерфейс под всеми платформами. Возможны лишь незначительные отличия при отрисовке шрифтов, при отображении элементов. Последнее всегда объясняется ошибками в верстке.
Разработка под одну ОС. Эмпирическим путем нами было выявлено, что достаточно вести основную разработку под Windows, а под остальными платформами лишь иногда проверять. Например, перед релизом.
Вся сила веб-разработки. Особенно это актуально, если команда состоит из веб-разработчиков. Можно использовать html5, css3, привычные подходы и библиотеки. Мы, кстати, используем популярный фреймворк для построения веб-приложений, в итоге у нас интерфейс только на js.
Разделение на frontend и backend. Появляется возможность вести отдельно разработку представления и логики приложения, согласовав апи. Например, наш интерфейс — это полноценное веб-приложение, взаимодействующее с «сервером» через ajax-запросы. В десктоп приложении эмулируем обработку этих запросов. Таким образом, можно разрабатывать и отлаживать интерфейс с использованием инструментов разработчика в Chrome, закинув необходимые mock ответы на локальный сервер. Особо уверенные в себе разработчики, которым достаточно доступа к dom и консоли, могут использовать firebug lite в десктоп приложении.
Есть о чем написать на хабр. Подобные эксперименты добавляют азарта при разработке и скрашивают суровые будни программиста.
Под каждую платформу создаем нативное приложение, GUI которого состоит из одного элемента пользовательского интерфейса – браузера, растянутого во все окно.
Нам нужно научиться отображать html в браузере, найти способ осуществлять вызовы js-C# и С#-js. Различия в вызовах могут показаться странными, но есть простое объяснение – в используемых браузерах реализован и работает разный функционал.
Mac OSX
Определяем методы и указываем, какие из них могут быть вызваны из js:
Теперь в js мы можем вызвать метод сallFromJs:
Ubuntu
Под Mono используем пакет webkit-sharp.
Плавно увеличивается количество не интуитивно понятного кода.
Для вызова C# из js можно перехватывать переход по ссылке.
Вызов из js будет выглядеть так:
Еще один способ завязывается на событие TitleChanged.
В js устанавливаем title у документа:
В С# срабатывает событие TitleChanged, мы десериализуем title и аналогично предыдущему подходу вызываем обработчик.
В рассматриваемой обертке WebKit можно из С# исполнять любой js код, что позволяет нам реализовать вызов js из C#:
Windows
Основную разработку мы ведем под Windows.
Подробности уже были описаны моим коллегой год назад и за это время принципиально ничего не изменилось. В какой-то степени это свидетельствует о надежности подхода. Также в статье больше деталей, которые вполне достаточно рассмотреть на примере одной ОС.
Я лишь добавлю пример на github.
Не Windows единой: как писать кроссплатформенные приложения с GUI на C#
На C# можно создавать красивые приложения, но до недавних пор — не для всех платформ. Рассказываем, как писать одно приложение для всех ОС сразу.
Пока есть Xamarin, который можно использовать только для Windows 10 и мобильных устройств. Но что делать тем, кто хочет создавать графические интерфейсы для Linux или Mac OS?
Тут помогут фреймворки от сторонних разработчиков.
Пишет о программировании, в свободное время создает игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Какой фреймворк выбрать
Мне удалось найти 2 более-менее популярных фреймворка (оба основаны на Skia ):
Я попробовал оба, и второй показался мне более удобным: в нём есть язык разметки, поддержка MVVM, быстрая установка, лёгкий переход с WPF. Поэтому я выбрал его.
Как начать использовать AvaloniaUI
Для начала клонируйте себе на компьютер этот репозиторий:
В нём находятся шаблоны для создания приложения с AvaloniaUI. Если вы не умеете пользоваться git, то просто скачайте содержимое и распакуйте куда-нибудь на компьютере. Затем откройте консоль и введите следующую команду:
Она установит шаблоны для создания приложения. Чтобы проверить, добавились ли шаблоны, используйте команду:
Откройте в консоли папку, в которой хотите создать проект, и введите:
Будет создано приложение с использованием MVVM. Практически вся документация по AvaloniaUI написана с использованием этого паттерна, поэтому проще будет разрабатывать на нём.
Теперь можно приступать к работе над приложением.
Создаём калькулятор на AvaloniaUI
У вас будут созданы следующие папки
Сначала посмотрим в файл Program.cs в корневом каталоге:
Нас интересует метод AppMain(). В нём создаётся окно (MainWindow) с указанием DataContext (используется для привязки данных), а потом это окно запускается.
В этом методе можно определить свою логику инициализации приложения. Например, объявить экземпляр модели и передать его в конструктор MainWindowViewModel(). Однако перед этим нужно определить конструктор, который будет принимать такой аргумент.
У нас очень простое приложение, поэтому мы реализуем всю логику прямо в MainWindowViewModel.cs. Там будут необходимые свойства и методы.
Для начала нужно подключить пространство имён ReactiveUI, которое в AvaloniaUI используется для реализации паттерна MVVM: