Aracılığıyla paylaş

Düz Renkler ve Gradyanlar ile Boyamaya Genel Bakış

  • Makale

Bu konuda düz renkler, doğrusal gradyanlar ve RadialGradientBrush radyal gradyanlarla boyamak için , LinearGradientBrushve nesnelerinin nasıl kullanılacağı SolidColorBrushaçıklanmaktadır.

Düz Renkle Bir Alanı Boyama

Herhangi bir platformdaki en yaygın işlemlerden biri, bir alanı düz Colorile boyamaktır. Bu görevi gerçekleştirmek için Windows Presentation Foundation (WPF) sınıfını SolidColorBrush sağlar. Aşağıdaki bölümlerde ile SolidColorBrushboyama yapmanın farklı yolları açıklanmaktadır.

"XAML" içinde SolidColorBrush Kullanma

XAML'de düz renkle bir alanı boyamak için aşağıdaki seçeneklerden birini kullanın.

  • Ada göre önceden tanımlanmış bir düz renk fırçası seçin. Örneğin, düğmeyi Background "Kırmızı" veya "MediumBlue" olarak ayarlayabilirsiniz. Önceden tanımlanmış diğer düz renk fırçalarının listesi için sınıfın statik özelliklerine Brushes bakın. Aşağıda bir örnek verilmiştir.

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

  • Tek bir düz renkte birleştirmek için kırmızı, yeşil ve mavi miktarlarını belirterek 32 bit renk paletinden bir renk seçin. 32 bit paletinden renk belirtme biçimi "#rrggbb"dir; burada rr , göreli kırmızı miktarını belirten iki basamaklı onaltılık bir sayıdır, gg yeşil miktarını belirtir ve bb mavi miktarını belirtir. Ayrıca, renk "#aarrggbb" olarak belirtilebilir; burada aa rengin alfa değerini veya saydamlığını belirtir. Bu yaklaşım, kısmen saydam renkler oluşturmanıza olanak tanır. Aşağıdaki örnekte , BackgroundButton onaltılık gösterimi kullanılarak tam olarak opak kırmızıya ayarlanmıştır.

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

  • bir tanımlamak SolidColorBrushiçin özellik etiketi söz dizimlerini kullanın. Bu söz dizimi daha ayrıntılıdır, ancak fırçanın opaklığı gibi ek ayarlar belirtmenize olanak tanır. Aşağıdaki örnekte, Background iki Button öğe özellikleri tamamen opak kırmızı olarak ayarlanmıştır. İlk fırçanın rengi önceden tanımlanmış bir renk adı kullanılarak açıklanmıştır. İkinci fırçanın rengi onaltılık gösterimi kullanılarak açıklanmıştır.

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

Kodda SolidColorBrush ile Boyama

Kodda düz bir renkle bir alanı boyamak için aşağıdaki seçeneklerden birini kullanın.

  • Sınıf tarafından Brushes sağlanan önceden tanımlanmış fırçalardan birini kullanın. Aşağıdaki örnekte, Background öğesinin Button ayarı olarak Redayarlanmıştır.

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

  • bir SolidColorBrush oluşturun ve bir yapı kullanarak Color özelliğini Color ayarlayın. sınıfından Colors önceden tanımlanmış bir renk kullanabilir veya statik FromArgb yöntemi kullanarak bir Color oluşturabilirsiniz.

    Aşağıdaki örnekte, önceden tanımlanmış bir renk kullanarak özelliğinin SolidColorBrush nasıl ayarlanacağı Color gösterilmektedir.

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

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

Statik FromArgb , rengin alfa, kırmızı, yeşil ve mavi değerlerini belirtmenizi sağlar. Bu değerlerin her biri için tipik aralık 0-255'tir. Örneğin, 0 alfa değeri bir rengin tamamen saydam olduğunu, 255 değeri ise rengin tamamen opak olduğunu gösterir. Benzer şekilde, 0 kırmızı değeri bir rengin içinde kırmızı olmadığını belirtirken, 255 değeri bir rengin mümkün olan en yüksek kırmızı miktarına sahip olduğunu gösterir. Aşağıdaki örnekte, bir fırçanın rengi alfa, kırmızı, yeşil ve mavi değerler belirtilerek açıklanmıştır.

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;

Renk belirtmenin ek yolları için başvuru konusuna Color bakın.

Gradyan ile Bir Alanı Boyama

Gradyan fırça, bir eksen boyunca birbirine karışan birden çok rengi olan bir alanı boyar. Bunları kullanarak ışık ve gölge izlenimleri oluşturabilir ve denetimlerinizin üç boyutlu bir his vermesini sağlayabilirsiniz. Bunları cam, krom, su ve diğer pürüzsüz yüzeylerin simülasyonunu yapmak için de kullanabilirsiniz. WPF iki tür gradyan fırçası sağlar: LinearGradientBrush ve RadialGradientBrush.

Doğrusal Gradyanlar

