Przegląd Malowanie jednolitymi kolorami i gradientami

W tym temacie opisano sposób używania obiektów , LinearGradientBrushi RadialGradientBrush do malowania za pomocą SolidColorBrushkolorów stałych, gradientów liniowych i gradientów promieniowych.

Malowanie obszaru z kolorem stałym

Jedną z najczęstszych operacji na dowolnej platformie jest malowanie obszaru z solidnym Colorelementem . Aby wykonać to zadanie, program Windows Presentation Foundation (WPF) udostępnia klasę SolidColorBrush . W poniższych sekcjach opisano różne sposoby malowania za pomocą metody SolidColorBrush.

Używanie narzędzia SolidColorBrush w języku "XAML"

Aby malować obszar o stałym kolorze w języku XAML, użyj jednej z następujących opcji.

• Wybierz wstępnie zdefiniowany pędzel z kolorem stałym według nazwy. Można na przykład ustawić przycisk Background na "Czerwony" lub "MediumBlue". Aby uzyskać listę innych wstępnie zdefiniowanych pędzli kolorów stałych, zobacz właściwości Brushes statyczne klasy. Poniżej przedstawiono przykład.

  <!-- This button's background is painted with a red SolidColorBrush,
       described using a named color. -->
  <Button Background="Red">A Button</Button>
  

• Wybierz kolor z 32-bitowej palety kolorów, określając ilości czerwonego, zielonego i niebieskiego, aby połączyć się w jeden jednolity kolor. Format określania koloru z palety 32-bitowej to "#rrggbb", gdzie rr to dwucyfrowa liczba szesnastkowa określająca względną ilość koloru czerwonego, gg określa ilość zielonego, a bb określa ilość niebieskiego. Ponadto kolor można określić jako "#aarrggbb", gdzie aa określa wartość alfa lub przezroczystość koloru. Takie podejście umożliwia tworzenie kolorów, które są częściowo przezroczyste. W poniższym przykładzie parametr Background elementu Button jest ustawiony na w pełni nieprzezroczystym kolorem czerwonym przy użyciu notacji szesnastkowej.

  <!-- This button's background is painted with a red SolidColorBrush,
       described using hexadecimal notation. -->
  <Button Background="#FFFF0000">A Button</Button>
  

• Użyj składni tagu właściwości, aby opisać SolidColorBrushelement . Ta składnia jest bardziej szczegółowa, ale umożliwia określenie dodatkowych ustawień, takich jak nieprzezroczystość pędzla. W poniższym przykładzie Background właściwości dwóch Button elementów są ustawione na w pełni nieprzezroczyste czerwone. Kolor pierwszego pędzla jest opisany przy użyciu wstępnie zdefiniowanej nazwy koloru. Kolor drugiego pędzla jest opisany przy użyciu notacji szesnastkowej.

  <!-- Both of these buttons' backgrounds are painted with red 
       SolidColorBrush objects, described using object element
       syntax. -->
  <Button>A Button
  
    <Button.Background>
      <SolidColorBrush Color="Red" />
    </Button.Background>
  </Button>
  
  <Button>A Button
  
    <Button.Background>
      <SolidColorBrush Color="#FFFF0000" />
    </Button.Background>
  </Button>  
  

Malowanie za pomocą narzędzia SolidColorBrush w kodzie

Aby malować obszar o stałym kolorze w kodzie, użyj jednej z następujących opcji.

• Użyj jednego ze wstępnie zdefiniowanych pędzli dostarczonych przez klasę Brushes . W poniższym przykładzie właściwość Background elementu Button jest ustawiona na Redwartość .

  Button myButton = new Button();
  myButton.Content = "A Button";
  myButton.Background = Brushes.Red;
  

• Utwórz obiekt SolidColorBrush i ustaw jego Color właściwość przy użyciu Color struktury. Możesz użyć wstępnie zdefiniowanego koloru z Colors klasy lub utworzyć element Color przy użyciu metody statycznej FromArgb .

  W poniższym przykładzie pokazano, jak ustawić Color właściwość SolidColorBrush przy użyciu wstępnie zdefiniowanego koloru.

  Button myButton = new Button();
  myButton.Content = "A Button";
  
  SolidColorBrush mySolidColorBrush = new SolidColorBrush();
  mySolidColorBrush.Color = Colors.Red;
  myButton.Background = mySolidColorBrush;
  

FromArgb Statyczne umożliwia określenie wartości alfa, czerwony, zielony i niebieski koloru. Typowy zakres dla każdej z tych wartości to 0–255. Na przykład wartość alfa 0 wskazuje, że kolor jest całkowicie przezroczysty, a wartość 255 wskazuje, że kolor jest całkowicie nieprzezroczysty. Podobnie czerwona wartość 0 wskazuje, że kolor nie ma w nim koloru czerwonego, podczas gdy wartość 255 wskazuje, że kolor ma maksymalną liczbę czerwieni. W poniższym przykładzie kolor pędzla został opisany przez określenie wartości alfa, czerwony, zielony i niebieski.

Button myButton = new Button();
myButton.Content = "A Button";

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color =
    Color.FromArgb(
        255, // Specifies the transparency of the color.
        255, // Specifies the amount of red.
        0, // specifies the amount of green.
        0); // Specifies the amount of blue.

myButton.Background = mySolidColorBrush;

Aby uzyskać dodatkowe sposoby określania Color koloru, zobacz temat referencyjny.

Malowanie obszaru z gradientem

Pędzl gradientowy maluje obszar z wieloma kolorami, które łączą się ze sobą na osi. Można ich używać do tworzenia wrażenia światła i cienia, dając kontrolkom trójwymiarowe wrażenie. Można ich również używać do symulowania szkła, chromu, wody i innych gładkich powierzchni. WPF udostępnia dwa typy pędzli gradientowych: LinearGradientBrush i RadialGradientBrush.

Gradienty liniowe

Obszar LinearGradientBrush jest malowany gradientem zdefiniowanym wzdłuż linii, osią gradientu. Kolory gradientu i ich położenie wzdłuż osi gradientu można określić przy użyciu GradientStop obiektów. Można również zmodyfikować oś gradientu, która umożliwia tworzenie gradientów poziomych i pionowych oraz odwrócenie kierunku gradientu. Oś gradientu jest opisana w następnej sekcji. Domyślnie jest tworzony gradient ukośny.

W poniższym przykładzie pokazano kod, który tworzy gradient liniowy z czterema kolorami.

<!-- 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" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.
LinearGradientBrush myLinearGradientBrush =
    new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

Ten kod tworzy następujący gradient:

Uwaga

Przykłady gradientów w tym temacie używają domyślnego systemu współrzędnych do ustawiania punktów początkowych i punktów końcowych. Domyślny układ współrzędnych jest względny względem pola ograniczenia: 0 wskazuje 0 procent pola ograniczenia, a 1 wskazuje 100 procent pola ograniczenia. Ten układ współrzędnych można zmienić, ustawiając MappingMode właściwość na wartość Absolute. Układ współrzędnych bezwzględnych nie jest powiązany z polem ograniczenia. Wartości są interpretowane bezpośrednio w przestrzeni lokalnej.

Jest GradientStop to podstawowy blok konstrukcyjny pędzla gradientowego. Przystanek gradientu określa Color element na Offset osi gradientu.

• Właściwość stopu Color gradientu określa kolor zatrzymania gradientu. Kolor można ustawić przy użyciu wstępnie zdefiniowanego koloru (dostarczonego przez klasę Colors ) lub przez określenie wartości ScRGB lub ARGB. W języku XAML można również użyć notacji szesnastkowej do opisania koloru. Aby uzyskać więcej informacji, zobacz Color strukturę.

• Właściwość stopa gradientu Offset określa położenie koloru stopu gradientu na osi gradientu. Przesunięcie to Double zakres od 0 do 1. Bliżej wartości przesunięcia zatrzymania gradientu wynosi 0, tym bliżej koloru jest początek gradientu. Im bliżej wartości przesunięcia gradientu jest wartość 1, tym bliżej koloru znajduje się na końcu gradientu.

Kolor każdego punktu między przystankami gradientu jest interpolowany liniowo jako kombinacja koloru określonego przez dwa stopnie gradientu ograniczenia. Poniższa ilustracja przedstawia zatrzymanie gradientu w poprzednim przykładzie. Okręgi oznaczają położenie zatrzymań gradientu, a linia przerywana pokazuje oś gradientu.

Pierwszy przystanek gradientu określa kolor żółty z przesunięciem 0.0wartości . Drugi przystanek gradientu określa kolor czerwony z przesunięciem 0.25wartości . Punkty między tymi dwoma przystankami stopniowo zmieniają się z żółtego na czerwony, gdy przechodzisz od lewej do prawej wzdłuż osi gradientu. Trzeci przystanek gradientu określa kolor niebieski z przesunięciem 0.75wartości . Punkty między drugim a trzecim gradientem stopniowo zmieniają się z czerwonego na niebieski. Czwarty przystanek gradientu określa kolor wapna zielony z przesunięciem 1.0wartości . Punkty między trzecim a czwartym gradientem stopniowo zmieniają się z niebieskiego na wapna zielony.

