Dela via

Översikt över målning med enkelfärger och gradients

I det här avsnittet beskrivs hur du använder SolidColorBrush, LinearGradientBrushoch RadialGradientBrush objekt för att måla med fasta färger, linjära toningar och radiella toningar.

Måla ett område med en solid färg

En av de vanligaste åtgärderna på alla plattformar är att måla ett område med en solid färg med koden Color. För att utföra den här uppgiften tillhandahåller Windows Presentation Foundation (WPF) klassen SolidColorBrush. I följande avsnitt beskrivs de olika sätten att måla med en SolidColorBrush.

Använda en SolidColorBrush i "XAML"

Om du vill måla ett område med en fast färg i XAML använder du något av följande alternativ.

  • Välj en fördefinierad pensel med en fast färg efter namn. Du kan till exempel ange en knapps Background till "Red" eller "MediumBlue". En lista över andra fördefinierade penslar med en fast färg finns i statiska egenskaper för klassen Brushes. Följande är ett exempel.

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

  • Välj en färg från 32-bitars färgpaletten genom att ange mängden rött, grönt och blått för att kombinera till en enda helfärg. Formatet för att ange en färg från 32-bitarspaletten är "#rrggbb", där rr är ett tvåsiffrigt hexadecimalt tal som anger den relativa mängden rött, gg anger mängden grönt och bb anger mängden blått. Dessutom kan färgen anges som "#aarrggbb" där aa anger alfa--värdet eller transparensen för färgen. Med den här metoden kan du skapa färger som är delvis transparenta. I följande exempel är Background för en Button inställd på helt ogenomskinlig röd med hexadecimal notation.

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

  • Använd syntaxen för egenskapstagg för att beskriva en SolidColorBrush. Den här syntaxen är mer utförlig men gör att du kan ange ytterligare inställningar, till exempel penselns opacitet. I följande exempel är de Background egenskaperna för två Button element inställda på helt ogenomskinlig röd. Den första penselns färg beskrivs med ett fördefinierat färgnamn. Den andra penselns färg beskrivs med hexadecimal notation.

    <!-- 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>

Måla med SolidColorBrush med kod

Om du vill måla ett område med en fast färg i kod använder du något av följande alternativ.

  • Använd en av de fördefinierade penslar som tillhandahålls av klassen Brushes. I följande exempel är Background för en Button inställd på Red.

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

  • Skapa en SolidColorBrush och ange dess egenskap Color med hjälp av en Color struktur. Du kan använda en fördefinierad färg från klassen Colors eller skapa en Color med hjälp av metoden static FromArgb.

    I följande exempel visas hur du anger egenskapen Color för en SolidColorBrush med hjälp av en fördefinierad färg.

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

SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Red;
myButton.Background = mySolidColorBrush;

Med den statiska FromArgb kan du ange färgens alfa-, röd-, grön- och blå-värden. Det typiska intervallet för vart och ett av dessa värden är 0–255. Ett alfavärde på 0 indikerar till exempel att en färg är helt transparent, medan värdet 255 indikerar att färgen är helt ogenomskinlig. På samma sätt anger ett rött värde på 0 att en färg inte har någon röd färg, medan ett värde på 255 indikerar att en färg har den maximala mängden rött som möjligt. I följande exempel beskrivs en pensels färg genom att ange alfa-, röd-, grön- och blå-värden.

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;

Fler sätt att ange färg finns i referensavsnittet Color.

Måla ett område med en färgövergång

En toningsborste målar ett område med flera färger som smälter in i varandra längs en axel. Du kan använda dem för att skapa intryck av ljus och skugga, vilket ger dina kontroller en tredimensionell känsla. Du kan också använda dem för att simulera glas, krom, vatten och andra släta ytor. WPF innehåller två typer av gradientpenslar: LinearGradientBrush och RadialGradientBrush.

Linjära toningar

En LinearGradientBrush målar ett område med en toning definierad längs en linje, toningsaxeln . Du anger toningens färger och deras plats längs toningsaxeln med hjälp av GradientStop objekt. Du kan också ändra toningsaxeln, vilket gör att du kan skapa vågräta och lodräta toningar och vända toningsriktningen. Toningsaxeln beskrivs i nästa avsnitt. Som standardinställning skapas en diagonal gradient.

