Używanie pędzli do malowania tła, pierwszego planu i konturów

Użyj obiektów Brush do malowania wnętrz i konturów kształtów XAML, tekstu i kontrolek, aby były widoczne w interfejsie użytkownika Twojej aplikacji.

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Wprowadzenie do pędzli

Aby pomalować kształt lub części kontrolki wyświetlanej na kanwie aplikacji, ustaw właściwość wypełnienia dla kształtu lub właściwości tła i pierwszego planu kontrolki na wartość pędzla .

Różne typy pędzli to:

• pędzel akrylowy
• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• ImageBrush
• XamlCompositionBrushBase

Szczotki z kolorami stałymi

SolidColorBrush maluje obszar z jednym Color, takim jak czerwony lub niebieski. Jest to najbardziej podstawowa szczotka. W języku XAML istnieją trzy sposoby definiowania SolidColorBrush i koloru, który określa: predefiniowane nazwy kolorów, szesnastkowe wartości kolorów lub składnia elementu właściwości.

Wstępnie zdefiniowane nazwy kolorów

Możesz użyć wstępnie zdefiniowanej nazwy koloru, takiej jak Żółty lub Magenta. Dostępnych jest 256 nazwanych kolorów. Analizator XAML konwertuje nazwę koloru na strukturę Color z poprawnymi kanałami kolorów. 256 nazwanych kolorów jest opartych na X11 nazwy kolorów z kaskadowych arkuszy stylów, specyfikacji poziomu 3 (CSS3), więc możesz już zapoznać się z tą listą nazwanych kolorów, jeśli masz doświadczenie z tworzeniem lub projektowaniem w Internecie.

Oto przykład ustawiający właściwość wypełnienia prostokąta na wstępnie zdefiniowany kolor Czerwony.

<Rectangle Width="100" Height="100" Fill="Red" />

SolidColorBrush zastosowany do prostokąta

Jeśli definiujesz solidColorBrush przy użyciu kodu, a nie XAML, każdy nazwany kolor jest dostępny jako statyczna wartość właściwości klasy Colors . Aby na przykład zadeklarować wartość Color dla SolidColorBrush reprezentującą nazwany kolor "Orchid", ustaw wartość Color na wartość statyczną Colors.Orchid.

Szesnastkowe wartości kolorów

Możesz użyć ciągu formatu szesnastkowego do zadeklarowania precyzyjnych 24-bitowych wartości kolorów z 8-bitowym kanałem alfa dla SolidColorBrush. Dwa znaki w zakresie od 0 do F definiują każdą wartość składnika, a kolejność wartości składnika ciągu szesnastkowego to: kanał alfa (nieprzezroczystość), czerwony kanał, zielony kanał i niebieski kanał (ARGB). Na przykład wartość szesnastkowa "#FFFF0000" definiuje w pełni nieprzezroczystą czerwoną (alpha="FF", red="FF", green="00" i blue="00").

W tym przykładzie XAML ustawiono właściwość Fill prostokąta na wartość szesnastkową "#FFFF0000" i daje identyczny wynik użycia nazwanego koloru Colors.Red.

<StackPanel>
  <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

Składnia elementu właściwości

Składnia elementu właściwości umożliwia zdefiniowanie SolidColorBrush. Ta składnia jest bardziej szczegółowa niż poprzednie metody, ale można określić dodatkowe wartości właściwości dla elementu, takiego jak nieprzezroczystość. Aby uzyskać więcej informacji na temat składni XAML, w tym składni elementu właściwości, zobacz przegląd XAML i przewodnik po składni XAML .

W poprzednich przykładach tworzony pędzel jest tworzony niejawnie i automatycznie, jako część zamierzonej składni skrótowej języka XAML, co pomaga uprościć definicje interfejsu użytkownika w najbardziej typowych przypadkach. W następnym przykładzie utworzono Prostokąt i jawnie utworzono SolidColorBrush jako wartość elementu dla właściwości Rectangle.Fill. KolorSolidColorBrush jest ustawiony na niebieski, a nieprzezroczystość jest ustawiona na 0.5.

<Rectangle Width="200" Height="150">
    <Rectangle.Fill>
        <SolidColorBrush Color="Blue" Opacity="0.5" />
    </Rectangle.Fill>
