Как сделать круглые окна в windows 10
Перейти к содержимому

Как сделать круглые окна в windows 10

  • автор:

Как активировать скругленные углы в Windows 10 May 2019 Update

Microsoft уже давно работает с внедрением пользовательского интерфейса под названием Fluent Design, который пришел на смену MDL2. Изначально там тоже были острые углы в интерфейсе, как в Metro, но компания пересматривает свою политику и теперь углы будут скругленные. Более того, в поиске можно эту фичу даже активировать.

  1. Запустите regedit.exe, используя поиск Windows.
  2. Перейдите в раздел HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Search\ и нажмите ПКМ (правую кнопку мышки) справа в окне, и создайте параметр DWORD 32 бита с таким названием: ImmersiveSearch (значение 1).
  3. Зайдите в HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Search\Flighting\ и при помощи ПКМ создайте раздел Override (параметр DWORD 32 бита с названием CenterScreenRoundedCornerRadius и значением 9).
  4. Перезапустите ПК.

Применение скругленных углов в классических приложениях для Windows 11

Скругленные углы — это самая заметная особенность в геометрическом оформлении интерфейса Windows 11. В Windows 11 система автоматически скругляет углы окон верхнего уровня для всех предустановленных приложений, включая все приложения UWP, и большинства других приложений. Но в некоторых приложениях Win32 окна могут не скругляться. В этой статье объясняется, как применить скругление углов главного окна приложения Win32, если система не делает это автоматически.

По умолчанию скругление в приложениях не применяется при максимальном развертывании и прикреплении окон, а также при работе на виртуальной машине, в Виртуальном рабочем столе Windows (WVD) и в окне Application Guard в Windows Defender (WDAG).

A screenshot of the Notepad app on Windows 11 with rounded corners.

Почему в моем приложении не скруглены углы?

Если углы основного окна вашего приложения не скругляются автоматически, это связано с тем, что настроенные вами параметры рамки препятствуют скруглению. В контексте диспетчера окон рабочего стола (DWM), приложения делятся на три основные категории:

  1. Приложения, в которых скругление применяется по умолчанию. К ним относятся приложения, которым требуется полноценная предоставленная системой рамка и элементы управления заголовками (кнопки свертывания, развертывания и закрытия), например «Блокнот». Сюда также входят приложения, которые предоставляют системе достаточно информации, чтобы она могла правильно скруглить углы, например задать стили окна WS_THICKFRAME и WS_CAPTION или предоставить границу неклиентской области шириной в 1 пиксель, которую система может использовать для скругления углов.
  2. Приложения, в которых скругление не применено в соответствии с политикой, но в которых это можно сделать. Приложения этой категории обычно самостоятельно настраивают большую часть рамки окна, но им по-прежнему требуется отображаемая системой граница и тень (например, Microsoft Office). Если в вашем приложении скругление не применяется в соответствии с политикой, это может быть вызвано одной из следующих причин:
    • нехватка стилей рамок;
    • пустая область, не относящаяся к клиенту;
    • другие настройки, такие как дополнительные окна, не являющиеся дочерними элементами и используемые для настраиваемых теней.

Изменение в одном из этих пунктов приведет к нарушению автоматического скругления. Хотя мы старались скруглить углы как можно большего количества приложений с помощью нашей системной эвристики, есть некоторые комбинации настроек, которые мы не можем предсказать. Для таких случаев мы предусмотрели API, позволяющий предоставить согласие вручную. Если вы решите эти проблемы в своем приложении или вызовете API подписки, описанный в следующем разделе, система может применить скругление для вашего приложения. Но обратите внимание, что API является указанием для системы и не гарантирует скругление в зависимости от настроек.

  • альфа-наложение для каждого пикселя;
  • применение областей окон.

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

Как предоставить согласие на скругление углов

Если приложение не округляется по политике, вы можете использовать эти API, чтобы разрешить приложению обходить круглые углы. Вы указываете параметр округления угла, который требуется для приложения, передав значение перечисления DWM_WINDOW_CORNER_PREFERENCE (показанное в следующей таблице) в функцию DwmSetWindowAttribute.

