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

  • Makale

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 alanı çıkışıyla "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.

Brush types
Fırça örnekleri

Çoğu görsel nesne, bunların nasıl boyanacağını belirtmenizi sağlar. Aşağıdaki tabloda, ile kullanabileceğiniz Brushbazı 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 Boyama

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

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

A rectangle painted using a SolidColorBrush
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

Doğrusal LinearGradientBrush gradyan ile 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 öğesini boyamak Fill için kullanır Rectangle. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

A rectangle painted using a LinearGradientBrush
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

Radyal RadialGradientBrush gradyan ile bir alanı 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 öğesini boyamak Fill için kullanır Rectangle. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

A rectangle painted using a RadialGradientBrush
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 alanı ile ImageSourceboyar.

Aşağıdaki örnek, bir ImageBrush öğesini boyamak Fill için bir Rectanglekullanır. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

A Rectangle painted by an ImageBrush
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>

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

Çizimle Boyama

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

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

A rectangle painted using a DrawingBrush
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>

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

Görselle 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 öğesini boyamak Fill için kullanır Rectangle. Aşağıdaki çizimde boyalı dikdörtgen gösterilmektedir.

A rectangle painted using a VisualBrush
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>

Sınıf hakkında VisualBrush 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.

  • Önceden tanımlanmış kullanılabilir fırçaların listesi için sınıfına Brushes bakın. Önceden tanımlanmış fırçanın nasıl kullanılacağını gösteren bir örnek için bkz . Düz Renkle Bir Alanı Boyama.

  • Kullanılabilir sistem fırçalarının listesi için sınıfına SystemColors bakın. Örnek için bkz . Sistem Fırçası ile Bir Alanı Boyama.

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, yüzde 25'lik bir SolidColorBrush opak yapmak için özelliğini kullanırOpacity.

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

Dekont

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, dışındaki VisualBrush tüm Brush türler, performansı geliştirmek ve iş parçacığı güvenli hale getirmek için salt okunur yapılabilir.

Nesneler tarafından Freezable sağlanan farklı özellikler hakkında daha fazla bilgi için bkz . Freezable Objects Overview.

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

Ayrıca bkz.