</Rectangle>

Pędzle gradientu liniowego

LinearGradientBrush maluje obszar gradientem zdefiniowanym wzdłuż linii. Ta linia jest nazywana osią gradientu. Kolory gradientu i ich lokalizacje wzdłuż osi gradientu można określić przy użyciu obiektów GradientStop . Domyślnie oś gradientu przebiega z lewego górnego rogu do prawego dolnego rogu obszaru malowanego pędzlem, wynikiem jest cieniowanie ukośne.

GradientStop jest podstawowym elementem konstrukcyjnym pędzla gradientowego. Stop gradientu określa, jaki Color pędzla znajduje się na Przesunięcie wzdłuż osi gradientu, gdy szczotka jest stosowana do malowanego obszaru.

Właściwość koloru punktu gradientu określa jego kolor. Kolor można ustawić przy użyciu wstępnie zdefiniowanej nazwy koloru lub określając wartości szesnastkowe ARGB .

Właściwość OffsetGradientStop określa położenie każdego GradientStop wzdłuż osi gradientu. Przesunięcie to podwójna, która waha się od 0 do 1. Przesunięcie 0 umieszcza GradientStop na początku osi gradientu, czyli w pobliżu StartPoint. Przesunięcie o 1 umieszcza GradientStop na EndPoint. Co najmniej przydatna LinearGradientBrush powinna mieć dwie wartości GradientStop, gdzie każda GradientStop powinna określać inny kolor i mieć inne przesunięcie z zakresu od 0 do 1.

W tym przykładzie tworzony jest gradient liniowy z czterech kolorów, który służy do malowania prostokąta .

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" x:Name="GradientStop1"/>
            <GradientStop Color="Red" Offset="0.25" x:Name="GradientStop2"/>
            <GradientStop Color="Blue" Offset="0.75" x:Name="GradientStop3"/>
            <GradientStop Color="LimeGreen" Offset="1.0" x:Name="GradientStop4"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Kolor każdego punktu między stopniami gradientu jest liniowo interpolowany jako kombinacja koloru określonego przez dwa ograniczające stopnie gradientu. Na poniższym obrazie zaznaczono punkty gradientu w poprzednim przykładzie. Okręgi oznaczają położenie punktów kontrolnych gradientu, a linia przerywana pokazuje oś gradientu.

Kombinacja kolorów określona przez dwa końcowe punkty gradientu

Możesz zmienić położenie punktów zatrzymania gradientu, ustawiając właściwości StartPoint i EndPoint na inne wartości niż początkowe wartości domyślne (0,0) i (1,1). Zmieniając wartości współrzędnych StartPoint i EndPoint, można tworzyć gradienty poziome lub pionowe, odwracać kierunek gradientu lub zawęzić rozkład gradientu, aby zastosować go na mniejszej powierzchni niż cały malowany obszar. Aby skondensować gradient, należy ustawić wartości StartPoint i/lub EndPoint tak, aby znajdowały się między wartościami 0 a 1. Na przykład, jeśli chcesz gradient poziomy, w którym wszystkie rozjaśnienia następują na lewej połowie pędzla, a prawa strona pozostaje jednolita do ostatniego koloru GradientStop, należy określić StartPoint o wartości (0,0) i EndPoint o wartości (0.5,0).

Szczotki gradientowe promieniowe

pędzlem gradientu promieniowego jest rysowany w elipsie zdefiniowanej przez środek, promień X , i promień Y . Kolory gradientu zaczynają się w środku wielokropka i kończą się promieniem.

Kolory gradientu promieniowego są definiowane przez punkty kolorów dodane do właściwości kolekcji GradientStops. Każdy punkt gradientu określa kolor i przesunięcie wzdłuż gradientu.

Źródło gradientu jest domyślnie wyśrodkowane i można je zrównoważyć za pomocą właściwości GradientOrigin .

MappingMode określa, czy środkowe, RadiusX, RadiusY i GradientOrigin reprezentują współrzędne względne lub bezwzględne.

Gdy MapMode jest ustawiony na RelativeToBoundingBox, wartości X i Y tych właściwości są traktowane względem granic elementu, gdzie (0,0) reprezentuje lewy górny i (1,1) prawy dolny róg granic elementu, w przypadku właściwości Center, RadiusX, i RadiusY, a (0,0) wskazuje środek dla właściwości GradientOrigin.