Значение перечисления Description
DWMWCP_DEFAULT Система определяет, следует ли скруглять углы окон.
DWMWCP_DONOTROUND Скругление не применяется.
DWMWCP_ROUND Скругление применяется, если это уместно.
DWMWCP_ROUNDSMALL Скругление с небольшим радиусом применяется, если это уместно.

Указатель на соответствующее значение из этой перечисления передается третьему параметру DwmSetWindowAttribute. Для второго параметра, указывающего, какой атрибут задан, передайте значение DWMWA_WINDOW_CORNER_PREFERENCE, определенное в перечислении DWMWINDOWATTRIBUTE.

Приложения C#

DwmSetWindowAttribute — это собственный API Win32, который не предоставляется непосредственно коду .NET. Для объявления функции необходимо использовать реализацию языка P/Invoke (код C#, приведенный в приведенном ниже примере). Во всех стандартных приложениях WinForms и WPF углы скругляются автоматически. Но если вы настраиваете рамку окна или используете стороннюю платформу, вам может потребоваться предоставить согласие на применение скругления углов. Дополнительные сведения см. в разделе с примерами.

Примеры

В приведенных ниже примерах показано, как вызвать DwmSetWindowAttribute или DwmGetWindowAttribute, чтобы управлять скруглением углов в приложении, если скругление не применяется в соответствии с политикой.

Для краткости и ясности в этих примерах обработка ошибок исключена.

Пример 1. Скругление углов главного окна приложения в C# — WPF

В этом примере показано, как вызвать DwmSetWindowAttribute из C# с помощью атрибута [DllImport]. Обратите внимание, что это определение относится к скругленным углам. Функция DwmSetWindowAttribute предназначена для приема различных параметров в зависимости от предоставленных флагов, поэтому это не сигнатура общего назначения. Пример также включает копии соответствующих перечислений из заголовочного файла dwmapi.h. Так как API Win32 принимает указатель на третий параметр, обязательно используйте ключевое слово ref, чтобы можно было передать адрес переменной при вызове функции. Это можно сделать в классе MainWindow в MainWindow.xaml.cs.

using System.Runtime.InteropServices; using System.Windows.Interop; public partial class MainWindow : Window < // The enum flag for DwmSetWindowAttribute's second parameter, which tells the function what attribute to set. // Copied from dwmapi.h public enum DWMWINDOWATTRIBUTE < DWMWA_WINDOW_CORNER_PREFERENCE = 33 >// The DWM_WINDOW_CORNER_PREFERENCE enum for DwmSetWindowAttribute's third parameter, which tells the function // what value of the enum to set. // Copied from dwmapi.h public enum DWM_WINDOW_CORNER_PREFERENCE < DWMWCP_DEFAULT = 0, DWMWCP_DONOTROUND = 1, DWMWCP_ROUND = 2, DWMWCP_ROUNDSMALL = 3 >// Import dwmapi.dll and define DwmSetWindowAttribute in C# corresponding to the native function. [DllImport("dwmapi.dll", CharSet = CharSet.Unicode, PreserveSig = false)] internal static extern void DwmSetWindowAttribute(IntPtr hwnd, DWMWINDOWATTRIBUTE attribute, ref DWM_WINDOW_CORNER_PREFERENCE pvAttribute, uint cbAttribute); // . // Various other definitions // . > 

Затем в конструкторе MainWindow после вызова InitializeComponent создайте новый экземпляр класса WindowInteropHelper, чтобы получить указатель на базовый дескриптор окна (HWND). Обязательно используйте метод EnsureHandle, чтобы система создала HWND для окна перед его отображением, так как обычно система делает это только после выхода из конструктора.

public MainWindow() < InitializeComponent(); IntPtr hWnd = new WindowInteropHelper(GetWindow(this)).EnsureHandle(); var attribute = DWMWINDOWATTRIBUTE.DWMWA_WINDOW_CORNER_PREFERENCE; var preference = DWM_WINDOW_CORNER_PREFERENCE.DWMWCP_ROUND; DwmSetWindowAttribute(hWnd, attribute, ref preference, sizeof(uint)); // . // Perform any other work necessary // . >

Пример 2. Скругление углов главного окна приложения в C# — WinForms

Как и в случае с WPF, для приложения WinForms сначала необходимо импортировать dwmapi.dll и сигнатуру функции DwmSetWindowAttribute с использованием P/Invoke. Это можно сделать в основном классе Form.

using System; using System.Runtime.InteropServices; public partial class Form1 : Form < // The enum flag for DwmSetWindowAttribute's second parameter, which tells the function what attribute to set. // Copied from dwmapi.h public enum DWMWINDOWATTRIBUTE < DWMWA_WINDOW_CORNER_PREFERENCE = 33 >// The DWM_WINDOW_CORNER_PREFERENCE enum for DwmSetWindowAttribute's third parameter, which tells the function // what value of the enum to set. // Copied from dwmapi.h public enum DWM_WINDOW_CORNER_PREFERENCE < DWMWCP_DEFAULT = 0, DWMWCP_DONOTROUND = 1, DWMWCP_ROUND = 2, DWMWCP_ROUNDSMALL = 3 >// Import dwmapi.dll and define DwmSetWindowAttribute in C# corresponding to the native function. [DllImport("dwmapi.dll", CharSet = CharSet.Unicode, PreserveSig = false)] internal static extern void DwmSetWindowAttribute(IntPtr hwnd, DWMWINDOWATTRIBUTE attribute, ref DWM_WINDOW_CORNER_PREFERENCE pvAttribute, uint cbAttribute); // . // Various other definitions // . > 

Вызов DwmSetWindowAttribute также соответствует вызову в приложении WPF, но при этом вам не нужно использовать вспомогательный класс для получения HWND, так как это просто свойство Form. Вызовите эту функцию из конструктора Form после вызова InitializeComponent.

public Form1() < InitializeComponent(); var attribute = DWMWINDOWATTRIBUTE.DWMWA_WINDOW_CORNER_PREFERENCE; var preference = DWM_WINDOW_CORNER_PREFERENCE.DWMWCP_ROUND; DwmSetWindowAttribute(this.Handle, attribute, ref preference, sizeof(uint)); // . // Perform any other work necessary // . >

Пример 3. Скругление углов главного окна приложения в C++

Для собственного приложения C++ можно вызвать DwmSetWindowAttribute в функции обработки сообщений после создания окна, чтобы система применила скругление.

LRESULT ExampleWndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam) < switch (message) < // . // Handle various window messages. // . case WM_CREATE: // . // Perform app resource initialization after window creation // . if(hWnd) < DWM_WINDOW_CORNER_PREFERENCE preference = DWMWCP_ROUND; DwmSetWindowAttribute(hWnd, DWMWA_WINDOW_CORNER_PREFERENCE, &preference, sizeof(preference)); >break; // . // Handle various other window messages. // . > return 0; > 

