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

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

Публикация: 2 Июнь 2021 Обновлено: 4 Июнь 2021

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

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

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

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

В Windows 10, версия 21H2 (Sun Valley) меню панели задач получит скругленные углы

Те скриншоты, которые мы уже видели, соответствуют современной операционной системе с унифицированным интерфейсом. Меню «Пуск», список приложений, уведомления и центр действий, а также некоторые другие элементы стали более привлекательными и строго соответствуют общей дизайнерской концепции. На днях в твиттере пользователь под ником TheXamlGuy опубликовал изображение нового меню панели задач.

При изучении данного скриншота сразу бросается в глаза, что список быстрого перехода панели задач получил скругления. Согласно внутренним источника, список переходов на изображении аналогичен запланированному Microsoft.

Масштабная цель «Sun Valley» — модернизация внешнего вида операционной системы. В рамках данного проекта Microsoft стремится создать единый современный интерфейс. Закругленные углы и общий дизайн списка переходов на панели задач хорошо сочетаются с уведомлениями и центром действий, меню «Пуск» и другими элементами обновления.

Зак Боуден (Zac Bowden) из Windows Central так прокомментировал визуальные улучшения:

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

Боуден продемонстрировал список переходов панели задач еще в феврале, но на тот момент дизайн Sun Valley еще не был окончательно доработан.

Пользователи Windows 10 годами просили улучшить интерфейс системы. Разрозненные меню, устаревший дизайн и другие странные элементы теперь, похоже, наконец исчезнут из операционной системы Microsoft.

Радиус угла

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

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

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

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

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

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

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

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

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

  • Элемент управления AutoSuggestBox
  • Кнопка
  • Кнопки ContentDialog
  • CalendarDatePicker
  • Флажок
    • Флажки множественного выбора TreeView
    • ComboBox
    • DatePicker
    • DropDownButton
    • FlipView.
    • PasswordBox
    • Элемент управления RichEditBox
    • SplitButton
    • TextBox
    • TimePicker
    • ToggleButton
    • ToggleSplitButton
    • Углы элементов пользовательского интерфейса всплывающего меню и наложения

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

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

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

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

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

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

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

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

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

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

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

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

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

      • Когда элемент управления находится в другом контейнере, например, в ScrollBar и кнопках, которые являются частью контейнера ScrollBar, также являющегося частью ScrollViewer.

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

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

      Прямоугольник фокуса клавиатуры и тень

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

      Ниже приведен пример того, как радиус более крупного угла может привести к нежелательному внешнему виду тени.

      ContentDialogShadow

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

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

      Размышляя о производительности приложения в этом контексте, вы должны в первую очередь учитывать время загрузки страницы и время запуска приложения. Учтите, что скругленные углы на большой поверхности пользовательского интерфейса оказывают большее влияние на производительность. Избегайте скругления углов в полноэкранном пользовательском интерфейсе приложения. Это менее проблематично, если пользовательский интерфейс отображается на короткое время после загрузки страницы, например в ContentDialog.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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