Oś gradientu

Jak wspomniano wcześniej, stopnie gradientu liniowego pędzla gradientowego są rozmieszczone wzdłuż linii, osi gradientu. Możesz zmienić orientację i rozmiar linii przy użyciu właściwości i EndPoint pędzlaStartPoint. Manipulując pędzlem StartPoint i EndPoint, można utworzyć gradienty poziome i pionowe, odwrócić kierunek gradientu, skondensować rozkład gradientu i nie tylko.

Domyślnie pędzle StartPoint gradientu liniowego i EndPoint są względem malowanego obszaru. Punkt (0,0) reprezentuje lewy górny róg malowanego obszaru, a (1,1) reprezentuje prawy dolny róg malowanego obszaru. Wartość domyślna elementu LinearGradientBrush to (0,0), a jego wartość domyślna EndPoint StartPoint to (1,1), która tworzy gradient ukośny rozpoczynający się od lewego górnego rogu i rozciągając się na prawy dolny róg malowanego obszaru. Na poniższej ilustracji przedstawiono oś gradientu liniowego pędzla gradientowego z wartościami domyślnymi StartPoint i EndPoint.

W poniższym przykładzie pokazano, jak utworzyć gradient poziomy, określając wartości pędzla StartPoint i EndPoint. Zwróć uwagę, że gradient zatrzymuje się tak samo jak w poprzednich przykładach; po prostu zmieniając StartPoint wartości i EndPoint, gradient został zmieniony z ukośnej na poziomą.

<!-- This rectangle is painted with a horizontal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle horizontalFillRectangle = new Rectangle();
horizontalFillRectangle.Width = 200;
horizontalFillRectangle.Height = 100;

// Create a horizontal linear gradient with four stops.
LinearGradientBrush myHorizontalGradient =
    new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0,0.5);
myHorizontalGradient.EndPoint = new Point(1,0.5);
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myHorizontalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
horizontalFillRectangle.Fill = myHorizontalGradient;

Na poniższej ilustracji przedstawiono utworzony gradient. Oś gradientu jest oznaczona linią przerywaną, a przystanki gradientu są oznaczone okręgami.

W następnym przykładzie pokazano, jak utworzyć gradient pionowy.

<!-- This rectangle is painted with a vertical gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Rectangle verticalFillRectangle = new Rectangle();
verticalFillRectangle.Width = 200;
verticalFillRectangle.Height = 100;

// Create a vertical linear gradient with four stops.
LinearGradientBrush myVerticalGradient =
    new LinearGradientBrush();
myVerticalGradient.StartPoint = new Point(0.5,0);
myVerticalGradient.EndPoint = new Point(0.5,1);
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myVerticalGradient.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
verticalFillRectangle.Fill = myVerticalGradient;

Na poniższej ilustracji przedstawiono utworzony gradient. Oś gradientu jest oznaczona linią przerywaną, a przystanki gradientu są oznaczone okręgami.

Gradienty promieniowe

Podobnie jak w przypadku elementu LinearGradientBrush, RadialGradientBrush obszar jest malowany kolorami, które łączą się ze sobą wzdłuż osi. W poprzednich przykładach pokazano, jak oś pędzla gradientu liniowego jest linią prostą. Oś pędzla gradientu promieniowego jest definiowana przez okrąg; jego kolory "promieniują" na zewnątrz od jego pochodzenia.

W poniższym przykładzie do malowania wnętrza prostokąta służy szczotka gradientowa promieniowa.

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <RadialGradientBrush 
      GradientOrigin="0.5,0.5" Center="0.5,0.5" 
      RadiusX="0.5" RadiusY="0.5">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

