Дизайнерский подход к WinForms
Вступление: Часто встречаются приложения которые не блестят особым дизайном UI, так же в них нет вкуса и все в сером цвете. С помощью не хитрых действий можно сделать современное приложение которая не будет уступать монстру WPF, к которому очень не легко сразу научится писать ПО, эта статья скорей для тех кто пишет под WinForms и боится начать WPF, так как они вроде бы похожи но все же отличаются сложностью и крутостью.
Итак. Для простого примера создадим наш собственный браузер на движке webkit с помощью платформы .Net Framework на языке программировании c#
Глава 1: Цвет залог успешной дружелюбности, чем он приятней тем лучше, и кстати белый цвета тоже не плохо смотрятся
Свойства формы: FrameBorder=none, BackColor=white
Глава 2: Кнопки играют не маловажную роль в интерфейсе любой ПО, главное их правильное расположение, размер, текст и цвет,
Для этого создадим UserControl
Глава 3: Не много функциональности для формы
Заключение: Не смотря на многообещающий WPF, Winforms еще жив, пока и не мере в Казахстане и России, и во многих странах, да и вообще везде, не мало людей кто пишут. Путем не многих модернизации можно добиться схожих результатов как и в WPF.
Еще один пример 
Windows Forms: градиент и закругленные кнопки
Да-да, я знаю, что лучше не делать на Windows Forms красивые приложения – для этого есть WPF. Однако, если проект уже разросся, то переносить его из-за пары красивостей не хочется. Тем более, что при достаточной сноровке можно делать симпатичные кнопочки и на Windows Forms.
Итак, сначала создаем кнопку. Называем её неоригинально – button1. Сначала закругляем ей края при загрзуке формы (событие лоад):
Числа подбираются индивидуально — чтобы края у кнопки были закруглены равномерно — я же не заню, какого размера она у вас.
Теперь нам надо закрасить кнопку. Но не просто однотонно, а с градиентом. Это тоже реализуется довольно просто. В обработчик перерисовщика кнопки кидаем:
И получается вот такая картина:
Не сказать, чтобы очень красиво, но своей цели мы все же добились. Если вам требуется помощь программиста по C# или другим языкам программирования, то вы можете написать мне — за небольшую плату я вам с удовольствием помогу.
Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
заметки, visual studio, windows forms
Как создать потрясающий пользовательский интерфейс в WinForms с помощью Bunifu Framework
В основном я бэкенд-разработчик и не люблю тратить время на фронтенд и интерфейсы. У меня также не так много навыков в дизайне и пользовательском интерфейсе, поэтому я обычно делегирую эту часть работы другим коллегам, которые являются графическим дизайнером или разработчиком внешнего интерфейса. Но когда в моей карьере мне пришлось работать над WinForms, чтобы создать приложение Windows для моих клиентов, мне нужно было найти быстрое решение.
Я нашел различные фреймворки, созданные для WinForms, чтобы разработчикам было легко создавать интерфейс пользовательского интерфейса всего за несколько щелчков мышью, и я протестировал их все.
Сегодня я расскажу о Bunifu Framework, и мы вместе создадим базовое погодное приложение для тестирования некоторых элементов управления этой мощной библиотеки.
Начиная
Прежде всего, давайте загрузим пробную версию Bunifu Framework ЗДЕСЬ или купим версию UI WinForms ЗДЕСЬ. В образовательных целях студенты и учителя могут воспользоваться Студенческим планом с огромной скидкой.
Затем создайте новый проект WinForms, я назову его «WeatherApp».
Откройте диспетчер пакетов NuGet и установите пакет Bunifu.UI.WinForms.
Теперь в вашем наборе инструментов создайте новую вкладку, которую я назвал «Bunifu UI».
Выберите «Выбрать элементы», а затем «Обзор».
Перейдите в каталог своего проекта и выберите все Bunifu.WinForms dll, которые вы там найдете.
Теперь вы должны увидеть все доступные элементы управления на новой вкладке.
В этом руководстве мы будем использовать всего несколько элементов управления, но мы можем найти много подробностей обо всех элементах управления в официальной документации.
Реализация пользовательского интерфейса
Перетащите элемент управления SplitContainer, чтобы отделить раздел фильтра от основного раздела приложения. Затем установите для свойства IsSplitterFixed значение true, чтобы пользователь не мог изменять размеры двух панелей.
Добавьте по одной панели BunifuShadowPanel на каждую панель и установите для свойства Dock значение Fill. Я также изменил ShadowStyle второй панели на Dropped, чтобы сделать ее более стильной.
На верхней панели добавьте групповое поле, которое будет содержать текстовое поле и кнопку «Найти» .
Затем добавьте BunifuTextBox и измените свойство Placeholder по своему усмотрению.
Наконец, добавьте BunifuButton, изменив свойство Text на «Найти» и IdleBorderRadius на 25, чтобы границы округлились.
Теперь добавьте информацию о текущей погоде. Например, я помещаю выбранное местоположение, скорость ветра, процент влажности, давление и текущую температуру на BunifuLabel. Я также использовал BunifuPictureBox, чтобы показать простой значок текущей погодной ситуации.
Наконец то же самое на следующие 5 дней. Конечно, это будет всего лишь краткий прогноз, поэтому я покажу только прогнозируемый день, значок и температуру. Я использовал здесь те же элементы управления Bunifu, что и раньше.
Затем нам нужно связать кнопку с событием кода, выполнить два вызова API и установить возвращаемые данные в интерфейс приложения. Ниже вы можете найти простой пример того, как это сделать:
Реализация API
Поскольку мы хотим создать погодное приложение, первое, что нам нужно, — это общедоступный API, который мог бы предоставлять нам такие данные.
Раньше я уже пользовался MetaWeather и рекомендую его, потому что он бесплатный и не требует даже авторизации с логином / токеном. Это делает этот сервис идеальным для таких небольших проектов, как этот.
Для создания нашего приложения нам понадобится всего два вызова API:
Теперь нам нужно создать два новых класса для объекта ответа API. Вы можете создать эти два класса вручную или с помощью онлайн-инструмента, такого как QuickType. Во втором случае этот инструмент также создаст несколько методов, упрощающих сериализацию и десериализацию.
Ниже вы можете найти два класса для обоих ответов API:
Создайте новую папку «API» и новый класс с именем Weather, который будет содержать два наших вызова службы MetaWeather и еще один метод для получения изображения.
Дальнейшие улучшения
Теперь у нас есть приложение, которое показывает текущую погоду и прогноз на ближайшие 5 дней. Что, если мы хотим также увидеть график с минимальной и максимальной температурой?
Откройте диспетчер пакетов NuGet и установите пакет Bunifu.Dataviz.WinForms. Это библиотека, которая содержит типы Базовый и Расширенный, и она поможет нам легко создавать графики.
Давайте создадим разделенный контейнер, чтобы отделить левое меню от основного раздела, и добавим в меню два элемента BunifuTileButton.
Добавьте новую панель с именем «graphPanel» под существующей, просто перетащите внутри нее элемент управления BunifuDataVizAdvanced.
Вернитесь к файлу MainForm.cs и обновите код следующим образом:
Тестовое задание
Мы готовы запустить приложение и посмотреть, что будет.
Заключительная мысль и будущие улучшения
Как видите, сейчас пользовательский интерфейс очень простой и простой. Я сделал это специально, чтобы не делать это руководство слишком длинным, но благодаря Bunifu Framework вы можете очень быстро его значительно улучшить! Для большего количества примеров вы можете посмотреть несколько демо-проектов ЗДЕСЬ.
Сила этой библиотеки только в этом. Он позволяет каждому создавать интерфейсы всего за несколько минут без каких-либо проблем, просто перетаскивая элементы управления в файл дизайна приложения, и вы готовы к работе.
Русские Блоги
Навыки украшения интерфейса C # winform (плоский дизайн)
Несколько советов по украшению интерфейса C #
Без использования сторонних элементов управления, таких как IrisSkin, вы все равно можете сделать красивое украшение winform
Во-первых, давайте реализуем выравнивание основного интерфейса.
Here Здесь есть два шага. Первый шаг — изменить свойства MainForm, поставляемой с winform. Второй шаг — добавить событие формы.
- Измените основную форму FormBorderStyle на None, чтобы вы получили форму без полей (winform поставляется с слишком уродливыми границами . )
- Настройте цвет фона, рекомендуется найти свой любимый цвет, а затем использовать палитру цветов (я использую палитру цветов, которая поставляется вместе с мастером кнопок), чтобы получить нужные параметры RGB и ввести их в свойство BackColor.
- Добавьте следующее событие в Mouse_Down главной формы, чтобы реализовать перетаскивание формы:
- Добавьте кнопку для событий минимизации и выхода. Установите цвет фона BackColor и цвет шрифта Forecolor, чтобы он соответствовал цвету интерфейса. Установите для FlatStyle кнопки значение Popup, и он будет настраиваться в соответствии со стилем интерфейса. Следующим образом:
На этом, благоустройство основной формы и основных функций завершено.
Украсить основные элементы управления формы
TabControl благоустройстве
Измените шрифт вкладки, цвет шрифта и цвет фона с помощью события drawitem в tabcontrol
DataGridview ландшафтный дизайн
- Измените фон, шрифт и цвет заголовков столбцов, установив ColumnHeadersDefaultCellStyle
- Измените фон ячейки, шрифт и цвет, установив DefaultCellStyle
- Установите RowHeadersDefaultCellStyle, чтобы изменить фон, шрифт и цвет заголовка строки
ПрогрессБар ландшафтный дизайн
Многие люди сообщают, что установка свойств BackColor и ForeColor индикатора выполнения winform не будет иметь эффекта, и цвет индикатора выполнения не изменится. Поскольку ProgressBar работает в виртуальном режиме, настройка BackColor и ForeColor не будет иметь никакого эффекта. Он все равно будет изменяться в соответствии с темой окон. Чтобы отобразить его в желаемом цвете, мы можем изменить виртуальный режим. Команда удалена, в program.cs закомментируйте следующее:
Но это вызовет некоторые изменения в форме или стиле других элементов управления. Лично я не рекомендую вышеупомянутое решение, и более рекомендуется изменить его цвет (цвет переднего плана и цвет фона), переопределив метод OnePaint ProgressBar. Здесь у нас есть следующий код
После выполнения вышеуказанных шагов, как мы можем вставить нашу собственную индикатор выполнения в интерфейс? «Мы можем сначала вставить ProgressBar, который поставляется с winform, отрегулировать положение, свойства ForeColor, BackColor, а затем войти в программу Designer формы, чтобы внести следующие изменения:
После того, как вы закончите, вы можете увидеть конечный эффект:
После понимания смысла перерисовки или перезаписи элементов управления другие элементы управления также очень удобно расширять и модифицировать для достижения эффекта ландшафтного дизайна!