I följande exempel visas koden som skapar en linjär toning med fyra färger.

<!-- 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;

Den här koden genererar följande toning:

En diagonal linjär toning

Anmärkning

I det här avsnittets toningsexempel används standardkoordinatsystemet för att ange start- och slutpunkter. Standardkoordinatsystemet är relativt till en avgränsningsruta: 0 anger 0 procent av avgränsningsrutan och 1 anger 100 procent av avgränsningsrutan. Du kan ändra det här koordinatsystemet genom att ange egenskapen MappingMode till värdet Absolute. Ett absolut koordinatsystem är inte beroende av en avgränsningsruta. Värden tolkas direkt i det lokala utrymmet.

Det GradientStop är den grundläggande byggstenen i en övertoningspensel. Ett toningsstopp anger en Color vid en Offset längs toningsaxeln.

  • Toningsstoppets egenskap Color anger toningsstoppets färg. Du kan ange färgen med hjälp av en fördefinierad färg (tillhandahålls av klassen Colors) eller genom att ange ScRGB- eller ARGB-värden. I XAML kan du också använda hexadecimal notation för att beskriva en färg. För mer information, se Color-strukturen.

  • Toningsstoppets egenskap Offset anger positionen för toningsstoppets färg på toningsaxeln. Förskjutningen är en Double som varierar från 0 till 1. Ju närmare ett toningsstopps förskjutningsvärde är 0, desto närmare är färgen i början av toningen. Ju närmare toningens förskjutningsvärde är 1, desto närmare är färgen i slutet av toningen.

Färgen på varje punkt mellan gradienstopp interpoleras linjärt som en kombination av färgerna som anges av de två intilliggande gradienstoppen. Följande illustration visar tonsteg i det föregående exemplet. Cirklarna markerar läget för toningsstopp och en streckad linje visar toningsaxeln.

gradientstopp i en linjär gradient

Det första toningsstoppet anger färgen gul vid en förskjutning av 0.0. Det andra toningsstoppet anger färgen röd vid en förskjutning av 0.25. Punkterna mellan dessa två stopp ändras gradvis från gult till rött när du går från vänster till höger längs toningsaxeln. Det tredje toningsstoppet anger färgen blå vid en förskjutning av 0.75. Punkterna mellan den andra och tredje gradientstoppet förändras gradvis från rött till blått. Det fjärde färgstoppet anger färgen limegrön med en avståndsposition på 1.0. Punkterna mellan det tredje och fjärde gradientstoppet ändras gradvis från blått till limegrönt.

Toningsaxeln

Som tidigare nämnts, är toningsstoppen för en linjär toningspensel placerade på en linje, toningsaxeln. Du kan ändra linjens orientering och storlek med hjälp av penselns StartPoint och EndPoint egenskaper. Genom att ändra penselns StartPoint och EndPointkan du skapa vågräta och lodräta toningar, vända toningsriktningen, kondensera toningsspridningen med mera.

Som standardinställning är den linjära gradientborstens StartPoint och EndPoint relativt det område som målas. Punkten (0,0) representerar det övre vänstra hörnet av området som målas och (1,1) representerar det nedre högra hörnet av området som målas. Standardvärdet för StartPoint hos en LinearGradientBrush är (0,0) och standardvärdet för dess EndPoint är (1,1), vilket skapar en diagonal toning som börjar i det övre vänstra hörnet och sträcker sig till det nedre högra hörnet av målningsområdet. Följande illustration visar axeln för en linjär övertoningspensel med standardvärdena StartPoint och EndPoint.

gradientaxel för en diagonal linjär toning

I följande exempel visas hur du skapar en vågrät toning genom att ange penselns StartPoint och EndPoint. Observera att toningsstoppen är desamma som i föregående exempel. genom att helt enkelt ändra StartPoint och EndPointhar toningen ändrats från diagonal till vågrät.

<!-- 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;

