WPF 브러시 개요

아티클
08/20/2008

업데이트: 2007년 11월

모든 항목을 화면에서 볼 수 있는 것은 브러시로 그려졌기 때문입니다. 예를 들어 브러시는 단추의 배경, 텍스트의 전경 및 도형의 채우기를 나타나는 데 사용됩니다. 이 항목에서는 WPF(Windows Presentation Foundation) 브러시를 사용한 그리기의 개념을 소개하고 예제를 제공합니다. 브러시를 사용하면 간단한 단색부터 복잡한 패턴 및 이미지 집합에 이르기까지 모든 것을 사용하여 UI(사용자 인터페이스) 개체를 그릴 수 있습니다.

브러시를 사용하여 그리기

Brush는 해당 출력으로 영역을 "그립니다". 여러 다른 브러시는 다른 유형의 출력을 가집니다. 일부 브러시는 영역을 단색으로 그리고 일부 브러시는 그라데이션, 패턴, 이미지 또는 그리기를 사용하여 그립니다. 다음 그림은 다른 각 Brush 형식의 예제를 보여 줍니다.

브러시 예제

브러시 형식

대부분의 시각적 개체를 사용하면 그려지는 방법을 지정할 수 있습니다. 다음 표에서는 Brush와 함께 사용할 수 있는 몇 가지 일반적인 개체 및 속성이 나열되어 있습니다.

클래스	브러시 속성
Border	BorderBrush, Background
Control	Background, Foreground
Panel	Background
Pen	Brush
Shape	Fill, Stroke
TextBlock	Background

다음 단원에서는 여러 다른 Brush 형식에 대해 설명하고 각각의 예제를 제공합니다.

단색으로 그리기

SolidColorBrush는 단색 Color로 영역을 그립니다. SolidColorBrush의 Color를 지정하는 다양한 방법이 있습니다. 예를 들어 해당 알파, 빨간색, 파란색 및 녹색 채널을 지정하거나 Colors 클래스에 의해 제공된 미리 정의된 색 중 하나를 사용할 수 있습니다.

다음 예제에서는 SolidColorBrush를 사용하여 Rectangle의 Fill을 그립니다. 아래 그림에서는 코드에서 그린 사각형을 보여 줍니다.

SolidColorBrush를 사용하여 그린 사각형

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;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
</Rectangle>

SolidColorBrush 클래스에 대한 자세한 내용은 단색 및 그라데이션을 사용한 그리기 개요를 참조하십시오.

선형 그라데이션으로 그리기

LinearGradientBrush는 선형 그라데이션으로 영역을 그립니다. 선형 그라데이션은 그라데이션 축인 하나의 선을 가로질러 둘 이상의 색을 혼합합니다. GradientStop 개체를 사용하여 그라데이션의 색과 해당 위치를 지정합니다.

다음 예제에서는 LinearGradientBrush를 사용하여 Rectangle의 Fill을 그립니다. 아래 그림에서는 코드에서 그린 사각형을 보여 줍니다.

LinearGradientBrush를 사용하여 그린 사각형

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;

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

LinearGradientBrush 클래스에 대한 자세한 내용은 단색 및 그라데이션을 사용한 그리기 개요를 참조하십시오.

방사형 그라데이션으로 그리기

RadialGradientBrush는 방사형 그라데이션으로 영역을 그립니다. 방사형 그라데이션은 원을 가로질러 둘 이상의 색을 혼합합니다. LinearGradientBrush 클래스와 마찬가지로 GradientStop 개체를 사용하여 그라데이션의 색과 해당 위치를 지정합니다.

다음 예제에서는 RadialGradientBrush를 사용하여 Rectangle의 Fill을 그립니다. 아래 그림에서는 코드에서 그린 사각형을 보여 줍니다.

RadialGradientBrush를 사용하여 그린 사각형

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;

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

RadialGradientBrush 클래스에 대한 자세한 내용은 단색 및 그라데이션을 사용한 그리기 개요를 참조하십시오.

이미지로 그리기

ImageBrush는 ImageSource로 영역을 그립니다.

다음 예제에서는 ImageBrush를 사용하여 Rectangle의 Fill을 그립니다. 아래 그림에서는 코드에서 그린 사각형을 보여 줍니다.

이미지를 사용하여 그린 사각형

ImageBrush로 그린 사각형

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;

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

