Как сделать красивую программу в visual studio
Конструктор XAML в Visual Studio и Blend для Visual Studio предоставляет визуальный интерфейс, помогающий проектировать приложения на основе XAML, такие как WPF и UWP. Вы можете создавать пользовательские интерфейсы для приложений, перетаскивая элементы управления из окна "Панель элементов" (окно "Ресурсы" в Blend для Visual Studio) и задавая свойства в окне "Свойства". Также можно изменить код XAML непосредственно в представлении XAML.
Для опытных пользователей предоставляется даже возможность настроить Конструктор XAML.
Xamarin. Forms не поддерживает конструктор XAML. Чтобы просмотреть пользовательские интерфейсы XAML Xamarin. Forms и изменить их во время работы приложения, используйте горячую перезагрузку XAML для Xamarin. Forms. Дополнительные сведения см. на странице Горячая перезагрузка XAML для Xamarin. Forms (Предварительная версия) .
Рабочая область конструктора XAML
Рабочая область конструктора XAML состоит из нескольких элементов визуального интерфейса. К ним относятся область рисования (визуальная область конструктора), редактор XAML, окно "Структура документа" (окно "Объекты и временная шкала" в Blend для Visual Studio) и окно "Свойства". Чтобы открыть конструктор XAML, щелкните правой кнопкой мыши XAML-файл в обозревателе решений и выберите Конструктор представлений.
В конструкторе XAML реализовано представление XAML и синхронизированное представление конструктора для отображения XAML-разметки приложения. Открыв XAML-файл в Visual Studio или в Blend для Visual Studio, можно переключаться между представлением конструктора и представлением XAML с помощью вкладок Конструктор и XAML. Вы можете нажать кнопку Переставить панели, чтобы поменять окно, которое отображается поверх другого: область рисования или редактор XAML.
Конструктор
В режиме конструктора окно, содержащее область рисования, является активным окном, которое можно использовать в качестве основной рабочей области. С его помощью можно визуально создавать страницы приложения, добавляя, рисуя или изменяя элементы. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML. На этом рисунке показана область рисования в режиме конструктора.
В области рисования доступны следующие функции.
Линии привязки
Линии привязки — это границы выравнивания , отображаемые в виде красной пунктирной линии, которые отображаются при выравнивании краев элементов управления или при выравнивании базовых показателей текста. Границы выравнивания появляются, только если привязка к линиям привязки включена.
Границы сетки
Границы сетки служат для управления строками и столбцами на панели Сетка. Вы можете создавать и удалять строки и столбцы, а также изменять их относительную ширину и высоту. Вертикальная граница сетки, которая отображается в левой части области рисования, используется для строк, а горизонтальная линия, которая появляется вверху, — для столбцов.
Графические элементы сетки
Графический элемент сетки отображается как треугольник с вертикальной или горизонтальной линией, присоединенной к границе сетки. При перетаскивании графического элемента сетки ширина или высота смежных столбцов или строк изменяется по мере движения мыши.
Графические элементы сетки используются для управления шириной и высотой строк и столбцов сетки. Вы можете добавить новый столбец или строку, щелкнув границу сетки. При добавлении новой строки или столбца для панели сетки, которая содержит два и более столбцов или строк, за пределами границы появляется мини-панель инструментов, позволяющая задать ширину и высоту явным образом. С помощью мини-панели инструментов можно задавать размеры строк и столбцов сетки.
Маркеры изменения размера
Маркеры изменения размера появляются на выбранных элементах управления и позволяют изменить их размер. При изменении размера элемента управления обычно отображаются значения ширины и высоты. Дополнительные сведения о работе с элементами управления в представлении Конструктор см. в статье Работа с элементами в Конструкторе XAML.
Margins
Поля представляют собой фиксированное пространство между краем элемента управления и краем его контейнера. Поля элемента управления можно задать с помощью свойств поля в разделе Макет в окне Свойства .
Графические элементы полей
Графические элементы полей можно использовать для изменения полей элемента относительно его контейнера макета. Если графический элемент поля открыт, поле не задано, а его графический значок отображается как разорванная цепь. Если поле не задано, элементы остаются на месте при изменении размеров контейнера макета во время выполнения. Если графический элемент поля закрыт, отображается значок целой цепи, а элементы перемещаются вместе с полем при изменении размеров контейнера макета во время выполнения (поля остаются фиксированными).
Маркеры элемента
Вы можете изменить элемент с помощью его маркеров, которые появляются в области рисования при наведении указателя мыши на углы синего ограничивающего прямоугольника. Эти маркеры позволяют выполнить поворот, изменение размера или зеркальное отражение, перемещение или добавление радиуса скругления угла к элементу. Символ маркера элемента зависит от функции и меняется в зависимости от расположения указателя. Если вы не видите маркеры элемента, убедитесь, что элемент выделен.
В представлении Конструктор в левой нижней части окна доступны дополнительные команды области рисования, как показано ниже:
На этой панели инструментов доступны следующие команды:
Масштаб
Команда "Масштаб" позволяет указать размер области конструктора. Вы можете выбрать масштаб от 12,5 % до 800 % или выбрать параметры, такие как Вписать выделенное и Вписать все.
Показать/скрыть сетку привязки
Показывает или скрывает сетку привязки, которая отображает линии сетки. Линии сетки используются при включении привязки к линиям сетки или привязки к линиям привязки.
Включить/выключить привязку к линиям сетки
Если Привязка к сетке включена, элемент будет выровняться с ближайшими горизонтальными и вертикальными линиями сетки при перетаскивании на монтажную панель.
Переключить фон области рисования
Выполняет переключение между светлым и темным фоном.
Включить/выключить привязку к линиям привязки
Линии привязки помогают выравнивать элементы управления относительно друг друга. Если привязка к линиям привязки включена, при перетаскивании элемента управления относительно других элементов появляются границы выравнивания, когда края и текст некоторых элементов управления выровнены по горизонтали или вертикали. Граница выравнивания отображается в виде красной пунктирной линии.
Отключить код проекта
Отключает код проекта, например пользовательские элементы управления и преобразователи величин, и выполняет перезагрузку конструктора.
Представление XAML
В представлении XAML окно, содержащее редактор XAML, активно, а редактор XAML служит основным средством разработки. Язык XAML предоставляет декларативный, основанный на XML словарь для создания пользовательского интерфейса приложения. Представление XAML поддерживает IntelliSense, автоматическое форматирование, выделение синтаксиса и перемещение по тегам. На следующем рисунке показано представление XAML с открытым меню IntelliSense:
Окно Структура документа
Окно "Структура документа" в Visual Studio аналогично окну Объекты и временная шкала в Blend для Visual Studio. Структура документа помогает выполнять следующие задачи:
Просматривать иерархическую структуру всех объектов в области рисования.
Выберите элементы, чтобы их можно было изменить. Например, можно переместить их в иерархии или задать их свойства в окно свойств. Дополнительные сведения см. в статье Работа с элементами в Конструкторе XAML.
Создавать и изменять шаблоны для элементов управления.
Создавать анимации (только Blend для Visual Studio).
чтобы открыть окно "структура документа" в Visual Studio, в строке меню выберите вид > другие Windows > структура документа. чтобы просмотреть окно Объекты и временная шкала в Blend для Visual Studio, в строке меню выберите просмотр > структуры документа.
В основном представлении окна "Структура документа" или "Объекты и временная шкала" отображается иерархия документа в виде древовидной структуры. Иерархическую структуру документа можно использовать для просмотра документа на различных уровнях детализации, а также для блокировки и скрытия элементов по отдельности или в группе. В окне "Структура документа/Объекты и временная шкала" доступны следующие параметры:
Показать/скрыть
Отображает или скрывает элементы области рисования. При отображении выглядит как символ глаза. Можно также нажать CTRL + h , чтобы скрыть элемент, и SHIFT + CTRL + h , чтобы отобразить его.
Заблокировать или разблокировать
Блокирует или разблокирует элементы области рисования. Заблокированные элементы невозможно изменить. При отображении выглядит как символ замка в режиме блокировки. Можно также нажать сочетание клавиш CTRL + l , чтобы заблокировать элемент и SHIFT + + + l , чтобы разблокировать его.
Вернуть для области значение pageRoot
Параметр в верхней части окна "Структура документа" или "Объекты и временная шкала" со значком стрелки вверх выполняет перемещение в предыдущую область. Перемещение к более высокой области доступно только при изменении стиля или шаблона.
Окно "Свойства"
Окно Свойства позволяет задавать значения свойств для элементов управления. Вот как оно выглядит:
В верхней части окна " Свойства " есть различные параметры:
- Измените имя выбранного элемента в поле Имя.
- В левом верхнем углу есть значок, представляющий текущий выбранный элемент.
- Чтобы упорядочить свойства по категориям или в алфавитном порядке, нажмите кнопку Категория, Имя или Источник в списке Упорядочить по .
- Чтобы просмотреть список событий для элемента управления, нажмите кнопку События, на которой отображается символ молнии.
- Чтобы найти свойство, начните вводить его имя в поле поиска. В окне Свойства по мере ввода отображаются свойства, соответствующие условиям поиска.
Некоторые свойства позволяют задать дополнительные свойства, для этого нужно нажать кнопку со стрелкой вниз.
Справа от значения каждого свойства отображается метка свойства в виде квадрата. Внешний вид метки свойства указывает, применены ли к свойству привязка данных или ресурс. Например, белый квадрат указывает значение по умолчанию, черный квадрат обычно указывает, что был применен локальный ресурс, а оранжевый квадрат обычно указывает, что была применена привязка данных. Щелкнув метку свойства, можно перейти к определению стиля, открыть построитель привязки данных или открыть средство выбора ресурсов.
Дополнительные сведения об использовании свойств и обработке событий см. в статье Введение в работу с элементами управления и шаблонами.
Вы можете использовать интерфейсы API Composition среды выполнения Windows (также называемые визуальным уровнем) в приложениях Windows Forms, чтобы создавать современные интерфейсы для пользователей Windows 10.
Полный код для этого руководства доступен на сайте GitHub: пример Windows Forms HelloComposition.
Предварительные условия
Для использования API размещения для UWP накладываются приведенные ниже предварительные требования.
- Предполагается, что у вас есть опыт разработки приложений с помощью Windows Forms и UWP. См. также:
Как использовать интерфейсы API Composition в Windows Forms
При работе с этим руководством вы создадите пользовательский интерфейс приложения Windows Forms и добавите в него анимированные элементы Composition. Компоненты Windows Forms и компоненты Composition простые, но приведенный код взаимодействия одинаков независимо от сложности компонентов. Завершенное приложение выглядит следующим образом.
Создание проекта Windows Forms
Первым шагом является создание проекта приложения Windows Forms, включающего в себя определение приложения и главную форму для пользовательского интерфейса.
Visual Studio создаст проект и откроет конструктор для окна приложения по умолчанию, Form1.xaml.
Настройка проекта для использования интерфейсов API среды выполнения Windows
Чтобы использовать API среды выполнения Windows (WinRT) в приложении Windows Forms, необходимо настроить проект Visual Studio для доступа к среде выполнения Windows. Кроме того, API Composition активно используют векторы, поэтому нужно добавить ссылки, необходимые для использования векторов.
Для решения этих задач предоставляются соответствующие пакеты NuGet. Установите последние версии этих пакетов, чтобы добавить необходимые ссылки в проект.
-
(требуется задать PackageReference в качестве формата управления пакетами по умолчанию).
Хотя мы рекомендуем использовать для настройки проекта пакеты NuGet, необходимые ссылки можно добавить вручную. Дополнительные сведения: Улучшение классического приложения для Windows 10. В следующей таблице приведены файлы, на которые необходимо добавить ссылки.
Создание пользовательского элемента управления для управления взаимодействием
Для размещения содержимого, созданного с помощью визуального слоя, создается пользовательский элемент управления, производный от Control. Этот элемент управления предоставляет доступ к дескриптору окна, который нужен, чтобы создать контейнер для содержимого визуального уровня.
Здесь потребуется выполнить большую часть настройки для размещения интерфейсов API Composition. В этом элементе управления для добавления интерфейсов API Composition в приложение Windows Forms используются службы вызова платформы (PInvoke) и взаимодействие COM. Дополнительные сведения о PInvoke и взаимодействии COM см. в разделе Взаимодействие с неуправляемым кодом.
При необходимости сверьтесь с полным кодом в конце руководства, чтобы убедиться в том, что весь код добавлен в соответствующе места при работе с этим руководством.
Добавьте в проект новый файл пользовательского элемента управления, производного от Control.
- В обозревателе решений щелкните проект HelloComposition правой кнопкой мыши.
- В контекстном меню выберите Добавить>Новый элемент.
- В окне Добавление нового элемента выберите Пользовательский элемент управления.
- Присвойте элементу управления имя CompositionHost.cs, а затем щелкните Добавить. Файл CompositionHost.cs откроется в представлении конструктора.
Перейдите к представлению кода для CompositionHost.cs и добавьте приведенный ниже код в класс.
Добавьте код в конструктор.
В этом конструкторе вызываются методы InitializeCoreDispatcher и InitComposition. Эти методы создаются на следующих шагах.
- Создайте метод InitializeCoreDispatcher и добавьте код для настройки очереди диспетчера.
- Для очереди диспетчера требуется объявление PInvoke. Поместите это объявление в конец блока кода класса. (Мы разместим этот код внутри области, чтобы сделать код класса аккуратным.)
Теперь очередь диспетчера готова, и можно начать инициализацию и создание содержимого Composition.
- Для ICompositorDesktopInterop и ICompositionTarget требуется импорт COM. Поместите этот код после класса CompositionHost внутри объявления пространства имен.
Создание пользовательского элемента управления для размещения элементов композиции
Рекомендуется разместить код, который создает элементы композиции и управляет ими, в отдельном элементе управления, производном от CompositionHost. Это позволяет многократно использовать код взаимодействия, созданный в классе CompositionHost.
Здесь создается пользовательский элемент управления, производный от CompositionHost. Этот элемент управления добавляется на панель элементов Visual Studio, чтобы его можно было добавить в форму.
Добавьте в проект новый файл пользовательского элемента управления, производного от CompositionHost.
- В обозревателе решений щелкните проект HelloComposition правой кнопкой мыши.
- В контекстном меню выберите Добавить>Новый элемент.
- В окне Добавление нового элемента выберите Пользовательский элемент управления.
- Присвойте элементу управления имя CompositionHostControl.cs, а затем щелкните Добавить. Файл CompositionHostControl.cs откроется в представлении конструктора.
В области "Свойства" представления конструктора для CompositionHostControl.cs задайте для свойства BackColor значение ControlLight.
Задавать цвет фона необязательно. Мы делаем это здесь, чтобы пользовательский элемент управления выделялся на фоне формы.
Переключитесь на представление кода CompositionHostControl.cs и обновите объявление класса, чтобы он стал производным от CompositionHost.
Обновите конструктор, чтобы вызвать базовый конструктор.
Добавление элементов композиции
Теперь, когда инфраструктура настроена, можно добавить содержимое Composition в пользовательский интерфейс приложения.
В этом примере вы добавите в класс CompositionHostControl код, который создает и анимирует простой элемент SpriteVisual.
Добавьте элемент композиции.
В CompositionHostControl.cs добавьте приведенные ниже методы в класс CompositionHostControl.
Добавление элемента управления в форму
Теперь, когда у вас есть пользовательский элемент управления для размещения содержимого Composition, его можно добавить в пользовательский интерфейс приложения. Здесь следует добавить экземпляр CompositionHostControl, созданный на предыдущем шаге. CompositionHostControl автоматически добавляется на панель элементов Visual Studio в области имя проекта Компоненты.
В представлении конструктора для Form1.CS добавьте кнопку в пользовательский интерфейс.
- Перетащите элемент Button с панели элементов на Form1. Поместите его в левый верхний угол формы. (Чтобы проверить расположение элементов управления, посмотрите на картинку в начале руководства.)
- В области "Свойства" измените значение свойства Text с Button1 на Add composition element.
- Измените размер элемента Button, чтобы вместить весь текст.
Добавьте элемент CompositionHostControl в пользовательский интерфейс.
- Перетащите CompositionHostControl из панели элементов на форму Form1. Поместите его справа от Button.
- Измените размер CompositionHost, чтобы заполнить оставшуюся часть формы.
Обработайте событие нажатия кнопки.
- В области "Свойства" щелкните значок молнии, чтобы перейти к представлению "События".
- Из списка событий выберите событие Click, введите Button_Click и нажмите клавишу ВВОД.
- Этот код добавится в Form1.cs.
Добавьте в обработчик нажатия кнопки код для создания новых элементов.
- В Form1.cs добавьте код в обработчик событий Button_Click, созданный ранее. Этот код вызывает CompositionHostControl1.AddElement для создания нового элемента со случайно заданным размером и смещением. (Экземпляр CompositionHostControl был автоматически назван compositionHostControl1 при перетаскивании на форму.)
Теперь выполните сборку приложения Windows Forms и запустите его. Если вы нажмете кнопку, в пользовательском интерфейсе должны появиться анимированные квадраты.
Следующие шаги
Более полный пример интеграции визуального уровня в Windows Forms, основанный на той же инфраструктуре, доступен на сайте GitHub.
Вы можете использовать интерфейсы API Composition среды выполнения Windows (также называемые визуальным уровнем) в приложениях Win32, чтобы создавать современные интерфейсы для пользователей Windows 10.
Полный код для этого руководства доступен на сайте GitHub: Пример приложения Win32 HelloComposition.
Предварительные условия
Для использования API размещения для UWP накладываются приведенные ниже предварительные требования.
-
Предполагается, что у вас есть опыт разработки приложений с помощью Win32 и UWP. См. также:
- Для параметра Конфигурации выберите Все конфигурации. Для параметра Платформа выберите Все платформы.
- Свойства конфигурации>Общие>Версия Windows SDK = 10.0.17763.0 или более поздняя версия.
- Компоновщик>Ввод>Дополнительные зависимости — этот раздел должен содержать windowsapp.lib. Если эта зависимость отсутствует в списке, добавьте ее.
- В обозревателе решений щелкните проект HelloComposition правой кнопкой мыши.
- В контекстном меню выберите Добавить>Класс.
- В диалоговом окне Добавление класса укажите имя класса, CompositionHost.cs, а затем щелкните Добавить.
- В CompositionHost.h сделайте конструктор частным.
- Объявите общедоступный статический метод GetInstance.
- В CompositionHost.cpp добавьте определение метода GetInstance.
- В CompositionHost.h объявите общедоступный метод Initialize, который принимает HWND в качестве аргумента.
- В CompositionHost.cpp добавьте определение метода Initialize.
- В CompositionHost.h объявите частный метод EnsureDispatcherQueue.
- В CompositionHost.cpp добавьте определение метода EnsureDispatcherQueue.
- В CompositionHost.h объявите частный метод CreateDesktopWindowTarget, который принимает HWND в качестве аргумента.
- В CompositionHost.cpp добавьте определение метода CreateDesktopWindowTarget.
- В CompositionHost.h объявите частный метод CreateCompositionRoot.
- В CompositionHost.cpp добавьте определение метода CreateCompositionRoot.
- В CompositionHost.h объявите общедоступный метод AddElement, который принимает 3 значения с плавающей запятой в качестве аргументов.
- В CompositionHost.cpp добавьте определение метода AddElement.
- хранить и загружать свойства отдельных компонентов в XML-файле
- пользователь должен иметь простой инструмент по настройке внешнего вида
- список настраиваемых компонентов должен очень просто расширяться (одной строкой кода)
- при изменении значения свойства пользователь должен сразу видеть изменения на форме
- должна быть кнопка отмены, которая позволит вернуть все изменения назад
- использовать компонент PropertyGridEx, для отображения и изменения свойств компонентов
- создать класс CustomDesignControl для удобства хранения свойств в XML
- создать форму MainForm, на которой будем изменять внешний вид
- создать форму AppSettingsForm, на которой будем настраивать внешний вид MainForm
- создать класс SettingsXml для удобства работы с XML
- используется приведение любого контрола к классу Control, а это означает, что половину свойств можно потерять (например, компонент DataGridView унаследован от класса Control, но имеет свой дополнительный набор свойств)
- при клонировании компонента некоторые свойства (например: цвет шрифта внутри ячейки DataGridView) не клонируются, а создают ссылки на клонируемый компонент (возможно, это потому, что используется свойство со своими внутренними свойствами и их нужно как-то по-другому обрабатывать).
-
(Приступая к работе с Win32 и C++)
Как использовать интерфейсы API Composition из классического приложения Win32
При работе с этим руководством вы создадите простое приложение Win32 на C++ и добавите в него элементы композиции UWP. Основное внимание уделяется правильной настройке проекта, созданию кода взаимодействия и отрисовке простых элементов с помощью интерфейсов API Windows Composition. Завершенное приложение выглядит следующим образом.
Создание проекта C++ для Win32 в Visual Studio
Первым шагом является создание проекта приложения Win32 в Visual Studio.
Чтобы создать проект приложения Win32 на C++ с именем HelloComposition, сделайте следующее.
Откройте Visual Studio и выберите Файл>Создать>Проект.
Появится диалоговое окно Создать проект.
В категории Установлены разверните узел Visual C++ , а затем выберите Windows Desktop.
Выберите шаблон Классическое приложение Windows.
Введите имя HelloComposition, а затем нажмите кнопку ОК.
Visual Studio создаст проект и откроет редактор для основного файла приложения.
Настройка проекта для использования интерфейсов API среды выполнения Windows
Чтобы применить интерфейсы API среды выполнения Windows (WinRT) в приложении Win32, мы используем C++/WinRT. Чтобы добавить поддержку C++/WinRT, необходимо настроить проект Visual Studio.
В меню Проект откройте свойства проекта (Свойства HelloComposition) и убедитесь, что для следующих параметров заданы указанные значения.
Изменение предварительно скомпилированного заголовка
Переименуйте stdafx.h и stdafx.cpp в pch.h и pch.cpp соответственно.
Установите для свойства проекта C/C++>Предварительно скомпилированные заголовки>Предварительно скомпилированный заголовочный файл значение pch.h.
(Изменить>Найти и заменить>Найти в файлах.)
В pch.h добавьте winrt/base.h и unknwn.h .
На этом этапе рекомендуется выполнить сборку проекта, чтобы убедиться в отсутствии ошибок, прежде чем продолжить.
Создание класса для размещения элементов композиции
Чтобы разместить содержимое, созданное с помощью визуального уровня, создайте класс (CompositionHost) для управления взаимодействием и создания элементов композиции. Это потребует выполнить большую часть настройки для размещения интерфейсов API Composition. Потребуется:
Мы сделаем этот класс singleton, чтобы избежать проблем с потоками. Например, можно создать только одну очередь диспетчера для каждого потока, поэтому создание второго экземпляра CompositionHost в том же потоке вызовет ошибку.
При необходимости сверьтесь с полным кодом в конце руководства, чтобы убедиться в том, что весь код добавлен в соответствующе места при работе с этим руководством.
Добавьте новый файл класса в проект.
Добавьте заголовки и операторы using, необходимые для взаимодействия композиции.
Измените класс, чтобы использовать шаблон singleton.
В CompositionHost.h объявите частные переменные-члены DispatcherQueueController и DesktopWindowTarget для Compositor.
Добавьте общедоступный метод для инициализации объектов взаимодействия композиции.
В методе Initialize вызываются методы EnsureDispatcherQueue, CreateDesktopWindowTarget и CreateCompositionRoot. Эти методы создаются на следующих шагах.
Создайте очередь диспетчера в потоке, который будет использовать Windows Composition.
Необходимо создать Compositor в потоке с очередью диспетчера, поэтому этот метод вызывается первым во время инициализации.
Зарегистрируйте окно приложения в качестве цели композиции.
Создайте корневой контейнер для размещения визуальных объектов.
Выполните сборку проекта, чтобы убедиться в отсутствии ошибок.
Эти методы настраивают компоненты, необходимые для взаимодействия между визуальным уровнем UWP и интерфейсами API Win32. Теперь вы можете добавить содержимое в приложение.
Добавление элементов композиции
Теперь, когда инфраструктура настроена, можно создать содержимое Composition, которое необходимо отобразить.
В этом примере вы добавите код, создающий квадрат SpriteVisual произвольного цвета с анимацией, которая удаляет его после небольшой задержки.
Добавьте элемент композиции.
Создание и отображение окна
Теперь можно добавить кнопку и содержимое композиции UWP в пользовательский интерфейс Win32.
В методе InitInstance измените размер создаваемого окна. (В этой строке измените CW_USEDEFAULT, 0 на 900, 672 .)
В функции WndProc добавьте case WM_CREATE в блок параметров message. В этом случае инициализируется CompositionHost и создается кнопка.
Кроме того, в функции WndProc обработайте нажатие кнопки, чтобы добавить элемент композиции в пользовательский интерфейс.
Добавьте case BTN_ADD в блок параметров wmId в блоке WM_COMMAND.
Теперь можно выполнить сборку приложения и запустить его. При необходимости сверьтесь с полным кодом в конце руководства, чтобы убедиться в том, что весь код добавлен в соответствующе места.
Если запустить приложение и нажать кнопку, в пользовательском интерфейсе должны отобразиться анимированные квадраты.
Чтобы повысить интерес у пользователей, возникла идея повысить его привлекательность за счет настройки цвета и шрифта.
Требования к настройке внешнего вида приложения
Результат работы
Окно настройки внешнего вида:
До и после настроек внешнего вида:
Для решения задачи необходимо
Функция отмены изменений внешнего вида
Чтобы реализовать отмену изменений внешнего вида (пункт 5 из требований), решил найти универсальный способ клонирования свойств компонентов которые будут создаваться в памяти и заменять отображаемые компоненты.
Скопировал код, убрал лишние свойства, которые не нужно сохранять, оставив цвета и шрифт.
После проверки работы кода, сразу выяснились недостатки данного способа:
Безрезультатно, компонент не смог вернуть изменения обратно.
Попробовал тогда само свойство создать оператором new и задать ему значение методом SetValue:
И этот способ не дал результата. При изменении значения свойства в одном компоненте, оно автоматически обновляется и в клонируемом компоненте.
Другие способы я больше не искал и сделал возврат изменений обычным перезапуском приложения с возможностью сохранения рабочего документа или отмены перезапуска. Это позволило значительно съэкономить память приложения, так как не нужно создавать клоны объектов.
Пример приложения с настройкой внешнего вида
На всякий случай, подготовил готовый код, на котором желающие смогут проверить и возможно доработать функцию отмены изменений внешнего вида без перезагрузки приложения и рассказать нам о проблеме в комментариях.
Нужно добиться, чтобы при нажатии на кнопку «Автотест» на компоненте DataGridView был серый фон и шрифт ячеек был мелкий.
Вывод
Надеюсь, что во многих WinForms приложениях, благодаря этой статье, у конечного пользователя появится возможность настраивать интерфейс на свой вкус и цвет.
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 не считает эту ошибку достаточно серьёзным делом, чтобы ломать о неё копья.
4. Но мало просто создать форму, нужно вплести её в создаваемую программу. Для этого в "Solution Explorer" правой кнопкой мыши на названии проекта, во всплывшем контексном меню выбрать Properties .
В открывшемся окне произвести два действия.
• Linker > System > SubSystem , из раскрывающегося списка выбрать " Windows (/SUBSYSTEM:WINDOWS) "
• Linker > Advanced > Entry Point . В пустое поле вписать " main " (без кавычек).
5. В "Solution Explorer" двойным щелчком открыть в редакторе файл MyForm.cpp. Скопировать в него текст
Отлично, всё готово! Теперь проект компилируем и запускаем. Но если у вас ранее выскакивала 0x8000000A, то быстрее всего вам придётся перезапустить Visual Studio и вновь загрузить в нём проект. Далее ошибка ни в чём не проявится.
6. Для того, чтобы добавить на нашу только что созданную форму новые элементы, понадобится панель Toolbox. Полезно запомнить горячую клавишу ^!X
Работа с размещением элементов на форме сложностей вызвать не должна. Работает здесь всё удобнее, чем wxWidgets в CodeBlocks или wxDev-C++. Никаких глюков мною замечено не было.
Для изменения свойств только что созданного элемента интерфейса щёлкните на нём правой кнопкой и в контекстном меню выберите, соответственно, Properties.
Испытаем кнопку в работе. Сделаем так, чтобы по её названию появлялось окно с умным текстом. Двойной щелчок по элементу на форме вызовет редактор кода с уже прописанным в нём шаблоном. Добавим внутрь фигурных скобок команду
MessageBox::Show("Hello World",
"My heading", MessageBoxButtons::OKCancel,
MessageBoxIcon::Asterisk);
Запускаем и проверяем!
Если вдруг не запустится, то первым делом проверяем, что выставлено в раскрывающемся списке Solution Configurations . Он находится на панели инструментов (под главным меню). Там должно быть Release (а не Debug) .
Дополнительная информация
Альтернативные способы создания графических приложений в Visual Studio 2017.
1. UWP (Universal Windows Platfrom application) - универсальные приложения, способные запускаться на Windows 10, Windows 10 Mobile и аналогичных самых современных платформах от Microsoft. Платформа разработана как расширение Windows Runtime. Всё бы хорошо, но данные приложения не могут запускаться на более старых версиях Windows, даже на восьмёрке.
Пара слов для общего развития о нескольких технологиях, на которые вы будете постоянно натыкаться при чтении документации по разработке GUI в Visual Studio.
ATL (Active Template Library) - набор шаблонных классов языка C++, предназначенных для упрощения написания COM-компонентов.
MFC (Microsoft Foundation Classes) - библиотека объектов, помогающая профессиональным разработчикам создавать десктопные приложения. Что-то вроде более усложнённого и навороченного варианта ATL. ATL и MFC являются хорошими вещами, и с их задействованием также можно создавать графические приложения. Но это инструменты, требующие наличия углублённых знаний тематики.
IncrediBuild - технология ускорения компиляции и сборки приложений с помощью подключения дополнительных компьютеров. К методам создания графических интерфейсов это напрямую не относится.
Примечания:
В интернете можно наткнуться на заголовок "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 = "/";
>
private: System::Void button5_Click(System::Object^ sender, System::EventArgs^ e) char sw = System::Convert::ToChar(label1->Text);
double a = System::Convert::ToDouble(textBox1->Text);
double b = System::Convert::ToDouble(textBox2->Text);
double r;
switch (sw) case '+':
r = a + b;
break;
case '-':
r = a - b;
break;
case '*':
r = a * b;
break;
case '/':
r = a / b;
break;
>
label2->Text = "Result: " + System::Convert::ToString(r);
>
А теперь можно попытаться сотворить что-то более похожее на стандартное window-приложение. Пока простейшее.
double iFirstNum;
double iSecondNum;
double iResult;
String^ iOperator;
private: System::Void btnC_Click(System::Object^ sender, System::EventArgs^ e) /*button C ("Global Clear" - clears the entire calculation*/
tbDisplay->Text = "0";
lblShowOp->Text = "";
>
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);
if (iOperator == "+")
iResult = iFirstNum + iSecondNum;
else if (iOperator == "-")
iResult = iFirstNum - iSecondNum;
else if (iOperator == "*")
iResult = iFirstNum * iSecondNum;
else if (iOperator == "/")
iResult = iFirstNum / iSecondNum;
else MessageBox::Show("Unknown operation.\nSomething wrong.",
"error", MessageBoxButtons::OK,
MessageBoxIcon::Error);
return;
>
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++ Calculator Tutorial with Decimal Point and Backspace" (37:59, DJ Oamen, 2016 Jan 2, Visual C++ 2010) ,
но имеет ряд отличий.
Как продолжение, существует видеоролик
"Visual C++ Scientific Calculator Tutorial" (53:31, Paul Oamen, 2016 Oct 2, Visual Studio 2015). Судя по голосу, автор тот же. К показанному выше калькулятору прибавляется конвертер температуры и ряд более научных функций. Предупрежу, что итоговое "творение" имеет массу изъянов и глюков, поэтому видео можно просматривать исключительно для изучение приёмов программирования. Но не используйте его в качестве образца того, как нужно создавать калькуляторы.
Читайте также: