WPF Fırçalarına Genel Bakış

Ekranınızda görünen her şey bir fırçayla boyandığından görünür. Örneğin, bir düğmenin arka planını, metnin ön planını ve şeklin dolgusunu açıklamak için fırça kullanılır. Bu konu, Windows Presentation Foundation (WPF) fırçaları ile boyama kavramlarını tanıtır ve örnekler sağlar. Fırçalar, basit, düz renklerden karmaşık desen ve görüntü kümelerine kadar her şeyle kullanıcı arabirimi (UI) nesnelerini boyamanızı sağlar.

Fırça ile Boyama

Bir Brush çıktısıyla bir alanı "boyar". Farklı fırçaların farklı çıkış türleri vardır. Bazı fırçalar düz renkle bir alanı, diğerleri gradyan, desen, görüntü veya çizimle boyar. Aşağıdaki çizimde, farklı Brush türlerin her birine ilişkin örnekler gösterilmektedir.

Fırça türleri
Fırça örnekleri

Çoğu görsel nesne, bunların nasıl boyanacağını belirtmenizi sağlar. Aşağıdaki tabloda, Brush ile kullanabileceğiniz bazı yaygın nesneler ve özellikler listelenir.

Sınıf Fırça özellikleri
Border BorderBrush, Background
Control Background, Foreground
Panel Background
Pen Brush
Shape Fill, Stroke
TextBlock Background

Aşağıdaki bölümlerde farklı Brush türler açıklanmıştır ve her birine bir örnek verilmiştir.

Düz Renkle Boya

Bir SolidColorBrush bir alanı düz Color boyayla boyar. Bir Color öğesini belirtmek için SolidColorBrush çeşitli yollar vardır: örneğin alfa, kırmızı, mavi ve yeşil kanallarını belirtebilir veya Colors sınıfı tarafından sağlanan önceden tanımlanmış renklerden birini kullanabilirsiniz.

Aşağıdaki örnek, bir SolidColorBrush'nin Fill öğesini boyamak için bir Rectangle kullanır. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

SolidColorBrush graphicsmm_brush_ovw_solidcolorbrush kullanılarak boyanan dikdörtgen
SolidColorBrush kullanılarak boyanan dikdörtgen

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a SolidColorBrush and use it to
// paint the rectangle.
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a SolidColorBrush and use it to
' paint the rectangle.
Dim myBrush As New SolidColorBrush(Colors.Red)
exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
</Rectangle>

Sınıf hakkında SolidColorBrush daha fazla bilgi için bkz. Düz Renkler ve Gradyanlarla Boyamaya Genel Bakış.

Doğrusal Gradyan ile Boyama

LinearGradientBrush doğrusal gradyan kullanarak bir alanı boyar. Doğrusal gradyan, gradyan ekseni olmak üzere iki veya daha fazla rengi bir çizgi boyunca harmanlar. Nesneleri gradyandaki renkleri ve konumlarını belirtmek için kullanırsınız GradientStop .

Aşağıdaki örnek, bir LinearGradientBrush'nin Fill öğesini boyamak için bir Rectangle kullanır. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

LinearGradientBrush ile boyanmış bir dikdörtgen
LinearGradientBrush kullanılarak boyanan dikdörtgen

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a LinearGradientBrush and use it to
// paint the rectangle.
LinearGradientBrush myBrush = new LinearGradientBrush();
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a LinearGradientBrush and use it to
' paint the rectangle.
Dim myBrush As New LinearGradientBrush()
myBrush.GradientStops.Add(New GradientStop(Colors.Yellow, 0.0))
myBrush.GradientStops.Add(New GradientStop(Colors.Orange, 0.5))
myBrush.GradientStops.Add(New GradientStop(Colors.Red, 1.0))

exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <LinearGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Sınıf hakkında LinearGradientBrush daha fazla bilgi için bkz. Düz Renkler ve Gradyanlarla Boyamaya Genel Bakış.

Radyal Gradyan ile Boyama

