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

Bu konuda, düz renkler, doğrusal gradyanlar ve radyal gradyanlar ile boyamak SolidColorBrushLinearGradientBrush için , ve RadialGradientBrush nesnelerinin nasıl kullanımı açıklanmıştır.

Düz Renkle Bir Alanı Boyama

Herhangi bir platformda en yaygın işlemlerden biri, bir alanı düz bir ile Color 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 boyamak için farklı yollar SolidColorBrush 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.

  • Ad ile önceden tanımlanmış bir düz renk fırça seçin. Örneğin, düğmenin "Red" veya Background "MediumBlue" olarak ayarlayabilirsiniz. Önceden tanımlanmış diğer düz renk fırçalarının listesi için sınıfının statik özelliklerine Brushes bakın. 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 paletinde bir renk seçin. 32 bit paletden renk belirtme biçimi "#rrggbb" şeklindedir. Burada rr göreli kırmızı miktarını belirten iki basamaklı onaltılık sayıdır, gg yeşil miktarını belirtir ve bb mavi miktarını belirtir. Ayrıca, renk aa'nın rengin alfa değerini veya saydamlığını belirt olduğu "#aarrggbb"olarak belirtilebilir. Bu yaklaşım kısmen saydam renkler oluşturmanıza olanak sağlar. Aşağıdaki örnekte , onaltılık bir nota kullanılarak tam opak kırmızıya BackgroundButton 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 için özellik etiketi söz dizimi SolidColorBrush kullanın. Bu söz dizimi daha ayrıntılıdır ancak fırçanın opaklığı gibi ek ayarlar belirtmenizi sağlar. Aşağıdaki örnekte, iki Background öğenin Button ö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 bir nota 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 renkle bir alanı boyamak için aşağıdaki seçeneklerden birini kullanın.

  • sınıfı tarafından sağlanan önceden tanımlanmış fırçalardan birini Brushes kullanın. Aşağıdaki örnekte , olarak BackgroundButton ayarlanmış. Red

    Button myButton = new Button();
    myButton.Content = "A Button";
    myButton.Background = Brushes.Red;
    
  • yapısını kullanarak SolidColorBrush bir oluşturun ve özelliğini ColorColor ayarlayın. sınıfından önceden tanımlanmış bir renk kullanabilir Colors veya statik yöntemini kullanarak bir ColorFromArgb oluşturabilirsiniz.

    Aşağıdaki örnek, önceden tanımlanmış bir renk Color kullanarak SolidColorBrush özelliğinin nasıl ayarlanmasını gösterir.

    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ı, 255 değeri ise bir rengin mümkün olan en fazla kırmızı miktarına sahip olduğunu gösterir. Aşağıdaki örnekte alfa, kırmızı, yeşil ve mavi değerler belirterek fırça rengi 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 diğer yolları için başvuru Color konu başlığına bakın.

Bir Alanı Gradyan ile Boyama

Gradyan fırça, eksen boyunca birbirine karıştıran birden çok renk içeren bir alanı boyar. Bunları kullanarak ışık ve gölge izlenimleri oluşturabilir ve denetimlerinize üç boyutlu bir his veabilirsiniz. Ayrıca bunları cam, chrome, su ve diğer düz yüzeylerin benzetimini yapmak için de kullanabilirsiniz. WPF iki gradyan fırça türü sağlar: LinearGradientBrush ve RadialGradientBrush .

Doğrusal Gradyanlar

Bir LinearGradientBrush çizgi, gradyan ekseni üzerinde tanımlanmış bir gradyan ile LinearGradientBrush Nesneleri kullanarak gradyan renklerini ve bunların gradyan ekseninde konumlarını GradientStop belirtirsiniz. Ayrıca, yatay ve dikey gradyanlar oluşturmanıza ve gradyan yönünü ters çevirmeye olanak sağlayan gradyan eksenini değiştirebilirsiniz. Gradyan ekseni sonraki bölümde açıklanmıştır. Varsayılan olarak, çapraz gradyan oluşturulur.