ImageBrush 클래스에 대한 자세한 내용은 이미지, 그림 및 시각적 표시로 그리기를 참조하십시오.

그리기로 그리기

DrawingBrush는 Drawing으로 영역을 그립니다. Drawing은 도형, 이미지, 텍스트 및 미디어를 포함할 수 있습니다.

다음 예제에서는 DrawingBrush를 사용하여 Rectangle의 Fill을 그립니다. 아래 그림에서는 코드에서 그린 사각형을 보여 줍니다.

DrawingBrush를 사용하여 그린 사각형

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;

<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 클래스에 대한 자세한 내용은 이미지, 그림 및 시각적 표시로 그리기를 참조하십시오.

시각적 표시로 그리기

VisualBrush는 Visual 개체로 영역을 그립니다. 시각적 표시 개체의 예로는 Button, Page 및 MediaElement가 있습니다. 또한 VisualBrush를 사용하면 응용 프로그램의 한 부분에서 다른 영역으로 콘텐츠를 투영할 수 있습니다. 이는 반사 효과를 만들고 화면의 일부를 확대하는 데 매우 유용합니다.

다음 예제에서는 VisualBrush를 사용하여 Rectangle의 Fill을 그립니다. 아래 그림에서는 코드에서 그린 사각형을 보여 줍니다.

VisualBrush를 사용하여 그린 사각형

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;

<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 클래스에 대한 자세한 내용은 이미지, 그림 및 시각적 표시로 그리기를 참조하십시오.

미리 정의된 브러시 및 시스템 브러시를 사용하여 그리기

편의상 WPF(Windows Presentation Foundation)는 개체를 그리는 데 사용할 수 있는 미리 정의된 브러시 및 시스템 브러시 집합을 제공합니다.

사용 가능한 미리 정의된 브러시 목록은 Brushes 클래스를 참조하십시오. 미리 정의된 브러시를 사용하는 방법을 보여 주는 예제를 보려면 방법: 단색으로 영역 그리기를 참조하십시오.
사용 가능한 시스템 브러시 목록은 SystemColors 클래스를 참조하십시오. 예제를 보려면 방법: 시스템 브러시로 영역 그리기를 참조하십시오.

일반 브러시 기능

Brush 개체는 브러시를 투명하게 또는 부분적으로 투명하게 만드는 데 사용할 수 있는 Opacity 속성을 제공합니다. Opacity 값이 0이면 브러시가 완전히 투명해지고 Opacity 값이 1이면 브러시가 완전히 불투명해집니다. 다음 예제에서는 Opacity 속성을 사용하여 SolidColorBrush를 25% 불투명하게 만듭니다.

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

브러시에 부분적으로 투명한 색이 포함된 경우 색의 불투명도 값은 브러시의 불투명도 값과의 곱셈으로 결합됩니다. 예를 들어 브러시의 불투명도 값이 0.5이고 브러시에 사용된 색의 불투명도 값이 0.5인 경우 출력 색의 불투명도 값은 0.25입니다.

참고

UIElement.Opacity 속성을 사용하여 전체 요소의 불투명도를 변경하는 것보다 브러시의 불투명도 값을 변경하는 것이 효율적입니다.

해당 Transform 또는 RelativeTransform 속성을 사용하여 브러시 내용에 대해 회전, 배율 조정, 기울이기 및 변환을 수행할 수 있습니다. 자세한 내용은 브러시 변환 개요를 참조하십시오.

Brush 개체는 Animatable 개체이므로 애니메이션 효과를 줄 수 있습니다. 자세한 내용은 애니메이션 개요를 참조하십시오.

Freezable 기능

Freezable 클래스에서 상속되는 Brush 클래스는 몇 가지 특수한 기능을 제공합니다. 예를 들어 Brush 개체를 리소스로 선언하거나, 여러 개체 간에 공유하거나, 복제할 수 있습니다. 또한 VisualBrush를 제외한 모든 Brush 형식을 읽기 전용으로 만들어 성능을 향상시키고 스레드로부터 안전하게 만들 수 있습니다.

Freezable 개체에서 제공하는 여러 기능에 대한 자세한 내용은 Freezable 개체 개요를 참조하십시오.

VisualBrush 개체를 고정할 수 없는 이유에 대한 자세한 내용은 VisualBrush 형식 페이지를 참조하십시오.

참고 항목