RadialGradientBrush bir alanı radyal gradyanla boyar. Radyal gradyan, daire boyunca iki veya daha fazla rengi karıştırır. LinearGradientBrush sınıfında olduğu gibi, gradyandaki renkleri ve bunların konumlarını belirtmek için nesneleri kullanırsınızGradientStop.

Aşağıdaki örnek, bir RadialGradientBrush'nin Fill öğesini boyamak için bir Rectangle kullanır. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

RadialGradientBrush kullanılarak boyanmış bir dikdörtgen
RadialGradientBrush kullanılarak boyanan dikdörtgen

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a RadialGradientBrush and use it to
// paint the rectangle.
RadialGradientBrush myBrush = new RadialGradientBrush();
myBrush.GradientOrigin = new Point(0.75, 0.25);
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a RadialGradientBrush and use it to
' paint the rectangle.
Dim myBrush As New RadialGradientBrush()
myBrush.GradientOrigin = New Point(0.75, 0.25)
myBrush.GradientStops.Add(New GradientStop(Colors.Yellow, 0.0))
myBrush.GradientStops.Add(New GradientStop(Colors.Orange, 0.5))
myBrush.GradientStops.Add(New GradientStop(Colors.Red, 1.0))

exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <RadialGradientBrush GradientOrigin="0.75,0.25">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Sınıf hakkında RadialGradientBrush daha fazla bilgi için bkz. Düz Renkler ve Gradyanlarla Boyamaya Genel Bakış.

Resimle Boyama

Bir ImageBrush bir ImageSource ile alanı boyar.

Aşağıdaki örnek, bir ImageBrush kullanarak bir Fill öğesinin Rectangle'ini boyar. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

ImageBrush tarafından boyanmış bir dikdörtgen
Görüntü kullanılarak boyanan dikdörtgen

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create an ImageBrush and use it to
// paint the rectangle.
ImageBrush myBrush = new ImageBrush();
myBrush.ImageSource =
    new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create an ImageBrush and use it to
' paint the rectangle.
Dim myBrush As New ImageBrush()
myBrush.ImageSource = New BitmapImage(New Uri("sampleImages\pinkcherries.jpg", UriKind.Relative))

exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg"  />
  </Rectangle.Fill>
</Rectangle>

ImageBrush sınıfı hakkında daha fazla bilgi için bkz. Resimler, Çizimler ve Görsellerle Boyama.

Çizimle Boyama

Bir DrawingBrush bir alanı Drawing ile boyar. , Drawing şekiller, resimler, metinler ve medya içerebilir.

Aşağıdaki örnek, bir DrawingBrush'nin Fill öğesini boyamak için bir Rectangle kullanır. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

DrawingBrush graphicsmm_brush_ovw_drawingbrush kullanılarak boyanmış bir dikdörtgen
DrawingBrush kullanılarak boyanan dikdörtgen

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a DrawingBrush and use it to
// paint the rectangle.
DrawingBrush myBrush = new DrawingBrush();

GeometryDrawing backgroundSquare =
    new GeometryDrawing(
        Brushes.White,
        null,
        new RectangleGeometry(new Rect(0, 0, 100, 100)));

GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));

LinearGradientBrush checkerBrush = new LinearGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.Black, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.Gray, 1.0));

GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);

DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);

myBrush.Drawing = checkersDrawingGroup;
myBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
myBrush.TileMode = TileMode.Tile;

exampleRectangle.Fill = myBrush;
Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a DrawingBrush and use it to
' paint the rectangle.
Dim myBrush As New DrawingBrush()

Dim backgroundSquare As New GeometryDrawing(Brushes.White, Nothing, New RectangleGeometry(New Rect(0, 0, 100, 100)))

Dim aGeometryGroup As New GeometryGroup()
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(0, 0, 50, 50)))
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(50, 50, 50, 50)))

Dim checkerBrush As New LinearGradientBrush()
checkerBrush.GradientStops.Add(New GradientStop(Colors.Black, 0.0))
checkerBrush.GradientStops.Add(New GradientStop(Colors.Gray, 1.0))

Dim checkers As New GeometryDrawing(checkerBrush, Nothing, aGeometryGroup)

