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

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

  • автор:

Как сделать Windows 11 закругленными краями в Windows 10?

Если вы хотите узнать, как сделать Windows 11 закругленными краями в Windows 10, продолжайте читать.

Windows 11 была анонсирована пару недель назад, и визуальный редизайн – одна из главных ее новостей. Из всех визуальных изменений, которые Microsoft вносит в операционную систему, многим из нас нравится возвращение закругленных краев окон и меню.

Как сделать Windows 11 закругленными краями в Windows 10?

Как сделать Windows 11 закругленными краями в Windows 10?

Спустя годы, прошедшие с тех пор, как Windows 8 сделала все чрезвычайно квадратным, Windows 11, если хотите, представляет собой «более мягкий» стиль. Если вам это нравится, и вы хотели бы иметь закругленные края в окнах Windows 10, мы расскажем вам о довольно простом решении, которое позволяет вам это сделать. Как сделать Windows 11 закругленными краями в Windows 10?

Есть приложение под названием Шторы который служит для создания и применения различных стилей для ваших окон в Windows 10 такими же простыми способами, как с помощью простого фонового изображения. Curtains – платное приложение, но вы можете использовать его бесплатно в течение 30 дней, после чего его пожизненная лицензия стоит 9,43 доллара.

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

Перейти в галерею пользователя niivu можно на DeviantArt и загрузите его тему Windows 11 для Windows 10. В дополнение к предложению полного пакета тем, который вы можете установить, не изменяя системные файлы, он также предлагает несколько тем для использования специально с шторами, закругляющими края в Windows 10.

Все, что вам нужно сделать, это установить Curtains, а затем загрузить тему с сайта niivu. Затем вам нужно извлечь ZIP-файл темы, который вы загрузили с DeviantArt, и найти папку под названием «Шторы Stardock».

Там вы найдете два файла, которые называются windows 11 light.CurtainsStyle и windows 11 dark.CurtainsStyle. Двойной щелчок по каждой из них добавит их в список тем штор.

Как сделать Windows 11 закругленными краями в Windows 10?

Как сделать Windows 11 закругленными краями в Windows 10?

Оттуда достаточно дважды щелкнуть тему, которую вы хотите использовать, и вы сразу увидите, как края ваших окон становятся закругленными. К сожалению, это не относится ни к плавающим меню, ни к некоторым инструментам, таким как «Настройки» или приложениям, которые используют оформление окон, например, Telegram и Spotify. Но для большей части остального это работает.

Не каждый сможет обновить свой компьютер до Windows 11, и те, кто может, не обязательно захотят устанавливать предварительную версию, чтобы проверить ее изменения. Теперь, если вам нужны лишь некоторые визуальные новинки, вы всегда можете использовать новые значки в Windows 10, созданные тем же человеком, который создал эту тему границы, а также у вас есть новые обои для Windows 11.

Windows 10 скругленные окна

Начиная с версии 2.2 библиотеки пользовательского интерфейса Windows (WinUI), стиль по умолчанию для многих элементов управления обновлен для использования скругленных углов. Starting with version 2.2 of the Windows UI Library (WinUI), the default style for many controls has been updated to use rounded corners. Эти новые стили призваны вызывать энтузиазм и доверие, а также облегчать визуальную обработку интерфейса пользователями. These new styles are intended to evoke warmth and trust, and make the UI easier for users to visually process.

Здесь представлены два элемента управления «Кнопка»: первая без скругленных углов, а вторая — в новом стиле со скругленными углами. Here are two Button controls, the first without rounded corners and the second using the new rounded corner style.

При установке пакета NuGet для WinUI 2.2 или более поздней версии новые стили по умолчанию устанавливаются для элементов управления WinUI и платформ. When you install the NuGet package for WinUI 2.2 or later, new default styles are installed for both WinUI controls and platform controls. Эти стили автоматически применяются при использовании WinUI 2.2 в приложении; никаких дополнительных действий для использования новых стилей не требуется. These styles are used automatically when you use WinUI 2.2 in your app; there is no further action you need to take to use the new styles. Однако далее в этой статье мы покажем, как настроить скругленные углы, если это необходимо. However, later in this article we show how to customize the rounded corners if you need to do so.