RadialGradientBrush myRadialGradientBrush = new RadialGradientBrush();
myRadialGradientBrush.GradientOrigin = new Point(0.5,0.5);
myRadialGradientBrush.Center = new Point(0.5,0.5);
myRadialGradientBrush.RadiusX = 0.5;
myRadialGradientBrush.RadiusY = 0.5;
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Yellow, 0.0));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Red, 0.25));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.Blue, 0.75));
myRadialGradientBrush.GradientStops.Add(
    new GradientStop(Colors.LimeGreen, 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 100;
myRectangle.Fill = myRadialGradientBrush;

Na poniższej ilustracji przedstawiono gradient utworzony w poprzednim przykładzie. Gradient pędzla został wyróżniony. Zwróć uwagę, że mimo że wyniki są inne, gradient zatrzymuje się w tym przykładzie tak samo jak w przypadku zatrzymań gradientu w poprzednich przykładach pędzla gradientu liniowego.

Parametr GradientOrigin określa punkt początkowy osi gradientu promieniowego pędzla gradientowego. Oś gradientu promieniuje od źródła gradientu do okręgu gradientu. Okrąg gradientu pędzla jest definiowany przez jego Centerwłaściwości , RadiusXi RadiusY .

Na poniższej ilustracji przedstawiono kilka gradientów promieniowych z różnymi GradientOriginustawieniami , Center, RadiusXi RadiusY .

RadialGradientBrushes z różnymi ustawieniami GradientOrigin, Center, RadiusX i RadiusY.

Określanie przezroczystych lub częściowo przezroczystych zatrzymań gradientu

Ponieważ zatrzymanie gradientu nie zapewnia właściwości nieprzezroczystości, należy określić kanał alfa kolorów przy użyciu notacji szesnastkowej ARGB w adiustacji lub użyć Color.FromScRgb metody , aby utworzyć przystanki gradientu, które są przezroczyste lub częściowo przezroczyste. W poniższych sekcjach opisano sposób tworzenia częściowo przezroczystego gradientu zatrzymanego w języku XAML i kodzie.

Określanie nieprzezroczystości kolorów w języku "XAML"

W języku XAML używasz notacji szesnastkowej ARGB, aby określić nieprzezroczystość poszczególnych kolorów. Notacja szesnastkowa ARGB używa następującej składni:

#Aa rrggbb

Wartość aa w poprzednim wierszu reprezentuje dwucyfrową wartość szesnastkową używaną do określenia nieprzezroczystości koloru. Każda wartość szesnastkowa rr, gg i bb reprezentują dwie cyfry szesnastkowe używane do określania ilości koloru czerwonego, zielonego i niebieskiego. Każda cyfra szesnastkowa może mieć wartość z zakresu od 0 do 9 lub A-F. 0 jest najmniejszą wartością, a F jest największa. Wartość alfa 00 określa kolor całkowicie przezroczysty, podczas gdy wartość alfa FF tworzy kolor, który jest w pełni nieprzezroczysty. W poniższym przykładzie szesnastkowa notacja ARGB służy do określania dwóch kolorów. Pierwszy jest częściowo przezroczysty (ma wartość alfa x20), podczas gdy drugi jest całkowicie nieprzezroczysty.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0">

      <!-- This gradient stop is partially transparent. -->
      <GradientStop Color="#200000FF" Offset="0.0" />

      <!-- This gradient stop is fully opaque. -->
      <GradientStop Color="#FF0000FF" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Określanie nieprzezroczystości kolorów w kodzie

W przypadku korzystania z kodu metoda statyczna FromArgb umożliwia określenie wartości alfa podczas tworzenia koloru. Metoda przyjmuje cztery parametry typu Byte. Pierwszy parametr określa kanał alfa koloru; pozostałe trzy parametry określają czerwone, zielone i niebieskie wartości koloru. Każda wartość powinna należeć do przedziału od 0 do 255 włącznie. Wartość alfa 0 określa, że kolor jest całkowicie przezroczysty, podczas gdy wartość alfa 255 określa, że kolor jest całkowicie nieprzezroczysty. W poniższym przykładzie FromArgb metoda jest używana do tworzenia dwóch kolorów. Pierwszy kolor jest częściowo przezroczysty (ma wartość alfa 32), a drugi jest w pełni nieprzezroczysty.

LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();

// This gradient stop is partially transparent.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(32, 0, 0, 255), 0.0));

// This gradient stop is fully opaque.
myLinearGradientBrush.GradientStops.Add(
    new GradientStop(Color.FromArgb(255, 0, 0, 255), 1.0));

Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = myLinearGradientBrush;

Alternatywnie możesz użyć FromScRgb metody , która umożliwia użycie wartości ScRGB do utworzenia koloru.

Malowanie przy użyciu obrazów, rysunków, wizualizacji i wzorców

ImageBrushklasy , DrawingBrushi VisualBrush umożliwiają malowanie obszaru obrazami, rysunkami lub wizualizacjami. Aby uzyskać informacje o malowaniu obrazami, rysunkami i wzorami, zobacz Malowanie przy użyciu obrazów, rysunków i wizualizacji.

Zobacz też

• Brush
• SolidColorBrush
• LinearGradientBrush
• RadialGradientBrush
• Malowanie przy użyciu obrazów, rysowania i wizualizacji
• Przekształcanie pędzla — przegląd
• Warstwy renderowania grafiki