Szczotki gradientowe promieniowe

Przeglądanie przykładu

Klasa interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) RadialGradientBrush pochodzi z GradientBrush klasy i maluje obszar z gradientem promieniowym, który łączy dwa lub więcej kolorów w kółko. GradientStop obiekty służą do określania kolorów w gradientzie i ich położeniach. Aby uzyskać więcej informacji na temat GradientStop obiektów, zobacz Gradienty.

Klasa RadialGradientBrush definiuje następujące właściwości:

• Center, typu Point, który reprezentuje punkt środkowy okręgu dla gradientu promieniowego. Wartość domyślna tej właściwości to (0.5,0.5).
• Radius, typu double, który reprezentuje promień okręgu dla gradientu promieniowego. Wartość domyślna tej właściwości to 0,5.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Klasa RadialGradientBrush ma również metodę, która zwraca wartość reprezentującą IsEmpty bool , czy szczotka została przypisana do jakichkolwiek GradientStop obiektów.

Uwaga

Gradienty promieniowe można również tworzyć za pomocą radial-gradient() funkcji CSS.

Tworzenie narzędzia RadialGradientBrush

Stopnie gradientu pędzla promieniowego są ustawiane wzdłuż osi gradientu zdefiniowanej przez okrąg. Oś gradientu promieniuje od środka okręgu do obwodu. Położenie i rozmiar okręgu można zmienić przy użyciu właściwości i Radius pędzlaCenter. Okrąg definiuje punkt końcowy gradientu. W związku z tym gradient zatrzymany o wartości 1,0 definiuje kolor na obwodzie okręgu. Gradient zatrzymany o wartości 0,0 definiuje kolor w środku okręgu.

Aby utworzyć gradient promieniowy, utwórz RadialGradientBrush obiekt i ustaw jego Center właściwości i Radius . Następnie dodaj do kolekcji co najmniej GradientStop dwa obiekty RadialGradientBrush.GradientStops , które określają kolory w gradientzie i ich położeniach.

W poniższym przykładzie XAML pokazano RadialGradientBrush , że element jest ustawiony jako Background element Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- Center defaults to (0.5,0.5)
             Radius defaults to (0.5) -->
        <RadialGradientBrush>
            <GradientStop Color="Red"
                          Offset="0.1" />
            <GradientStop Color="DarkBlue"
                          Offset="1.0" />
        </RadialGradientBrush>
    </Frame.Background>
</Frame>

W tym przykładzie tło obiektu Frame jest malowane za pomocą RadialGradientBrush interpolacji z czerwonego na ciemnoniebieski. Środek gradientu promieniowego znajduje się w środku Frameobiektu :

Poniższy przykład XAML przenosi środek gradientu promieniowego do lewego górnego rogu obiektu Frame:

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="0.0,0.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>

W tym przykładzie tło obiektu Frame jest malowane za pomocą RadialGradientBrush interpolacji z czerwonego na ciemnoniebieski. Środek gradientu promieniowego znajduje się w lewym górnym rogu obiektu Frame:

Poniższy przykład XAML przenosi środek gradientu promieniowego do prawego dolnego rogu obiektu Frame:

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="1.0,1.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>            

W tym przykładzie tło obiektu Frame jest malowane za pomocą RadialGradientBrush interpolacji z czerwonego na ciemnoniebieski. Środek gradientu promieniowego znajduje się w prawym dolnym rogu Frameobiektu :