이미지, 그림 및 시각적 표시로 그리기
업데이트: 2007년 11월
이 항목에서는 ImageBrush, DrawingBrush 및 VisualBrush 개체를 사용하여 영역에 이미지, Drawing 또는 Visual을 그리는 방법을 보여 줍니다.
이 항목에는 다음 단원이 포함되어 있습니다.
- 사전 요구 사항
- 이미지로 영역 그리기
- 예제: 비트맵 이미지로 개체 그리기
- 그림으로 영역 그리기
- 예제: 그림으로 개체 그리기
- 시각적 표시로 영역 그리기
- 예제: 시각적 표시로 개체 그리기
- 예제: 반사 만들기
- TileBrush 기능
- 관련 항목
사전 요구 사항
이 항목을 이해하려면 WPF(Windows Presentation Foundation)에서 제공하는 여러 브러시 형식과 해당 기본 기능에 익숙해야 합니다. 브러시에 대한 소개를 보려면 WPF 브러시 개요를 참조하십시오.
이미지로 영역 그리기
ImageBrush는 ImageSource로 영역을 그립니다. ImageBrush와 함께 사용하는 가장 흔한 ImageSource 형식은 비트맵 그래픽을 나타내는 BitmapImage입니다. DrawingImage를 사용하면 Drawing 개체를 사용하여 그릴 수 있지만 대신 DrawingBrush를 사용하는 것이 더 간단합니다. ImageSource 개체에 대한 자세한 내용은 이미징 개요를 참조하십시오.
ImageBrush로 그리려면 BitmapImage를 만들고 이를 사용하여 비트맵 콘텐츠를 로드합니다. 그런 다음 BitmapImage를 사용하여 ImageBrush의 ImageSource 속성을 설정합니다. 마지막으로 ImageBrush를 그릴 개체에 적용합니다. XAML(Extensible Application Markup Language)에서는 ImageBrush의 ImageSource 속성을 로드할 이미지의 경로로 설정하기만 해도 됩니다.
다른 모든 Brush 개체와 마찬가지로 ImageBrush는 도형, 패널, 컨트롤 및 텍스트와 같은 개체를 그리는 데 사용할 수 있습니다. 다음 그림에서는 ImageBrush로 얻을 수 있는 몇 가지 효과를 보여 줍니다.
ImageBrush로 그린 개체
.gif)
기본적으로 ImageBrush는 그리고 있는 영역을 완전히 채우도록 이미지를 늘이므로 그려지는 영역의 가로 세로 비율이 이미지와 다른 경우 이미지가 왜곡될 수 있습니다. Stretch 속성을 기본값인 Fill에서 None, Uniform 또는 UniformToFill로 변경하여 이 동작을 변경할 수 있습니다. ImageBrush가 TileBrush 형식이므로 이미지 브러시가 출력 영역을 채우는 방법을 정확히 지정할 수 있으며 패턴을 만들 수도 있습니다. 고급 TileBrush 기능에 대한 자세한 내용은 TileBrush 개요를 참조하십시오.
예제: 비트맵 이미지로 개체 그리기
다음 예제에서는 ImageBrush를 사용하여 Canvas의 Background를 그립니다.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.BrushExamples.ImageBrushExample"
WindowTitle="ImageBrush Example"
Background="White">
<StackPanel>
<Canvas
Height="200" Width="300">
<Canvas.Background>
<ImageBrush ImageSource="sampleImages\Waterlilies.jpg" />
</Canvas.Background>
</Canvas>
</StackPanel>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
namespace Microsoft.Samples.BrushExamples
{
public class ImageBrushExample : Page
{
public ImageBrushExample()
{
StackPanel mainPanel = new StackPanel();
canvasBackgroundExample(mainPanel);
this.Content = mainPanel;
}
private void canvasBackgroundExample(Panel mainPanel)
{
BitmapImage theImage = new BitmapImage
(new Uri("sampleImages\\Waterlilies.jpg", UriKind.Relative));
ImageBrush myImageBrush = new ImageBrush(theImage);
Canvas myCanvas = new Canvas();
myCanvas.Width = 300;
myCanvas.Height = 200;
myCanvas.Background = myImageBrush;
mainPanel.Children.Add(myCanvas);
}
}
}
그림으로 영역 그리기
DrawingBrush를 사용하면 도형, 텍스트, 이미지 및 비디오로 영역을 그릴 수 있습니다. 그리기 브러시 내의 도형 자체를 단색, 그라데이션, 이미지 또는 다른 DrawingBrush로 그릴 수 있습니다. 다음 그림에서는 DrawingBrush의 몇 가지 용례를 보여 줍니다.
DrawingBrush로 그린 개체
.png)
DrawingBrush는 Drawing 개체로 영역을 그립니다. Drawing 개체는 도형, 비트맵, 비디오 또는 텍스트 줄과 같은 표시 가능한 콘텐츠를 나타냅니다. 그리기 형식이 다르면 나타내는 콘텐츠 형식도 다릅니다. 다음은 여러 그리기 개체 형식을 보여 주는 목록입니다.
GeometryDrawing - 도형을 그립니다.
ImageDrawing - 이미지를 그립니다.
GlyphRunDrawing - 텍스트를 그립니다.
VideoDrawing – 오디오나 비디오 파일을 재생합니다.
DrawingGroup - 기타 그림을 그립니다. 다른 그림들을 하나의 합성 그림으로 결합하려면 그리기 그룹을 사용합니다.
Drawing 개체에 대한 자세한 내용은 Drawing 개체 개요를 참조하십시오.
ImageBrush처럼 DrawingBrush도 Drawing을 늘여 출력 영역을 채웁니다. Stretch 속성을 기본 설정인 Fill에서 다른 설정으로 변경하여 이러한 동작을 재정의할 수 있습니다. 자세한 내용은 Stretch 속성을 참조하십시오.
예제: 그림으로 개체 그리기
다음 예제에서는 세 개의 타원 그림으로 개체를 그리는 방법을 보여 줍니다. GeometryDrawing은 타원을 나타내는 데 사용합니다.
<Button Content="A Button">
<Button.Background>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="LightBlue">
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry RadiusX="12.5" RadiusY="25" Center="25,50" />
<EllipseGeometry RadiusX="12.5" RadiusY="25" Center="50,50" />
<EllipseGeometry RadiusX="12.5" RadiusY="25" Center="75,50" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="1" Brush="Gray" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Button.Background>
</Button>
// Create a DrawingBrush.
DrawingBrush myDrawingBrush = new DrawingBrush();
// Create a drawing.
GeometryDrawing myGeometryDrawing = new GeometryDrawing();
myGeometryDrawing.Brush = Brushes.LightBlue;
myGeometryDrawing.Pen = new Pen(Brushes.Gray, 1);
GeometryGroup ellipses = new GeometryGroup();
ellipses.Children.Add(new EllipseGeometry(new Point(25,50), 12.5, 25));
ellipses.Children.Add(new EllipseGeometry(new Point(50,50), 12.5, 25));
ellipses.Children.Add(new EllipseGeometry(new Point(75,50), 12.5, 25));
myGeometryDrawing.Geometry = ellipses;
myDrawingBrush.Drawing = myGeometryDrawing;
Button myButton = new Button();
myButton.Content = "A Button";
// Use the DrawingBrush to paint the button's background.
myButton.Background = myDrawingBrush;
시각적 표시로 영역 그리기
모든 브러시 중에서 가장 강력하고 다재다능한 VisualBrush는 Visual로 영역을 그립니다. Visual은 여러 유용한 그래픽 형식의 부모로 사용되는 하위 수준 그래픽 형식입니다. 예를 들어 Window, FrameworkElement 및 Control 클래스는 모두 Visual 개체 형식입니다. VisualBrush를 사용하면 거의 모든 WPF(Windows Presentation Foundation) 그래픽 개체로 영역을 그릴 수 있습니다.
참고
VisualBrush는 Freezable 개체 형식이지만 해당 Visual 속성을 null 외의 값으로 설정하는 경우 고정할(읽기 전용으로 만들) 수 없습니다.
VisualBrush의 Visual 콘텐츠를 지정하는 방법은 다음과 같이 두 가지가 있습니다.
새 Visual을 만들고 이를 사용하여 VisualBrush의 Visual 속성을 설정합니다. 예제를 보려면 뒤에 나오는 예제: 시각적 표시로 개체 그리기 단원을 참조하십시오.
기존 Visual을 사용하여 대상 Visual의 복제 이미지를 만듭니다. 그런 다음 VisualBrush를 사용하여 반사와 확대 같은 재미있는 효과를 만들 수 있습니다. 예제를 보려면 예제: 반사 만들기 단원을 참조하십시오.
VisualBrush의 새 Visual을 만들 때 Visual이 UIElement(예: 패널 또는 컨트롤)인 경우 AutoLayoutContent 속성을 true로 설정하면 레이아웃 시스템이 UIElement와 해당 자식 요소에서 실행됩니다. 그러나 루트 UIElement는 기본적으로 나머지 시스템(스타일)과 분리되어 있으므로 외부 레이아웃이 이 경계로 스며들 수 없습니다. 따라서 UIElement는 해당 부모만 VisualBrush여서 그려지는 영역에 맞게 자체의 크기가 자동으로 조정되지 않으므로 크기를 명시적으로 지정해야 합니다. WPF(Windows Presentation Foundation)의 레이아웃에 대한 자세한 내용은 레이아웃 시스템을 참조하십시오.
ImageBrush 및 DrawingBrush처럼 VisualBrush도 콘텐츠를 늘여 출력 영역을 채웁니다. Stretch 속성을 기본 설정인 Fill에서 다른 설정으로 변경하여 이러한 동작을 재정의할 수 있습니다. 자세한 내용은 Stretch 속성을 참조하십시오.
예제: 시각적 표시로 개체 그리기
다음 예제에서는 여러 컨트롤과 패널을 사용하여 사각형을 그립니다.
<Rectangle Width="150" Height="150" Stroke="Black" Margin="5,0,5,0">
<Rectangle.Fill>
<VisualBrush>
<VisualBrush.Visual>
<StackPanel Background="White">
<Rectangle Width="25" Height="25" Fill="Red" Margin="2" />
<TextBlock FontSize="10pt" Margin="2">Hello, World!</TextBlock>
<Button Margin="2">A Button</Button>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
VisualBrush myVisualBrush = new VisualBrush();
// Create the visual brush's contents.
StackPanel myStackPanel = new StackPanel();
myStackPanel.Background = Brushes.White;
Rectangle redRectangle = new Rectangle();
redRectangle.Width = 25;
redRectangle.Height =25;
redRectangle.Fill = Brushes.Red;
redRectangle.Margin = new Thickness(2);
myStackPanel.Children.Add(redRectangle);
TextBlock someText = new TextBlock();
FontSizeConverter myFontSizeConverter = new FontSizeConverter();
someText.FontSize = (double)myFontSizeConverter.ConvertFrom("10pt");
someText.Text = "Hello, World!";
someText.Margin = new Thickness(2);
myStackPanel.Children.Add(someText);
Button aButton = new Button();
aButton.Content = "A Button";
aButton.Margin = new Thickness(2);
myStackPanel.Children.Add(aButton);
// Use myStackPanel as myVisualBrush's content.
myVisualBrush.Visual = myStackPanel;
// Create a rectangle to paint.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 150;
myRectangle.Height = 150;
myRectangle.Stroke = Brushes.Black;
myRectangle.Margin = new Thickness(5,0,5,0);
// Use myVisualBrush to paint myRectangle.
myRectangle.Fill = myVisualBrush;
예제: 반사 만들기
앞의 예제에서는 배경으로 사용할 새 Visual을 만드는 방법을 보여 주었습니다. VisualBrush를 사용하여 기존의 시각적 효과를 표시할 수도 있습니다. 이 기능을 사용하면 반사 및 확대와 같은 흥미로운 시각적 효과를 만들 수 있습니다. 다음 예제에서는 VisualBrush를 사용하여 여러 개의 요소가 포함된 Border의 리플렉션을 만듭니다. 다음 그림에서는 이 예제가 만들어내는 결과를 보여 줍니다.
반사된 표시 개체
.jpg)
using System;
using System.Windows;
using System.Windows.Data;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Effects;
using System.Windows.Media.Imaging;
using System.IO;
using System.Collections.ObjectModel;
using System.Windows.Shapes;
namespace SDKSample
{
public partial class ReflectionExample : Page
{
public ReflectionExample()
{
// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());
this.Background = Brushes.Black;
StackPanel myStackPanel = new StackPanel();
myStackPanel.Margin = new Thickness(50);
Border myReflectedBorder = new Border();
this.RegisterName("ReflectedVisual", myReflectedBorder);
// Create a gradient background for the border.
GradientStop firstStop = new GradientStop();
firstStop.Offset = 0.0;
Color firstStopColor = new Color();
firstStopColor.R = 204;
firstStopColor.G = 204;
firstStopColor.B = 255;
firstStopColor.A = 255;
firstStop.Color = firstStopColor;
GradientStop secondStop = new GradientStop();
secondStop.Offset = 1.0;
secondStop.Color = Colors.White;
GradientStopCollection myGradientStopCollection = new GradientStopCollection();
myGradientStopCollection.Add(firstStop);
myGradientStopCollection.Add(secondStop);
LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0, 0.5);
myLinearGradientBrush.EndPoint = new Point(1, 0.5);
myLinearGradientBrush.GradientStops = myGradientStopCollection;
myReflectedBorder.Background = myLinearGradientBrush;
// Add contents to the border.
StackPanel borderStackPanel = new StackPanel();
borderStackPanel.Orientation = Orientation.Horizontal;
borderStackPanel.Margin = new Thickness(10);
TextBlock myTextBlock = new TextBlock();
myTextBlock.TextWrapping = TextWrapping.Wrap;
myTextBlock.Width = 200;
myTextBlock.Text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit." +
" Suspendisse vel ante. Donec luctus tortor sit amet est." +
" Nullam pulvinar odio et wisi." +
" Pellentesque quis magna. Sed pellentesque." +
" Nulla euismod." +
"Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.";
borderStackPanel.Children.Add(myTextBlock);
StackPanel ellipseStackPanel = new StackPanel();
Ellipse ellipse1 = new Ellipse();
ellipse1.Margin = new Thickness(10);
ellipse1.Height = 50;
ellipse1.Width = 50;
ellipse1.Fill = Brushes.Black;
ellipseStackPanel.Children.Add(ellipse1);
Ellipse ellipse2 = new Ellipse();
ellipse2.Margin = new Thickness(10);
ellipse2.Height = 50;
ellipse2.Width = 50;
ellipse2.Fill = Brushes.Black;
ellipseStackPanel.Children.Add(ellipse2);
Ellipse ellipse3 = new Ellipse();
ellipse3.Margin = new Thickness(10);
ellipse3.Height = 50;
ellipse3.Width = 50;
ellipse3.Fill = Brushes.Black;
ellipseStackPanel.Children.Add(ellipse3);
borderStackPanel.Children.Add(ellipseStackPanel);
myReflectedBorder.Child = borderStackPanel;
// Create divider rectangle
Rectangle dividerRectangle = new Rectangle();
dividerRectangle.Height = 1;
dividerRectangle.Fill = Brushes.Gray;
dividerRectangle.HorizontalAlignment = HorizontalAlignment.Stretch;
// Create the object to contain the reflection.
Rectangle reflectionRectangle = new Rectangle();
// Bind the height of the rectangle to the border height.
Binding heightBinding = new Binding();
heightBinding.ElementName = "ReflectedVisual";
heightBinding.Path = new PropertyPath(Rectangle.HeightProperty);
BindingOperations.SetBinding(reflectionRectangle, Rectangle.HeightProperty, heightBinding);
// Bind the width of the rectangle to the border width.
Binding widthBinding = new Binding();
widthBinding.ElementName = "ReflectedVisual";
widthBinding.Path = new PropertyPath(Rectangle.WidthProperty);
BindingOperations.SetBinding(reflectionRectangle, Rectangle.WidthProperty, widthBinding);
// Creates the reflection.
VisualBrush myVisualBrush = new VisualBrush();
myVisualBrush.Opacity = 0.75;
myVisualBrush.Stretch = Stretch.None;
Binding reflectionBinding = new Binding();
reflectionBinding.ElementName = "ReflectedVisual";
BindingOperations.SetBinding(myVisualBrush, VisualBrush.VisualProperty, reflectionBinding);
ScaleTransform myScaleTransform = new ScaleTransform();
myScaleTransform.ScaleX = 1;
myScaleTransform.ScaleY = -1;
TranslateTransform myTranslateTransform = new TranslateTransform();
myTranslateTransform.Y = 1;
TransformGroup myTransformGroup = new TransformGroup();
myTransformGroup.Children.Add(myScaleTransform);
myTransformGroup.Children.Add(myTranslateTransform);
myVisualBrush.RelativeTransform = myTransformGroup;
reflectionRectangle.Fill = myVisualBrush;
// Create a gradient background for the border.
GradientStop firstStop2 = new GradientStop();
firstStop2.Offset = 0.0;
Color c1 = new Color();
c1.R = 0;
c1.G = 0;
c1.B = 0;
c1.A = 255;
firstStop2.Color = c1;
GradientStop secondStop2 = new GradientStop();
secondStop2.Offset = 0.5;
Color c2 = new Color();
c2.R = 0;
c2.G = 0;
c2.B = 0;
c2.A = 51;
firstStop2.Color = c2;
GradientStop thirdStop = new GradientStop();
thirdStop.Offset = 0.75;
Color c3 = new Color();
c3.R = 0;
c3.G = 0;
c3.B = 0;
c3.A = 0;
thirdStop.Color = c3;
GradientStopCollection myGradientStopCollection2 = new GradientStopCollection();
myGradientStopCollection2.Add(firstStop2);
myGradientStopCollection2.Add(secondStop2);
myGradientStopCollection2.Add(thirdStop);
LinearGradientBrush myLinearGradientBrush2 = new LinearGradientBrush();
myLinearGradientBrush2.StartPoint = new Point(0.5, 0);
myLinearGradientBrush2.EndPoint = new Point(0.5, 1);
myLinearGradientBrush2.GradientStops = myGradientStopCollection2;
reflectionRectangle.OpacityMask = myLinearGradientBrush2;
BlurBitmapEffect myBlurBitmapEffect = new BlurBitmapEffect();
myBlurBitmapEffect.Radius = 1.5;
reflectionRectangle.BitmapEffect = myBlurBitmapEffect;
myStackPanel.Children.Add(myReflectedBorder);
myStackPanel.Children.Add(dividerRectangle);
myStackPanel.Children.Add(reflectionRectangle);
this.Content = myStackPanel;
}
/*
<Rectangle
Height="{Binding Path=ActualHeight, ElementName=ReflectedVisual}"
Width="{Binding Path=ActualWidth, ElementName=ReflectedVisual}">
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF000000" Offset="0.0" />
<GradientStop Color="#33000000" Offset="0.5" />
<GradientStop Color="#00000000" Offset="0.75" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.BitmapEffect>
<BlurBitmapEffect Radius="1.5" />
</Rectangle.BitmapEffect>
</Rectangle>
</StackPanel>
</Page>
*/
}
}
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Background="Black">
<StackPanel Margin="50">
<!-- The object to reflect. -->
<Border Name="ReflectedVisual" Width="400">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0.0" Color="#CCCCFF" />
<GradientStop Offset="1.0" Color="White" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Orientation="Horizontal" Margin="10">
<TextBlock TextWrapping="Wrap" Width="200" Margin="10">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse vel ante. Donec luctus tortor sit amet est.
Nullam pulvinar odio et wisi.
Pellentesque quis magna. Sed pellentesque.
Nulla euismod.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</TextBlock>
<StackPanel>
<Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
<Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
<Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
</StackPanel>
</StackPanel>
</Border>
<Rectangle Height="1" Fill="Gray" HorizontalAlignment="Stretch" />
<!-- The object to contain the reflection.-->
<Rectangle
Height="{Binding Path=ActualHeight, ElementName=ReflectedVisual}"
Width="{Binding Path=ActualWidth, ElementName=ReflectedVisual}">
<Rectangle.Fill>
<!-- Creates the reflection. -->
<VisualBrush
Opacity="0.75" Stretch="None"
Visual="{Binding ElementName=ReflectedVisual}">
<VisualBrush.RelativeTransform>
<!-- Flip the reflection. -->
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1" />
<TranslateTransform Y="1" />
</TransformGroup>
</VisualBrush.RelativeTransform>
</VisualBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF000000" Offset="0.0" />
<GradientStop Color="#33000000" Offset="0.5" />
<GradientStop Color="#00000000" Offset="0.75" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.BitmapEffect>
<BlurBitmapEffect Radius="1.5" />
</Rectangle.BitmapEffect>
</Rectangle>
</StackPanel>
</Page>
화면의 부분을 확대하는 방법과 반사를 만드는 방법에 대한 다른 예제를 보려면 VisualBrush 샘플을 참조하십시오.
TileBrush 기능
ImageBrush, DrawingBrush 및 VisualBrush는 TileBrush 개체 형식입니다. TileBrush 개체를 사용하면 이미지, 그림 또는 시각적 효과로 영역을 그리는 방법을 다양한 방식으로 제어할 수 있습니다. 예를 들어 하나의 늘어난 이미지를 사용하여 영역을 그리는 대신 패턴을 만드는 일련의 이미지 바둑판을 사용하여 영역을 그릴 수 있습니다.
TileBrush의 세 가지 기본 구성 요소는 콘텐츠, 바둑판 및 출력 영역입니다.
하나의 바둑판을 포함하는 TileBrush의 구성 요소
.png)
여러 바둑판을 포함하는 TileBrush의 구성 요소
.png)
TileBrush 개체의 바둑판식 배열 기능에 대한 자세한 내용은 TileBrush 개요를 참조하십시오.
참고 항목
작업
개념
Windows Presentation Foundation 그래픽 렌더링 개요