Пример 4. Скругление углов меню с небольшим радиусом — С++

По умолчанию меню — это всплывающие окна, углы которых не скругляются. Если приложение создает пользовательское меню и вы хотите, чтобы оно соответствовало политике скругления для других стандартных меню, можно вызвать API. Он проинформирует систему о том, что углы этого окна должны быть скруглены, даже если это не соответствует политике скругления по умолчанию.

HWND CreateCustomMenu() < // Call an app-specific helper to make the window, using traditional APIs. HWND hWnd = CreateMenuWindowHelper(); if (hWnd) < // Make sure we round the window, using the small radius // because menus are auxiliary UI. DWM_WINDOW_CORNER_PREFERENCE preference = DWMWCP_ROUNDSMALL; DwmSetWindowAttribute(hWnd, DWMWA_WINDOW_CORNER_PREFERENCE, &preference, sizeof(preference)); >return hWnd; > 

Совместная работа с нами на GitHub

Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.

Радиус угла

Начиная с версии 2.2 библиотеки пользовательского интерфейса Windows (WinUI), стиль по умолчанию для многих элементов управления обновлен для использования скругленных углов. Эти новые стили призваны вызывать энтузиазм и доверие, а также облегчать визуальную обработку интерфейса пользователями.

Ниже приведены два элемента управления Кнопка: первый без скругленных углов, а второй — со скругленными углами.