Dim checkersDrawingGroup As New DrawingGroup()
checkersDrawingGroup.Children.Add(backgroundSquare)
checkersDrawingGroup.Children.Add(checkers)

myBrush.Drawing = checkersDrawingGroup
myBrush.Viewport = New Rect(0, 0, 0.25, 0.25)
myBrush.TileMode = TileMode.Tile

exampleRectangle.Fill = myBrush
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,100,100" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing>
            <GeometryDrawing.Geometry>
              <GeometryGroup>
                <RectangleGeometry Rect="0,0,50,50" />
                <RectangleGeometry Rect="50,50,50,50" />
              </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Brush>
              <LinearGradientBrush>
                <GradientStop Offset="0.0" Color="Black" />
                <GradientStop Offset="1.0" Color="Gray" />
              </LinearGradientBrush>
            </GeometryDrawing.Brush>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

DrawingBrush sınıfı hakkında daha fazla bilgi için bkz. Resimler, Çizimler ve Görsellerle Boyama.

Görsellerle Boyama

Bir VisualBrush alanı nesneyle Visual boyar. Görsel nesnelere örnek olarak Button, Pageve verilebilir MediaElement. Ayrıca, VisualBrush uygulamanızın bir bölümünden başka bir alana içerik yansıtmanıza da olanak tanır; yansıma efektleri oluşturmak ve ekranın bölümlerini büyütmek için çok kullanışlıdır.

Aşağıdaki örnek, bir VisualBrush'nin Fill öğesini boyamak için bir Rectangle kullanır. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

VisualBrush ile boyanmış bir dikdörtgen
VisualBrush kullanılarak boyanan dikdörtgen

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a VisualBrush and use it
// to paint the rectangle.
VisualBrush myBrush = new VisualBrush();

//
// Create the brush's contents.
//
StackPanel aPanel = new StackPanel();

// Create a DrawingBrush and use it to
// paint the panel.
DrawingBrush myDrawingBrushBrush = new DrawingBrush();
GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));
RadialGradientBrush checkerBrush = new RadialGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.MediumBlue, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.White, 1.0));
GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);
myDrawingBrushBrush.Drawing = checkers;
aPanel.Background = myDrawingBrushBrush;

// Create some text.
TextBlock someText = new TextBlock();
someText.Text = "Hello, World";
FontSizeConverter fSizeConverter = new FontSizeConverter();
someText.FontSize = (double)fSizeConverter.ConvertFromString("10pt");
someText.Margin = new Thickness(10);

aPanel.Children.Add(someText);

myBrush.Visual = aPanel;
exampleRectangle.Fill = myBrush;

Dim exampleRectangle As New Rectangle()
exampleRectangle.Width = 75
exampleRectangle.Height = 75

' Create a VisualBrush and use it
' to paint the rectangle.
Dim myBrush As New VisualBrush()

'
' Create the brush's contents.
'
Dim aPanel As New StackPanel()

' Create a DrawingBrush and use it to
' paint the panel.
Dim myDrawingBrushBrush As New DrawingBrush()
Dim aGeometryGroup As New GeometryGroup()
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(0, 0, 50, 50)))
aGeometryGroup.Children.Add(New RectangleGeometry(New Rect(50, 50, 50, 50)))
Dim checkerBrush As New RadialGradientBrush()
checkerBrush.GradientStops.Add(New GradientStop(Colors.MediumBlue, 0.0))
checkerBrush.GradientStops.Add(New GradientStop(Colors.White, 1.0))
Dim checkers As New GeometryDrawing(checkerBrush, Nothing, aGeometryGroup)
myDrawingBrushBrush.Drawing = checkers
aPanel.Background = myDrawingBrushBrush

' Create some text.
Dim someText As New TextBlock()
someText.Text = "Hello, World"
Dim fSizeConverter As New FontSizeConverter()
someText.FontSize = CDbl(fSizeConverter.ConvertFromString("10pt"))
someText.Margin = New Thickness(10)

aPanel.Children.Add(someText)