Gdy parametr MappingMode jest ustawiony na Absolutewartość , wartości X i Y trzech właściwości są traktowane jako współrzędne bezwzględne w granicach elementu.

W tym przykładzie tworzony jest gradient liniowy z czterech kolorów, który służy do malowania prostokąta .

<!-- This rectangle is painted with a radial gradient. -->
<Rectangle Width="200" Height="200">
    <Rectangle.Fill>
        <media:RadialGradientBrush>
            <GradientStop Color="Blue" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.2" />
            <GradientStop Color="LimeGreen" Offset="0.4" />
            <GradientStop Color="LightBlue" Offset="0.6" />
            <GradientStop Color="Blue" Offset="0.8" />
            <GradientStop Color="LightGray" Offset="1" />
        </media:RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

Kolor każdego punktu pomiędzy punktami granicznymi gradientu jest określany promieniowo jako kombinacja kolorów zdefiniowanych przez dwa punkty graniczne gradientu. Na poniższym obrazie zaznaczono punkty gradientu w poprzednim przykładzie.

Przystanki gradientu

Pędzle obrazów

ImageBrush maluje obszar obrazem pochodzącym ze źródła pliku obrazu. Należy ustawić właściwość ImageSource, podając ścieżkę do obrazu, który ma zostać załadowany. Zazwyczaj źródło obrazu pochodzi z elementu Zawartość , który jest częścią zasobów aplikacji.

Domyślnie ImageBrush rozciąga obraz, aby całkowicie wypełnić malowany obszar, co może prowadzić do zniekształceń, jeśli namalowany obszar ma inny współczynnik proporcji niż obraz. To zachowanie można zmienić, zmieniając właściwość Stretch na wartość domyślną Fill i ustawiając ją jako None, Uniform lub UniformToFill.

Następny przykład tworzy ImageBrush i ustawia ImageSource na obraz o nazwie licorice.jpg, który należy uwzględnić jako zasób w aplikacji. ImageBrush następnie maluje obszar zdefiniowany przez kształt elipsy .

<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

Renderowany pędzel graficzny

Pliki ImageBrush i Image odwołują się do pliku źródłowego obrazu według identyfikatora URI (Uniform Resource Identifier), w którym ten plik źródłowy obrazu używa kilku możliwych formatów obrazów. Pliki źródłowe obrazów są określane w postaci URI. Aby uzyskać więcej informacji na temat określania źródeł obrazów, używanych formatów obrazów oraz ich pakowania w aplikacji, zobacz Image i ImageBrush.

Pędzle i tekst

Można również użyć pędzli, aby zastosować cechy renderowania do elementów tekstowych. Na przykład właściwość Foreground elementu TextBlock przyjmuje Brush. Do tekstu można zastosować dowolne pędzle opisane tutaj. Należy jednak zachować ostrożność przy zastosowaniu pędzli do tekstu, ponieważ każde tło może sprawić, że tekst będzie nieczytelny, jeśli używasz pędzli, które rozlewają się na tło. Użyj narzędzia SolidColorBrush w celu czytelności elementów tekstowych w większości przypadków, chyba że chcesz, aby element tekstowy był w większości dekoracyjny.

Nawet jeśli używasz koloru stałego, upewnij się, że wybrany kolor tekstu ma wystarczający kontrast względem koloru tła kontenera układu tekstu. Poziom kontrastu między pierwszym planem tekstu a tłem kontenera tekstu jest kwestią ułatwień dostępu.

XamlCompositionBrushBase

XamlCompositionBrushBase jest klasą bazową używaną do tworzenia niestandardowych pędzli, które korzystają z CompositionBrush do malowania elementów interfejsu użytkownika XAML.

Umożliwia to „drop down” współdziałanie między warstwami Windows.UI.Xaml i Windows.UI.Composition, zgodnie z opisem w omówieniu warstwy wizualnej.

Aby utworzyć niestandardowy pędzel, utwórz nową klasę, która dziedziczy z klasy XamlCompositionBrushBase i implementuje wymagane metody.

Można na przykład zastosować efekty do elementów XAML UIElement przy użyciu CompositionEffectBrush, takich jak GaussianBlurEffect lub SceneLightingEffect, które kontrolują właściwości refleksyjne elementu XAML UIElement, gdy jest oświetlany przez XamlLight.

Aby zapoznać się z przykładami kodu, zobacz XamlCompositionBrushBase.

Pędzle jako zasoby XAML

W słowniku zasobów XAML można zadeklarować dowolny pędzl, który ma być kluczem zasobu XAML. Dzięki temu można łatwo replikować te same wartości pędzla jak te zastosowane do wielu elementów w interfejsie użytkownika. Wartości pędzla są następnie udostępniane i stosowane w każdym przypadku, gdy odwołujesz się do zasobu pędzla w języku XAML jako {StaticResource}. Obejmuje to przypadki, w których masz szablon kontrolki XAML, który odwołuje się do współdzielonego pędzla, a sam szablon kontrolki jest zasobem XAML z kluczem.

Pędzle w kodzie

Znacznie bardziej typowe jest określenie pędzli przy użyciu języka XAML niż używanie kodu do definiowania pędzli. Dzieje się tak dlatego, że pędzle są zwykle definiowane jako zasoby XAML, a wartości pędzli są często danymi wyjściowymi narzędzi projektowych lub w inny sposób w ramach definicji interfejsu użytkownika XAML. Mimo to, w przypadku, gdy można zdefiniować pędzel za pomocą kodu, wszystkie typy pędzla są dostępne do tworzenia instancji.

Aby utworzyć plik SolidColorBrush w kodzie, użyj konstruktora, który przyjmuje parametr Color . Przekaż wartość, która jest właściwością statyczną klasy Colors , w następujący sposób:

SolidColorBrush blueBrush = new SolidColorBrush(Colors.Blue);

Microsoft::UI::Xaml::Media::SolidColorBrush blueBrush{ Microsoft::UI::Colors::Blue() };

W przypadku narzędzia ImageBrush użyj konstruktora domyślnego, a następnie wywołaj inne interfejsy API przed podjęciem próby użycia tego pędzla dla właściwości interfejsu użytkownika.

ImageSource wymaga BitmapImage (a nie identyfikatora URI), gdy definiujesz ImageBrush przy użyciu kodu. Jeśli źródło jest strumieniem, użyj metody SetSourceAsync, aby zainicjować wartość. Jeśli źródłem jest identyfikator URI, który zawiera zawartość w aplikacji używającej schematów ms-appx lub ms-resource, użyj konstruktora BitmapImage, który przyjmuje identyfikator URI. Możesz również rozważyć obsługę zdarzenia ImageOpened , jeśli występują problemy z chronometrażem podczas pobierania lub dekodowania źródła obrazu, gdzie może być potrzebna zawartość alternatywna do wyświetlenia do momentu udostępnienia źródła obrazu.

Aby zapoznać się z przykładami kodu, zobacz ImageBrush i XamlCompositionBrushBase.

UwP i WinUI 2

Interfejsy API Brush występują w przestrzeniach nazw Windows.UI.Xaml.Controls i Windows.UI.Xaml.Controls.

Zalecamy użycie najnowszego interfejsu WinUI 2 , aby uzyskać najbardziej aktualne style, szablony i funkcje dla wszystkich kontrolek.

WebViewBrush (tylko platforma UWP)

WebViewBrush to specjalny typ pędzla, który może uzyskiwać dostęp do zawartości zwykle widocznej w kontrolce WebView. Zamiast wyświetlać zawartość w prostokątnym obszarze sterowania WebView, WebViewBrush maluje tę zawartość na innym elemencie, który ma typ właściwości Brushdla powierzchni renderowania. WebViewBrush nie jest odpowiednia dla każdego zastosowania, ale przydaje się podczas przejść WebView. Aby uzyskać więcej informacji, zobacz WebViewBrush.

Jeśli utworzysz element WebViewBrush w kodzie, użyj konstruktora domyślnego, a następnie wywołaj inne interfejsy API przed podjęciem próby użycia tego pędzla dla właściwości interfejsu użytkownika. Jeśli niedawno zresetowano właściwość SourceName lub zmieniono zawartość WebView za pomocą kodu, możesz potrzebować wywołać funkcję Redraw.

Przykłady kodu można znaleźć w temacie WebViewBrush.