Кнопки со скругленными углами и без них

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

Некоторые элементы управления доступны как на платформе (Windows.UI.Xaml.Controls), так и в WinUI (Microsoft.UI.Xaml.Controls); например TreeView или ColorPicker. При использовании WinUI в приложении следует использовать версию элемента управления WinUI. При использовании с WinUI в версии платформы скругление углов может применяться непоследовательно.

Макеты элементов управления по умолчанию

Существуют три области элементов управления, в которых используются стили скругленных углов: прямоугольные элементы, всплывающие элементы и элементы панели.

Углы прямоугольных элементов пользовательского интерфейса

  • Эти элементы пользовательского интерфейса включают в себя основные элементы управления, такие как кнопки, которые пользователи постоянно видят на экране.
  • Значение радиуса по умолчанию, используемое для этих элементов пользовательского интерфейса, — 4 пкс.

Кнопка с выделенными скругленными углами

Элементы управления

  • Элемент управления AutoSuggestBox
  • Кнопки
    • Кнопки ContentDialog
    • Поля treeView, GridView и ListView с множественным выделением проверка
    • AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, TreeView list

    Углы элементов пользовательского интерфейса всплывающего меню и наложения

    • Это могут быть элементы пользовательского интерфейса, которые отображаются на экране временно, например MenuFlyout, или элементы, накладываемые на другой элемент пользовательского интерфейса, такие как вкладки TabView.
    • Значение радиуса по умолчанию, которое мы используем для этих элементов пользовательского интерфейса, — 8 пикселей.

    Пример всплывающего элемента

    Элементы управления

    • CommandBarFlyout
    • ContentDialog
    • Всплывающий элемент
    • MenuFlyout
    • вкладки TabView
    • TeachingTip
    • Подсказка (использует радиус 4 пикселей из-за небольшого размера)
    • Часть всплывающего элемента (при открытии)
      • Элемент управления AutoSuggestBox
      • CalendarDatePicker
      • ComboBox
      • DatePicker
      • DropDownButton
      • Элемент управления рукописным вводом
      • MenuBar
      • NumberBox
      • SplitButton
      • TimePicker
      • ToggleSplitButton

      Элементы панели

      • Эти элементы пользовательского интерфейса выглядят как строки или линии; например ProgressBar.
      • Значения радиуса по умолчанию, которые мы используем здесь, — 4 пикселей.

      Пример индикатора выполнения

      Элементы управления

      • Индикатор выбора NavigationView
      • ProgressBar
      • ScrollBar
      • Ползунок
        • Ползунок цвета ColorPicker
        • Ползунок полосы поиска MediaTransportControls

        Параметры настройки

        Значения радиусов углов по умолчанию, которые мы предоставляем, не окончательны. Вы можете изменить количество закруглений по углам, используя один из нескольких простых способов. Используйте два глобальных ресурса или свойство CornerRadius непосредственно в элементе управления в зависимости от необходимой степени детализации пользовательской настройки.

        Когда не следует закруглять

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

        • Когда несколько элементов пользовательского интерфейса, размещенные внутри контейнера, соприкасаются друг с другом, например две части SplitButton. При взаимодействии не должно быть пробелов.

        SplitButton

        • Если всплывающий элемент пользовательского интерфейса подключен к пользовательскому интерфейсу, который вызывает всплывающее окно на одной стороне.

        Снимок экрана: всплывающий элемент автозаполнения, в котором некоторые углы не скруглены.

        Изменения CornerRadius на уровне страницы или приложения

        Существует 2 ресурса приложения, которые управляют радиусом углов всех элементов управления:

        • ControlCornerRadius Значение по умолчанию — 4 пкс.
        • OverlayCornerRadius — значение по умолчанию — 8 пикселей.

        Переопределение значения этих ресурсов в какой бы то ни было области соответствующим образом повлияет на все элементы управления в этой области.

        Это означает, что если вы хотите изменить округлость всех элементов управления, к которым ее можно применить, вы можете определить оба ресурса на уровне приложений с помощью таких новых значений CornerRadius:

        Кроме того, если вы хотите изменить закругление всех элементов управления в определенной области, например на уровне страницы или контейнера, можно следовать подобному шаблону:

        Чтобы изменения вступили в силу, ресурс OverlayCornerRadius следует определить на уровне приложения.

        Это связано с тем, что всплывающие окна и всплывающие элементы не входят в визуальное дерево страницы, а добавляются в корень всплывающего окна. Система разрешения ресурсов неправильно проходит визуальное дерево всплывающего корня в визуальное дерево страницы.

        Изменения для каждого элемента управления CornerRadius

        Чтобы изменить скругление только выбранного числа элементов управления, можно изменить свойство CornerRadius непосредственно на элементах управления.

        Значение по умолчанию Измененное свойство
        DefaultCheckBox CustomCheckBox

        Не все углы элементов управления будут реагировать на изменение их свойства CornerRadius . Чтобы убедиться, что элемент управления, углы которого вы хотите закруглить, будет отвечать свойству CornerRadius , сначала проверьте, влияют ли на рассматриваемый элемент управления глобальные ресурсы ControlCornerRadius или OverlayCornerRadius . Если нет, убедитесь, что у элемента управления, который вы хотите закруглить, есть углы. Многие элементы управления не отображают фактические края и поэтому не могут правильно использовать свойство CornerRadius .

        Создание пользовательских стилей на основе WinUI

        Вы можете создавать пользовательские стили на основе стилей WinUI с закругленными углами, указав корректный атрибут BasedOn в своем стиле. Например, чтобы создать пользовательский стиль кнопки на основе стиля кнопки WinUI, сделайте следующее:

        Как правило, стили элементов управления WinUI следуют согласованному порядку именования: «DefaultXYZStyle», где «XYZ» — это имя элемента управления. Полную справку можно найти в файлах XAML в репозитории WinUI.

        Совместная работа с нами на GitHub

        Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.

        Круглые углы в Windows 10

        Круглые углы в Windows 10

        Так как круглые углы в Windows 10 мы с вами будет делать без стороннего софта и приложений, это может значить только то, что придется использовать относительно недавно появившееся новшество, которое активно внедряется разработчиками из MS и называется «Fluent Design». Благодаря Fluent Design, всегда есть возможность придать операционной системе не просто привлекательный облик, но еще и весьма не плохо обновить ее. Таким образом, работать продолжить вы сможете в привычной программной среде, но при всем при этом, в визуальном плане, ОС будет совершенно иной.

        Перед тем, как вы начнете настраивает систему по предоставленной ниже инструкции, хотим предупредить о том, что данный способ подойдет только тем пользователям, которые уже смогли обновиться до версии Windows 10 May 2019 Update, так как у более ранних версий обновления ОС, скругление острых углов не работает.

        Как сделать круглые углы в Windows 10?

        • Для данного действия, нам с вами прийдется воспользоваться возможностями Fluent Design, которые на данный момент частично скрыты от обычного пользователя и могут быть доступны ему при помощи некоторых программных манипуляций в «regedit.exe».
        • Потребуется запустить «regedit.exe» (можно это сделать при помощи «Поиска») → по средствам перехода из «папки в папку», перемещаетесь по данному пути: «HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Search\» → вызвав контекстное меню, создаете «DWORD 32-битный» параметры, который получает в обязательном порядке имя «ImmersiveSearch» и значение «1».
        • Так же, запустив «regedit.exe», необходимо выполнить перемещение и по еще одному пути: «HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Search\Flighting\» → вызвав контекстное меню, необходимо создать параметр «Override» → снова вызываете контекстное меню, но на этот раз, создаете «DWORD 32-битный», который обязательно получает имя «CenterScreenRoundedCornerRadius» и значение «9».
        • Для того, чтоб после выполненных настроек увидеть круглые углы в Windows 10, необходимо перезагрузить операционную систему, так как внесенные в её реестр изменения, только после перезагрузки смогут себя реально проявить в визуальном плане.

        Таким образом, визуализация пространства операционной системы становится очень простым процессом, который доступен любому пользователю и в любом месте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *