Udostępnij przez

Promień narożnika

Począwszy od wersji 2.2 interfejsu WinUI, domyślny styl wielu kontrolek został zaktualizowany do używania zaokrąglonych narożników. Te style mają na celu wywołanie ciepła i zaufania oraz ułatwienie użytkownikom wizualnego przetwarzania UI.

Oto dwa przyciski, pierwszy bez zaokrąglonych narożników, a drugi z użyciem stylu zaokrąglonych narożników.

Przyciski bez i z zaokrąglonymi narożnikami

Interfejs WinUI udostępnia zaktualizowane style zarówno dla kontrolek WinUI, jak i platformy. Aby uzyskać szczegółowe informacje na temat dostosowywania zaokrąglonych narożników, zobacz Opcje dostosowywania.

Ważne

Niektóre kontrolki są dostępne zarówno na platformie (Windows.UI.Xaml.Controls), jak i w systemie WinUI (Microsoft.UI.Xaml.Controls); na przykład TreeView lub ColorPicker. Korzystając z WinUI w aplikacji, należy użyć wersji WinUI kontrolki. Zaokrąglenie narożne może być stosowane niespójnie w wersji systemu w przypadku użycia z WinUI.

Ważne interfejsy API: Właściwość Control.CornerRadius

Domyślne projekty kontrolek

Istnieją trzy obszary elementów sterujących, w których są używane style zaokrąglonych rogów: elementy prostokątne, elementy wysuwane i elementy słupkowe.

Narożniki prostokątnych elementów interfejsu użytkownika

  • Te elementy interfejsu użytkownika obejmują podstawowe kontrolki, takie jak przyciski, które użytkownicy widzą na ekranie przez cały czas.
  • Domyślna wartość promienia używana dla tych elementów interfejsu użytkownika to 4px.

przycisk z zaokrąglonymi rogami wyróżnionymi

Sterowanie

  • Pole z sugestiami automatycznymi
  • Przyciski
    • Przyciski ContentDialog
  • Wybieracz daty z kalendarza
  • Pole wyboru
    • Pola wyboru do wielokrotnego zaznaczania w TreeView, GridView i ListView
  • Selektor kolorów
  • Pasek poleceń
  • Okno kombinowane
  • Selektor daty
  • Przycisk rozwijany
  • rozwieracz
  • Przerzuć widok
  • GridView i ListView
    • AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, TreeView lista
  • Pasek informacji
  • Kontrolki pisma odręcznego
  • Odtwarzanie multimediów
  • Pasek menu
  • Pole liczbowe
  • Pole hasła
  • RichEditBox (Pole Bogate Edycji)
  • SplitButton
  • Pole tekstowe
  • TimePicker (Selektor czasu)
  • Przycisk przełączający
  • Przycisk przełączania typu SplitButton

Narożniki elementów wysuwanych i nakładanych interfejsu użytkownika

  • Mogą to być przejściowe elementy interfejsu użytkownika, które są wyświetlane na ekranie tymczasowo, takie jak MenuFlyout, lub elementy nakładające inny interfejs użytkownika, takie jak karty TabView.
  • Domyślna wartość promienia, której używamy dla tych elementów interfejsu użytkownika, to 8px.

przykład wysuwany

Sterowanie

  • CommandBarWysuwane okno
  • ContentDialog (Zawartość)
  • Menu rozwijane
  • MenuWysuwane menu
  • zakładki TabView
  • Wskazówka edukacyjna
  • Podpowiedź (używa promienia 4px z i ze względu na mały rozmiar)
  • Część wysuwana (po otwarciu)
    • Pole z sugestiami automatycznymi
    • Wybieracz daty z kalendarza
    • Okno kombinowane
    • Selektor daty
    • Przycisk rozwijany
    • Kontrolka pisma odręcznego
    • Pasek menu
    • Pole liczbowe
    • SplitButton
    • TimePicker (Selektor czasu)
    • Przycisk przełączania typu SplitButton

Elementy paska narzędzi

  • Te elementy interfejsu użytkownika są kształtowane jak słupki lub linie; na przykład ProgressBar.
  • Domyślne wartości promienia, których używamy, to 4px.

przykład paska postępu

Sterowanie

  • Wskaźnik wyboru NavigationView
  • Pasek postępu
  • Pasek przewijania
  • Suwak
    • Suwak koloru colorPicker
    • Suwak paska wyszukiwania MediaTransportControls

Opcje dostosowywania

Domyślne wartości promieni rogów, które udostępniamy, nie są stałe i istnieje kilka sposobów, jak można łatwo zmodyfikować stopień zaokrąglenia rogów. Można to zrobić za pomocą dwóch zasobów globalnych lub bezpośrednio na kontrolce przy użyciu właściwości CornerRadius, w zależności od poziomu szczegółowości dostosowywania.

Kiedy nie należy zaokrąglać

Są przypadki, w których róg kontrolki nie powinien być zaokrąglany, i domyślnie ich nie zaokrąglamy.

  • Gdy wiele elementów interfejsu użytkownika, które znajdują się wewnątrz kontenera, dotykają siebie nawzajem, takie jak dwie części elementu SplitButton. Nie powinno być odstępu, kiedy się stykają.

Przycisk SplitButton (Przycisk podziału)

  • Gdy wysuwany element interfejsu użytkownika jest połączony z interfejsem użytkownika, który wywołuje wysuwane okno z jednej strony.

Zrzut ekranu przedstawiający wysuwaną sugestię automatyczną, w której niektóre narożniki nie są zaokrąglone.

Zmiany CornerRadius dla całej strony lub aplikacji

Istnieją 2 zasoby aplikacji kontrolujące promienie rogu wszystkich kontrolek:

  • ControlCornerRadius — wartość domyślna to 4px.
  • OverlayCornerRadius — wartość domyślna to 8 pikseli.

Jeśli zastąpisz wartość tych zasobów w dowolnym konkretnym zakresie, wpłynie to odpowiednio na wszystkie kontrolki w tym zakresie.

Oznacza to, że jeśli chcesz zmienić zaokrąglenie wszystkich kontrolek, w których można zastosować zaokrąglenie, możesz zdefiniować oba zasoby na poziomie aplikacji przy użyciu nowych wartości CornerRadius w następujący sposób:

<Application
    xmlns=”http://schemas.microsoft.com/winfx/2006/xamlpresentation”
    xmlns:x=”http://schemas.micosoft.com/winfx/2006/xaml”
    xmlns:control=”using:Microsoft.UI.Xaml.Controls”>
    <Application.Resources>
      <controls:XamlControlsResources>
        <controls:XamlControlsResources.MergedDictionaries>
          <ResourceDictionary>
            <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
            <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
          </ResourceDictionary>
        </controls:XamlControlsResources.MergedDictionaries>
      </controls:XamlControlsResources>
    </Application.Resources>
</Application>

Alternatywnie, jeśli chcesz zmienić zaokrąglenie wszystkich kontrolek w określonym zakresie, na przykład na poziomie strony lub kontenera, możesz postępować zgodnie z podobnym wzorcem:

<Grid>
    <Grid.Resources>
        <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
    </Grid.Resources>
    <Button Content="Button"/>
</Grid>

Uwaga / Notatka

Aby zasób OverlayCornerRadius został zastosowany, musi być zdefiniowany na poziomie aplikacji.

To dlatego, że okna podręczne i wysuwane nie znajdują się w drzewie wizualnym strony; są dodawane do korzenia wyskakujących okienek. System rozpoznawania zasobów nie przechodzi prawidłowo przez drzewo wizualne Popup Root do wizualnego drzewa strony.

Zmiany CornerRadius dla każdej kontrolki

Właściwość CornerRadius można zmodyfikować bezpośrednio, jeśli chcesz zmienić zaokrąglenie tylko wybranej liczby kontrolek.

Wartość domyślna Zmodyfikowano właściwość
DomyślnePole wyboru Pole wyboru niestandardowego
<CheckBox Content="Checkbox"/> <CheckBox Content="Checkbox" CornerRadius="5"/>

Nie wszystkie narożniki kontrolek będą reagować na modyfikowaną właściwość CornerRadius. Aby mieć pewność, że kontrolka, której narożniki chcesz zaokrąglić, rzeczywiście odpowie na jego właściwość CornerRadius zgodnie z oczekiwaniami, najpierw sprawdź, czy globalne zasoby ControlCornerRadius lub OverlayCornerRadius wpływają na tę kontrolkę. Jeśli tak nie jest, sprawdź, czy kontrolka, którą chcesz zaokrąglić, ma w ogóle rogi. Wiele naszych kontrolek nie renderuje rzeczywistych krawędzi i dlatego nie może odpowiednio korzystać z właściwości CornerRadius.

Oparcie niestandardowych stylów na WinUI

Style niestandardowe można opierać na stylach zaokrąglonych narożników WinUI, określając poprawny atrybut BasedOn w swoim stylu. Aby na przykład utworzyć niestandardowy styl przycisku na podstawie stylu przycisku WinUI, wykonaj następujące czynności:

<Style x:Key="MyCustomButtonStyle" BasedOn="{StaticResource DefaultButtonStyle}">
   ...
</Style>

Ogólnie rzecz biorąc, style kontrolek WinUI są zgodne ze spójną konwencją nazewnictwa: "DefaultXYZStyle", gdzie "XYZ" jest nazwą kontrolki. Aby uzyskać pełną dokumentację, możesz przeglądać pliki XAML w repozytorium WinUI.

  • Last updated on