myBrush.Visual = aPanel
exampleRectangle.Fill = myBrush

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <VisualBrush TileMode="Tile">
      <VisualBrush.Visual>
        <StackPanel>
          <StackPanel.Background>
            <DrawingBrush>
              <DrawingBrush.Drawing>
                <GeometryDrawing>
                  <GeometryDrawing.Brush>
                    <RadialGradientBrush>
                      <GradientStop Color="MediumBlue" Offset="0.0" />
                      <GradientStop Color="White" Offset="1.0" />
                    </RadialGradientBrush>
                  </GeometryDrawing.Brush>
                  <GeometryDrawing.Geometry>
                    <GeometryGroup>
                      <RectangleGeometry Rect="0,0,50,50" />
                      <RectangleGeometry Rect="50,50,50,50" />
                    </GeometryGroup>
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingBrush.Drawing>
            </DrawingBrush>
          </StackPanel.Background>
          <TextBlock FontSize="10pt" Margin="10">Hello, World!</TextBlock>
        </StackPanel>
      </VisualBrush.Visual>
    </VisualBrush>
  </Rectangle.Fill>
</Rectangle>

VisualBrush sınıfı hakkında daha fazla bilgi için bkz. Resimler, Çizimler ve Görsellerle Boyama.

Önceden Tanımlanmış ve Sistem Fırçalarını Kullanarak Boyama

Kolaylık olması için, Windows Presentation Foundation (WPF), nesneleri boyamak için kullanabileceğiniz önceden tanımlanmış ve sistem fırçaları kümesi sağlar.

Ortak Fırça Özellikleri

Brush nesneleri, fırçayı Opacity saydam veya kısmen saydam hale getirmek için kullanılabilecek bir özellik sağlar. Opacity 0 değeri fırçayı tamamen saydam hale getirirkenOpacity, 1 değeri fırçayı tamamen opak hale getirir. Aşağıdaki örnek, "Opacity" özelliğini kullanarak "SolidColorBrush" için yüzde 25 şeffaflık sağlar.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <SolidColorBrush Color="Blue" Opacity="0.25" />
  </Rectangle.Fill>
</Rectangle>
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
SolidColorBrush partiallyTransparentSolidColorBrush
    = new SolidColorBrush(Colors.Blue);
partiallyTransparentSolidColorBrush.Opacity = 0.25;
myRectangle.Fill = partiallyTransparentSolidColorBrush;

Fırça kısmen saydam renkler içeriyorsa, rengin opaklık değeri çarpma yoluyla fırçanın opaklık değeriyle birleştirilir. Örneğin, fırçanın opaklık değeri 0,5 ise ve fırçada kullanılan bir renk de 0,5 opaklık değerine sahipse, çıkış rengi 0,25 opaklık değerine sahiptir.

Uyarı

Bir fırçanın opaklık değerini değiştirmek, özelliğini kullanarak UIElement.Opacity bir öğenin tamamının opaklığını değiştirmekten daha verimlidir.

Veya özelliklerini kullanarak TransformRelativeTransform fırçanın içeriğini döndürebilir, ölçeklendirebilir, eğebilir ve çevirebilirsiniz. Daha fazla bilgi için bkz . Fırça Dönüşümüne Genel Bakış.

Bunlar nesne olduğundan Animatable , Brush nesneler animasyonlu olabilir. Daha fazla bilgi için bkz. Animasyona Genel Bakış.

Dondurulabilir Özellikler

sınıfından Freezable devraldığından, Brush sınıfı birkaç özel özellik sağlar: Brush nesneler kaynak olarak bildirilebilir, birden çok nesne arasında paylaşılabilir ve kopyalanabilir. Ayrıca, Brush dışındaki tüm VisualBrush türler performansı geliştirmek ve iş parçacığı güvenliği sağlamak için salt okunur yapılabilir.

Freezable nesneleri tarafından sağlanan farklı özellikler hakkında daha fazla bilgi için Freezable Objects Overview'a bakın.

Nesnelerin neden VisualBrush dondurulamadığı hakkında daha fazla bilgi için tür sayfasına bakın VisualBrush .

Ayrıca bakınız