Aşağıdaki örnek, dört renkle doğrusal bir gradyan oluşturan kodu gösterir.

<!-- 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ı üretir:

A diagonal linear gradient

Not

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

, GradientStop gradyan fırçaların temel yapı taşıdır. Gradyan durdurma, Color gradyan ekseni Offset üzerinde bir belirtir.

  • Gradyan durdurmanın Color özelliği gradyan durdurmanın rengini belirtir. Rengi önceden tanımlanmış bir renk (sınıf tarafından sağlanır) kullanarak veya ScRGB veya ARGB değerleri Colors belirterek değiştirebilirsiniz. XAML'de bir rengi tanımlamak için onaltılık bir nota da kullanabilirsiniz. Daha fazla bilgi için yapısına Color bakın.

  • Gradyan durdurmanın Offset özelliği, gradyan durdurmanın renginin gradyan ekseninde konumunu belirtir. Uzaklık, Double 0 ile 1 arasında bir değerdir. Gradyan durdurmanın uzaklık değeri 0'a ne kadar yakınsa renk gradyanın başlangıcına da o kadar yakın olur. 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 durak tarafından belirtilen rengin birleşimi olarak doğrusal olarak irdelenmiş olur. Aşağıdaki çizimde, önceki örnekte gradyan durakları vurgulanır. Daireler gradyan duraklarının konumunu işaret eder ve kesikli çizgi gradyan eksenini gösterir.

Gradient stops in a linear gradient

İlk gradyan durdurma, uzaklığında sarı rengi 0.0 belirtir. İkinci gradyan durdurma, uzaklığında kırmızı rengi 0.25 belirtir. Gradyan ekseninde soldan sağa doğru ilerlerken bu iki nokta arasındaki noktalar kademeli olarak sarıdan kırmızıya doğru değişir. Üçüncü gradyan durdurma, uzaklığında mavi rengi 0.75 belirtir. İkinci ve üçüncü gradyan arasındaki noktalar kademeli olarak kırmızıdan maviye değişmez. Dördüncü gradyan durdurma, uzaklığında yeşil rengi 1.0 belirtir. Üçüncü ve dördüncü gradyan arasındaki noktalar kademeli olarak maviden yeşile doğru değişir.

Gradyan Ekseni

Daha önce belirtildiği gibi, doğrusal gradyan fırça gradyan durakları, gradyan ekseninde bir çizgi üzerinde konumlanır. Fırçanın ve özelliklerini kullanarak çizginin yönünü ve boyutunu StartPointEndPoint değiştirebilirsiniz. Fırçaların ve ' lerini işerek yatay ve dikey gradyanlar oluşturabilir, gradyan yönünü tersine çevirebilir, gradyan yayılımlarını yoğunlaştırarak ve daha StartPointEndPoint fazlasını oluşturabilirsiniz.

Varsayılan olarak, doğrusal gradyan fırçaları StartPoint ve EndPoint boyanma alanına göredir. Nokta (0,0), boyanmış olan alan için sol üst köşeyi, (1,1) ise boyanmış olan alan için sağ alt köşeyi temsil eder. varsayılan değeri StartPointLinearGradientBrush (0,0) ve varsayılan değeri (1,1) değeridir. Bu, sol üst köşeden başlayarak boyanmış olan alanı sağ alt köşesine genişleten çapraz gradyan EndPoint oluşturur. Aşağıdaki çizimde, varsayılan ve ile doğrusal gradyan fırçanın gradyan ekseni StartPointEndPoint gösterilmiştir.

Gradient axis for a diagonal linear gradient

Aşağıdaki örnek, fırça ve belirterek yatay gradyan oluşturmayı StartPointEndPoint gösterir. Gradyan durakların önceki örneklerde olduğu gibi olduğunu fark edersiniz; yalnızca ve StartPoint değiştirerek EndPoint gradyan çaprazdan yataya değiştirilmiştir.