Bir LinearGradientBrush alan, gradyan ekseni olan bir çizgi boyunca tanımlanmış gradyanla boyar. Nesneleri kullanarak GradientStop gradyanın renklerini ve gradyan ekseni boyunca konumlarını belirtirsiniz. Yatay ve dikey gradyanlar oluşturmanıza ve gradyan yönünü ters çevirmenize olanak tanıyan gradyan eksenini de değiştirebilirsiniz. Gradyan ekseni sonraki bölümde açıklanmıştır. Varsayılan olarak, çapraz gradyan oluşturulur.

Aşağıdaki örnekte dört renkle doğrusal gradyan oluşturan kod gösterilmektedir.

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

Bu kod aşağıdaki gradyanı oluşturur:

A diagonal linear gradient

Dekont

Bu konudaki gradyan örnekleri, başlangıç noktalarını ve bitiş noktalarını ayarlamak için varsayılan koordinat sistemini kullanır. Varsayılan koordinat sistemi sınırlayıcı kutuya göredir: 0 sınırlayıcı kutunun yüzde 0'ını, 1 ise sınırlayıcı kutunun yüzde 100'unu gösterir. özelliğini değerine Absoluteayarlayarak MappingMode bu koordinat sistemini değiştirebilirsiniz. Mutlak koordinat sistemi sınırlayıcı kutuya göre değildir. Değerler doğrudan yerel alanda yorumlanır.

gradyan GradientStop fırçanın temel yapı taşıdır. Gradyan durağı gradyan ekseni boyunca bir Offset belirtirColor.

  • Gradyan durağının Color özelliği gradyan durağının rengini belirtir. Önceden tanımlanmış bir renk kullanarak (sınıf tarafından Colors sağlanan) veya ScRGB veya ARGB değerleri belirterek rengi ayarlayabilirsiniz. XAML'de, bir rengi açıklamak için onaltılık gösterimi de kullanabilirsiniz. Daha fazla bilgi için yapıya Color bakın.

  • Gradyan durağının Offset özelliği gradyan ekseninde gradyan durağının renginin konumunu belirtir. Uzaklık, 0 ile 1 arasında bir Double değerdir. Gradyan durağının uzaklık değeri 0'a ne kadar yakınsa, renk gradyanın başlangıcına o kadar yakındır. Gradyanın uzaklık değeri 1'e ne kadar yakınsa, renk gradyanın sonuna o kadar yakın olur.

Gradyan durakları arasındaki her noktanın rengi, iki sınırlayıcı gradyan durağı tarafından belirtilen rengin bir bileşimi olarak doğrusal olarak ilişkilendirilmiş. Aşağıdaki çizimde, önceki örnekteki gradyan durakları vurgulanır. Daireler gradyan duraklarının konumunu işaretler ve kesikli çizgi gradyan eksenini gösterir.

Gradient stops in a linear gradient

İlk gradyan durağı, uzaklığında 0.0sarı rengi belirtir. İkinci gradyan durağı, uzaklığında 0.25kırmızı rengi belirtir. Gradyan ekseni boyunca soldan sağa doğru ilerlerken bu iki durak arasındaki noktalar kademeli olarak sarıdan kırmızıya dönüşür. Üçüncü gradyan durağı, uzaklığında 0.75mavi rengi belirtir. İkinci ve üçüncü gradyan durakları arasındaki noktalar yavaş yavaş kırmızıdan maviye dönüşür. Dördüncü gradyan durağı, uzaklığında kireç yeşili 1.0rengini belirtir. Üçüncü ve dördüncü gradyan durakları arasındaki noktalar yavaş yavaş maviden kireç yeşiline dönüşür.

Gradyan Ekseni

Daha önce belirtildiği gibi, doğrusal gradyan fırçasının gradyan durakları gradyan ekseni olan bir çizgi boyunca konumlandırılır. Fırça StartPoint ve özelliklerini kullanarak çizginin yönünü ve EndPoint boyutunu değiştirebilirsiniz. Fırçanın StartPoint ve EndPointdeğerlerini değiştirerek yatay ve dikey gradyanlar oluşturabilir, gradyan yönünü tersine çevirebilir, gradyan yayılımı daraltabilir ve daha fazlasını yapabilirsiniz.

Varsayılan olarak, doğrusal gradyan fırçaların StartPoint ve EndPoint değerleri boyanmakta olan alana göredir. Nokta (0,0), boyanmakta olan alanın sol üst köşesini ve (1,1) boyanmakta olan alanın sağ alt köşesini temsil eder. StartPoint varsayılan değeri LinearGradientBrush (0,0) ve varsayılanı EndPoint (1,1) şeklindedir. Bu, sol üst köşeden başlayıp boyanmakta olan alanın sağ alt köşesine kadar uzanan bir çapraz gradyan oluşturur. Aşağıdaki çizimde, varsayılan StartPoint ve EndPointile doğrusal gradyan fırçanın gradyan ekseni gösterilmektedir.

Gradient axis for a diagonal linear gradient

Aşağıdaki örnekte, ve fırçasını belirterek yatay gradyan oluşturma gösterilmektedir StartPointEndPoint. Gradyan duraklarının önceki örneklerdekiyle aynı olduğuna dikkat edin; ve değeri değiştirilerek StartPointEndPointgradyan çapraztan yataya değiştirildi.

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