Följande bild visar gradienten som skapas. Toningsaxeln är markerad med en streckad linje och toningsstoppen markeras med cirklar.

toningsaxel för en vågrät linjär toning

I nästa exempel visas hur du skapar en lodrät toning.

<!-- 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;

Följande bild visar gradienten som skapas. Toningsaxeln är markerad med en streckad linje och toningsstoppen markeras med cirklar.

gradientaxel för en lodrät toning

Radiella toningar

Precis som en LinearGradientBrushmålar en RadialGradientBrush ett område med färger som smälter samman längs en axel. Föregående exempel visade hur axeln på en linjär övertoningspensel är en rät linje. En radiel färggradientborstes axel definieras av en cirkel, och dess färger sprider sig utåt från sitt ursprung.

I följande exempel används en radiell övertoningspensel för att måla det inre av en rektangel.

<!-- 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;

Följande illustration illustrerar graderingen som skapades i föregående exempel. Penselns toningsstopp har markerats. Observera att även om resultaten skiljer sig åt är toningsstoppen i det här exemplet identiska med toningsstoppen i föregående linjära penselexempel.

färgövergångsstopp i en radiell övertoning

GradientOrigin anger startpunkten för en radiell övertoningspensels axel. Toningsaxeln utstrålar från toningens ursprung till toningscirkeln. En pensels toningscirkel definieras av dess egenskaper Center, RadiusXoch RadiusY.

Följande bild visar flera radiella toningar med olika inställningar GradientOrigin, Center, RadiusXoch RadiusY.

RadialGradientBrush-inställningar RadialGradientBrushes med olika inställningar för GradientOrigin, Center, RadiusX och RadiusY.

Ange transparenta eller Partially-Transparent övertoningsstopp

Eftersom toningsstopp inte ger en egenskap för opacitet måste du ange alfakanalen med färger med argb-hexadecimal notation i markering eller använda metoden Color.FromScRgb för att skapa toningsstopp som är transparenta eller delvis transparenta. I följande avsnitt beskrivs hur du skapar delvis transparenta toningsstopp i XAML och kod.

Ange färgopacitet i "XAML"

I XAML använder du ARGB hexadecimal notation för att ange ogenomskinlighet för enskilda färger. ARGB hexadecimal notation använder följande syntax:

# aarrggbb

aa på föregående rad representerar ett tvåsiffrigt hexadecimalt värde som används för att ange färgens opacitet. rr, ggoch bb representerar var och en ett tvåsiffrigt hexadecimalt värde som används för att ange mängden rött, grönt och blått i färgen. Varje hexadecimal siffra kan ha ett värde från 0–9 eller A-F. 0 är det minsta värdet och F är störst. Ett alfavärde på 00 anger en färg som är helt transparent, medan ett alfavärde för FF skapar en färg som är helt ogenomskinlig. I följande exempel används hexadecimal ARGB-notation för att ange två färger. Den första är delvis transparent (den har ett alfavärde på x20), medan den andra är helt ogenomskinlig.

<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>

Ange färgopacitet i kod

När du använder kod kan du med metoden static FromArgb ange ett alfavärde när du skapar en färg. Metoden tar fyra parametrar av typen Byte. Den första parametern anger färgens alfakanal. de övriga tre parametrarna anger färgens röda, gröna och blå värden. Varje värde ska vara mellan 0 och 255, inklusive. Ett alfavärde på 0 anger att färgen är helt transparent, medan ett alfavärde på 255 anger att färgen är helt ogenomskinlig. I följande exempel används metoden FromArgb för att skapa två färger. Den första färgen är delvis transparent (den har ett alfavärde på 32), medan den andra är helt ogenomskinlig.

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;

Du kan också använda metoden FromScRgb, som gör att du kan använda ScRGB-värden för att skapa en färg.

Måla med bilder, ritningar, visuella objekt och mönster

ImageBrush, DrawingBrushoch VisualBrush klasser kan du måla ett område med bilder, ritningar eller visuella objekt. Information om hur du målar med bilder, ritningar och mönster finns i Målning med bilder, ritningar och visuella objekt.

Se även