Некоторые элементы управления доступны как на платформе (Windows.UI.Xaml.Controls), так и в WinUI (Microsoft.UI.Xaml.Controls); например TreeView или ColorPicker. Some controls are available both in the platform (Windows.UI.Xaml.Controls) and in WinUI (Microsoft.UI.Xaml.Controls); for example, TreeView or ColorPicker. При использовании WinUI в приложении следует использовать версию элемента управления WinUI. When you use WinUI in your app, you should use the WinUI version of the control. При использовании с WinUI в версии платформы скругление углов может применяться непоследовательно. Corner rounding might be applied inconsistently in the platform version when used with WinUI.

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

Существуют три области элементов управления, в которых используются стили скругленных углов: прямоугольные элементы, всплывающие элементы и элементы панели. There are three areas of the controls where the rounded corner styles are used: rectangular elements, flyout elements, and bar elements.

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

  • Эти элементы пользовательского интерфейса включают в себя основные элементы управления, такие как кнопки, которые пользователи постоянно видят на экране. These UI elements include basic controls like buttons that users see on screen at all times.
  • Значение радиуса по умолчанию, используемое для этих элементов пользовательского интерфейса, — 2 пкс. The default radius value we use for these UI elements is 2px.

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

  • Элемент управления AutoSuggestBox AutoSuggestBox
  • Кнопка Button
    • Кнопки ContentDialog ContentDialog buttons
    • Флажки множественного выбора TreeView TreeView multi-select check boxes

    Углы элементов пользовательского интерфейса всплывающего меню и наложения Corners of flyout and overlay UI elements

    • Это могут быть элементы пользовательского интерфейса, которые отображаются на экране временно, например MenuFlyout, или элементы, накладываемые на другой элемент пользовательского интерфейса, такие как вкладки TabView. These can be transient UI elements that appear on screen temporarily, like MenuFlyout, or elements that overlay other UI, like TabView tabs.
    • Значение радиуса по умолчанию, используемое для этих элементов пользовательского интерфейса, — 4 пкс. The default radius value we use for these UI elements is 4px.

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

    • CommandBarFlyout CommandBarFlyout
    • ContentDialog ContentDialog
    • Всплывающий элемент Flyout
    • MenuFlyout MenuFlyout
    • вкладки TabView TabView tabs
    • TeachingTip TeachingTip
    • ToolTip ToolTip
    • Часть всплывающего элемента (при открытии) Flyout part (when open)
      • Элемент управления AutoSuggestBox AutoSuggestBox
      • CalendarDatePicker CalendarDatePicker
      • ComboBox ComboBox
      • DatePicker DatePicker
      • DropDownButton DropDownButton
      • MenuBar MenuBar
      • SplitButton SplitButton
      • TimePicker TimePicker
      • ToggleSplitButton ToggleSplitButton

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

      • Эти элементы пользовательского интерфейса выглядят как строки или линии; например ProgressBar. These UI elements are shaped like bars or lines; for example, ProgressBar.
      • Используемые по умолчанию значения радиуса — 2 пкс. The default radius values we use here are 2px.

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

      • Индикатор выбора NavigationView NavigationView selection indicator
      • Индикатор выбора сводки Pivot selection indicator
      • ProgressBar ProgressBar
      • ScrollBar (при IndicatorMode=TouchIndicator ) ScrollBar (when IndicatorMode=TouchIndicator )
      • Ползунок Slider
        • Ползунок цвета ColorPicker ColorPicker color slider
        • Ползунок полосы поиска MediaTransportControls MediaTransportControls seek bar slider

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

        Значения радиусов углов по умолчанию, которые мы предоставляем, не окончательны. Вы можете изменить количество закруглений по углам, используя один из нескольких простых способов. The default corner radii values that we provide are not set in stone and there are a few ways you can easily modify the amount of rounding on the corners. Используйте два глобальных ресурса или свойство CornerRadius непосредственно в элементе управления в зависимости от необходимой степени детализации пользовательской настройки. This can be done through two global resources, or through the CornerRadius property directly on the control, depending on the level of customization granularity you want.

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

        Существуют экземпляры, в которых угол элемента управления не должен закругляться, и мы не будем закруглять их по умолчанию. There are instances where the corner of a control should not be rounded, and we don’t round these by default.

        • Когда несколько элементов пользовательского интерфейса, размещенные внутри контейнера, соприкасаются друг с другом, например две части SplitButton. When multiple UI elements that are housed inside a container touch each other, such as the two parts of a SplitButton. При взаимодействии не должно быть пробелов. There should be no space when they contact.
        • Когда элемент управления находится в другом контейнере, например, в ScrollBar и кнопках, которые являются частью контейнера ScrollBar, также являющегося частью ScrollViewer. When a control is housed inside another container, like a ScrollBar’s bar and buttons that are part of the ScrollBar container, which is also part of a ScrollViewer.

        • Если всплывающий элемент пользовательского интерфейса подключен к пользовательскому интерфейсу, который вызывает всплывающее окно на одной стороне. When a flyout UI element is connected to a UI that invokes the flyout on one side.

        Прямоугольник фокуса клавиатуры и тень Keyboard focus rectangle and shadow

        Наша структура по умолчанию не выполняет никаких специальных действий по скруглению углов прямоугольника фокуса ввода с клавиатуры или тени элементов управления. Our default design does not do any special work to round the corners of the keyboard focus rectangle or control shadow. Использование большего значения радиуса угла не нарушит его с функциональной точки зрения, однако об этом следует помнить, чтобы избежать нежелательных сбоев в визуализации, которые могут возникнуть при большем значении. Using a higher corner radius value will not break them functionally; however, it is good to be aware of this to avoid unwanted visual glitches that could be introduced with a larger value.

        Ниже приведен пример того, как радиус более крупного угла может привести к нежелательному внешнему виду тени. Here is an example of how a larger corner radius can make the shadow look undesirable:

        Скругленные углы и производительность Rounded corners and performance

        Отрисовка скругленных углов естественным образом использует больше возможностей рисования, чем отрисовка квадратных углов. Rendering rounded corners naturally uses more drawing power than rendering square corners. При выборе значений радиуса угла по умолчанию мы не только учитывали принципы проектирования, но и старались обеспечить хорошую работу элементов управления по умолчанию при их использовании в ваших приложениях. When selecting the default corner radius values, we not only considered the design principles but we were also careful to ensure our default controls perform well when you use them in your apps.

        Размышляя о производительности приложения в этом контексте, вы должны в первую очередь учитывать время загрузки страницы и время запуска приложения. When thinking about app performance in this context, you should primarily consider page load time and app launch time. Учтите, что скругленные углы на большой поверхности пользовательского интерфейса оказывают большее влияние на производительность. Consider that rounded corners on a larger UI surface have a greater impact on performance. Избегайте скругления углов в полноэкранном пользовательском интерфейсе приложения. Avoid drawing rounded corners on a full screen app UI. Это менее проблематично, если пользовательский интерфейс отображается на короткое время после загрузки страницы, например в ContentDialog. This is less of an issue if the UI is displayed briefly and after the page is loaded, like a ContentDialog.

        Изменения CornerRadius на уровне страницы или приложения Page or app-wide CornerRadius changes

        Существует 2 ресурса приложения, которые управляют радиусом углов всех элементов управления: There are 2 app resources that control the corner radii of all the controls:

        • ControlCornerRadius Значение по умолчанию — 2 пкс. ControlCornerRadius — default is 2px.
        • OverlayCornerRadius Значение по умолчанию — 4 пкс. OverlayCornerRadius — default is 4px.

        Переопределение значения этих ресурсов в какой бы то ни было области соответствующим образом повлияет на все элементы управления в этой области. If you override the value of these resources at any scope, it will affect all controls within that scope accordingly.

        Это означает, что если вы хотите изменить округлость всех элементов управления, к которым ее можно применить, вы можете определить оба ресурса на уровне приложений с помощью таких новых значений CornerRadius: This means if you want to change the roundness of all controls where roundness could be applied, you can define both resources at the app level with the new CornerRadius values like this:

        Кроме того, если вы хотите изменить закругление всех элементов управления в определенной области, например на уровне страницы или контейнера, можно следовать подобному шаблону: Alternatively, if you want to change all controls’ roundness within a particular scope, like at a page or container level, you can follow a similar pattern:

        Чтобы изменения вступили в силу, ресурс OverlayCornerRadius следует определить на уровне приложения. The OverlayCornerRadius resource must be defined at the app level in order to take effect.

        Это связано с тем, что всплывающие окна и всплывающие меню являются динамическими и создаются в корневом элементе визуального дерева, поэтому в этом месте следует определить также все используемые ими ресурсы. This is because popups and flyouts are dynamic and created at the root element in the Visual Tree, so any resources that they use must also be defined there. В противном случае они выходят за пределы области. Otherwise, they’re out of scope.

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

        Чтобы изменить скругление только выбранного числа элементов управления, можно изменить свойство CornerRadius непосредственно на элементах управления. You can modify the CornerRadius property on controls directly if you want to change the roundness of only a select number of controls.

        Значение по умолчанию Default Измененное свойство Property modified

        Не все углы элементов управления будут реагировать на изменение их свойства CornerRadius . Not all controls’ corners will respond to their CornerRadius property being modified. Чтобы убедиться, что элемент управления, углы которого вы хотите закруглить, будет отвечать свойству CornerRadius , сначала проверьте, влияют ли на рассматриваемый элемент управления глобальные ресурсы ControlCornerRadius или OverlayCornerRadius . To ensure that the control whose corners you wish to round will indeed respond to their CornerRadius property the way you expect, first check that the ControlCornerRadius or OverlayCornerRadius global resources affect the control in question. Если нет, убедитесь, что у элемента управления, который вы хотите закруглить, есть углы. If they do not, check that the control you wish to round has corners at all. Многие элементы управления не отображают фактические края и поэтому не могут правильно использовать свойство CornerRadius . Many of our controls do not render actual edges and therefore cannot make proper use of the CornerRadius property.

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

        Вы можете создавать пользовательские стили на основе стилей WinUI с закругленными углами, указав корректный атрибут BasedOn в своем стиле. You can base your custom styles on the WinUI rounded corner styles by specifying the correct BasedOn attribute in your style. Например, чтобы создать пользовательский стиль кнопки на основе стиля кнопки WinUI, сделайте следующее: For example to create a custom button style based on WinUI button style, do the following:

        Как правило, стили элементов управления WinUI следуют согласованному порядку именования: «DefaultXYZStyle», где «XYZ» — это имя элемента управления. In general, WinUI control styles follow a consistent naming convention: «DefaultXYZStyle» where «XYZ» is the name of the control. Полную справку можно найти в файлах XAML в репозитории WinUI. For full reference, you can browse the XAML files in the WinUI repository.

        Как сделать панель задач Windows 10 с закругленными углами

        В Windows 10 все постепенно округляется. Обычные «углы» исчезают. Любой, кто хочет, чтобы панель задач выглядела плавающей на рабочем столе и имела скругленные края, может взглянуть на приложение RoundedTB.

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

        • Приложение также работает вместе с TranslucentTB, которое может сделать вашу панель задач прозрачной.
        • Не изменяет и не модифицирует системные файлы.
        • Поддерживает автоматическое скрытие панели задач.
        • Автоматически обновляется при подключении / отключении новых мониторов или перезапуске Проводника.

        Этот маленький инструмент все еще находится в стадии разработки. Так что не ругайте сразу, могут быть ошибки! Как только вы выходите из приложения с помощью значка на панели задач, панель задач снова отображается как обычно.

        Windows 10 обновится по примеру Windows 7 и Windows XP. Microsoft сгладит окнам углы

        Microsoft немного подретуширует вид окон Windows 10, причем сделает это по типу Windows 7, Vista и XP. Речь – о закругленных углах окон.

        Windows 10 обновится по примеру Windows 7 и Windows XP. Microsoft сгладит окнам углы

        Напомним, до перехода на художественный стиль оформления графического интерфейса под названием Metro, который дебютировал в Windows 8, использовался стиль Aero, частью которого были закругленные углы окон. После выпуска Windows 8 кто-то как будто прошелся по интерфейсу Windows циркулярной пилой – все стало строго параллельно и перпендикулярно. И вот сейчас Microsoft заявила о желании вернуться к прежнему стилю.

        Windows 10 обновится по примеру Windows 7 и Windows XP. Microsoft сгладит окнам углы

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

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

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

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