Aşağıdaki çizimde, oluşturulan gradyan gösterilmektedir. Gradyan ekseni kesikli çizgiyle işaretlenir ve gradyan durakları dairelerle işaretlenir.

Gradient axis for a horizontal linear gradient

Sonraki örnekte dikey gradyan oluşturma gösterilmektedir.

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

Aşağıdaki çizimde, oluşturulan gradyan gösterilmektedir. Gradyan ekseni kesikli çizgiyle işaretlenir ve gradyan durakları dairelerle işaretlenir.

Gradient axis for a vertical gradient

Radyal Gradyanlar

LinearGradientBrushgibi, bir RadialGradientBrush alanı da eksen boyunca bir araya gelen renklerle boyar. Önceki örneklerde doğrusal gradyan fırça ekseninin nasıl düz bir çizgi olduğu gösterildi. Radyal gradyan fırçanın ekseni bir daire tarafından tanımlanır; renkleri kaynağından dışarı doğru "yayıyor".

Aşağıdaki örnekte, dikdörtgenin içini boyamak için radyal gradyan fırçası kullanılmıştır.

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

Aşağıdaki çizimde, önceki örnekte oluşturulan gradyan gösterilmektedir. Fırçanın gradyan durakları vurgulanmış. Sonuçlar farklı olsa da, bu örnekteki gradyan duraklarının önceki doğrusal gradyan fırça örneklerindeki gradyan durakları ile aynı olduğuna dikkat edin.

Gradient stops in a radial gradient

radyal GradientOrigin gradyan fırçasının gradyan ekseninin başlangıç noktasını belirtir. Gradyan ekseni gradyan kaynağından gradyan daireye yayır. Fırçanın gradyan dairesi, , RadiusXve RadiusY özellikleriyle Centertanımlanır.

Aşağıdaki çizimde, farklı GradientOrigin, , CenterRadiusXve RadiusY ayarlarına sahip birkaç radyal gradyan gösterilmektedir.

RadialGradientBrush settings Farklı GradientOrigin, Center, RadiusX ve RadiusY ayarlarına sahip RadialGradientBrushes.

Saydam veya Kısmen Saydam Gradyan Durakları Belirtme

Gradyan durakları opaklık özelliği sağlamadığından, işaretlemede ARGB onaltılık gösterimini kullanarak renklerin alfa kanalını belirtmeniz veya saydam veya kısmen saydam gradyan durakları oluşturmak için yöntemini kullanmanız Color.FromScRgb gerekir. Aşağıdaki bölümlerde XAML ve kodda kısmen saydam gradyan duraklarının nasıl oluşturulacağı açıklanmaktadır.

"XAML" içinde Renk Opaklığı Belirtme

XAML'de, tek tek renklerin opaklığını belirtmek için ARGB onaltılık gösterimini kullanırsınız. ARGB onaltılık gösterimi aşağıdaki söz dizimini kullanır:

#aarrggbb

Önceki satırdaki aa, rengin opaklığını belirtmek için kullanılan iki basamaklı onaltılık değeri temsil eder. rr, gg ve bb değerlerinin her biri kırmızı, yeşil ve mavi renk miktarını belirtmek için kullanılan iki basamaklı onaltılık değeri gösterir. Her onaltılık basamak 0-9 veya A-F arası bir değere sahip olabilir. 0 en küçük değer, F ise en büyük değerdir. 00 alfa değeri tamamen saydam bir renk belirtirken, FF'nin alfa değeri tamamen opak bir renk oluşturur. Aşağıdaki örnekte, iki renk belirtmek için onaltılık ARGB gösterimi kullanılmıştır. Birincisi kısmen saydamdır (x20 alfa değerine sahiptir), ikincisi ise tamamen opaktır.

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

Kodda Renk Opaklığını Belirtme

Kodu kullanırken statik FromArgb yöntem, renk oluşturduğunuzda bir alfa değeri belirtmenize olanak tanır. yöntemi, türünde Bytedört parametre alır. İlk parametre rengin alfa kanalını belirtir; diğer üç parametre rengin kırmızı, yeşil ve mavi değerlerini belirtir. Her değer 0 ile 255 (dahil) arasında olmalıdır. 0 alfa değeri rengin tamamen saydam olduğunu belirtirken, 255 alfa değeri rengin tamamen opak olduğunu belirtir. Aşağıdaki örnekte yöntemi iki FromArgb renk üretmek için kullanılır. İlk renk kısmen saydamdır (alfa değeri 32'dir), ikincisi ise tamamen opaktır.

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;

Alternatif olarak, bir renk oluşturmak için ScRGB değerlerini kullanmanızı sağlayan yöntemini kullanabilirsiniz FromScRgb .

Resimler, Çizimler, Görseller ve Desenlerle Boyama

ImageBrush, DrawingBrushve VisualBrush sınıfları bir alanı resimler, çizimler veya görsellerle boyamanıza olanak tanır. Resimler, çizimler ve desenlerle boyama hakkında bilgi için bkz . Resimlerle, Çizimlerle ve Görsellerle Boyama.

Ayrıca bkz.