<!-- 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österilmiştir. Gradyan ekseni kesikli çizgi ile işaretlenir ve gradyan durakları dairelerle işaretlenir.

Gradient axis for a horizontal linear gradient

Sonraki örnekte dikey gradyan oluşturma adımlarını gösterir.

<!-- 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österilmiştir. Gradyan ekseni kesikli çizgi ile işaretlenir ve gradyan durakları dairelerle işaretlenir.

Gradient axis for a vertical gradient

Radyal Gradyanlar

gibi, LinearGradientBrush bir eksen üzerinde birlikte RadialGradientBrush karıştıran renklere sahip bir alanı boyar. Önceki örneklerde doğrusal gradyan fırça ekseninin nasıl düz bir çizgi olduğu gösterildi. Radyal gradyan fırça ekseni bir daire tarafından tanımlanır; renkleri, kaynağından dışa doğru "yayma".

Aşağıdaki örnekte, bir dikdörtgenin iç rengini boyamak için radyal gradyan fırça kullanılı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österilmiştir. Fırçanın gradyan durakları vurgulanmış. Sonuçlar farklı olsa da, bu örnekteki gradyan durakları, önceki doğrusal gradyan fırça örneklerde gradyan durakları ile aynıdır.

Gradient stops in a radial gradient

GradientOrigin, radyal gradyan fırçanın gradyan ekseninin başlangıç noktasını belirtir. Gradyan ekseni gradyan başlangıcının gradyan çemberinden yayılır. Fırçanın gradyan çemberi Center , RadiusX , ve özellikleri tarafından tanımlanır RadiusY .

Aşağıdaki çizimde, farklı GradientOrigin ,, CenterRadiusX ve ayarlarına sahip çeşitli radyal degradeler gösterilmektedir RadiusY .

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

Saydam veya Partially-Transparent gradyan duraklarının belirlenmesi

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

"XAML" içinde renk geçirgenliği belirtme

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

##RRGGBB

Önceki satırdaki AA , rengin opaklığını belirtmek için kullanılan iki basamaklı bir onaltılık değeri temsil eder. RR, ggve BB her biri, rengin kırmızı, yeşil ve mavi miktarını belirtmek için kullanılan iki basamaklı bir onaltılık değeri temsil eder. Her onaltılık basamak 0-9 veya A-F arasında bir değere sahip olabilir. 0 en küçük değerdir ve F en büyük değerdir. 00 ' ın alfa değeri tamamen saydam bir rengi belirtir, bu da bir FF Alpha değeri tamamen opak bir renk oluşturur. Aşağıdaki örnekte, iki renk belirtmek için onaltılı ARGB gösterimi kullanılır. İlki kısmen saydamdır (x20 Alpha değeri vardır), ikincisi tamamen opak hale gelir.

<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 geçirgenliği belirtme

Kodu kullanırken, statik FromArgb Yöntem bir renk oluştururken alfa değeri belirtmenize olanak sağlar. Yöntemi türünde dört parametre alır Byte . İ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 ' ın bir alfa değeri, rengin tamamen saydam olduğunu belirtir, ancak 255 Alpha değeri rengin tamamen opak olduğunu belirtir. Aşağıdaki örnekte, FromArgb yöntemi iki renk oluşturmak için kullanılır. İlk renk kısmen saydamdır (alfa değeri 32 ' dir), ikincisi tamamen opak hale gelir.

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, FromScRgb bir renk oluşturmak Için ScRGB değerlerini kullanmanızı sağlayan yöntemini kullanabilirsiniz.

Görüntüler, çizimler, görseller ve desenlerle boyama

ImageBrush, DrawingBrush ve VisualBrush sınıfları görüntüleri, çizimleri veya görselleri olan bir alanı boyamanıza imkan tanır. Görüntüler, çizimler ve desenlerle boyama hakkında daha fazla bilgi için bkz. görüntü, çizim ve görsellerle boyama.

Ayrıca bkz.