C# WPF brush

WPF에서는 여러 종류의 Brush가 있으며, 이들 중에서 가장 일반적으로 사용되는 것은 SolidColorBrush입니다. 이번 글에서는 C# WPF Brush의 종류와 사용법에 대해 살펴보겠습니다.

1. SolidColorBrush

SolidColorBrush는 색상을 나타내기 위한 Brush입니다. SolidColorBrush는 Color 속성을 통해 색상을 지정할 수 있습니다. 예를 들어, 다음과 같이 빨간색을 지정할 수 있습니다.

<Rectangle Fill="Red" />

위 예제에서 Fill 속성에 Red를 지정함으로써 Rectangle의 배경색을 빨간색으로 설정할 수 있습니다. SolidColorBrush를 사용하여 더욱 구체적인 색상을 지정하려면 다음과 같이 코드를 작성할 수 있습니다.

<SolidColorBrush x:Key="MyBrush" Color="Blue" />

위 예제에서는 MyBrush라는 이름으로 SolidColorBrush를 정의하고, Color 속성을 통해 파란색을 지정하였습니다. 이제 다른 UI 요소에서 이러한 브러시를 사용할 수 있습니다.

<Rectangle Fill="{StaticResource MyBrush}" />

위 예제에서는 MyBrush라는 정적 리소스를 사용하여 Rectangle의 배경색을 파란색으로 지정합니다.

2. GradientBrush

GradientBrush는 그라데이션 효과를 나타내는 브러시입니다. GradientBrus는 LinearGradientBrush, RadialGradientBrush 등의 파생 클래스가 있습니다. LinearGradientBrush는 선형 그라데이션을 나타내며, StartPoint와 EndPoint 속성을 사용하여 그라데이션 방향을 지정할 수 있습니다. 예를 들어, 다음과 같이 코드를 작성하여 선형 그라데이션을 만들 수 있습니다.

<LinearGradientBrush x:Key="MyGradientBrush">
    <GradientStop Color="Red" Offset="0.0" />
    <GradientStop Color="Blue" Offset="0.5" />
    <GradientStop Color="Green" Offset="1.0" />
</LinearGradientBrush>

위 예제에서는 MyGradientBrush라는 이름으로 LinearGradientBrush를 정의하고, GradientStop을 사용하여 그라데이션의 시작 색상, 중간 색상, 끝 색상을 지정합니다. 이제 다른 UI 요소에서 이러한 브러시를 사용할 수 있습니다.

<Rectangle Fill="{StaticResource MyGradientBrush}" />

위 예제에서는 MyGradientBrush라는 정적 리소스를 사용하여 Rectangle의 배경색을 선형 그라데이션으로 지정합니다.

각 offset을 설정하는 방법에 따라 그라데이션 방향을 설정할 수 있습니다.

※참조. https://learn.microsoft.com/ko-kr/dotnet/desktop/wpf/graphics-multimedia/how-to-paint-an-area-with-a-linear-gradient?view=netframeworkdesktop-4.8

방법: 선형 그라데이션으로 영역 그리기 - WPF .NET Framework

 

3. TileBrush

TileBrush는 이미지를 반복하여 나타내는 브러시입니다. 이미지를 원하는 크기로 자르거나 늘리는 대신에 이미지를 반복하는 방식으로 채워지게 됩니다.

예를 들어, 100x100 픽셀 크기의 이미지가 있고, 이를 400x400 픽셀 크기의 사각형 영역에 채우고 싶다면, TileBrush를 사용하여 이를 쉽게 구현할 수 있습니다. TileBrush는 이미지를 반복하는 방식으로 영역을 채우기 때문에, 4x4 크기의 이미지를 100x100 크기의 영역에 반복하면 쉽게 400x400 영역을 채울 수 있습니다.

다음은 TileBrush 예제 코드입니다. 이 예제에서는 TileBrush를 사용하여 배경 이미지를 채우고 있습니다.

<Window x:Class="TileBrushExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TileBrush Example" Height="400" Width="400">
    <Window.Background>
        <ImageBrush ImageSource="image.jpg" TileMode="Tile" Viewport="0,0,50,50" ViewportUnits="Absolute"/>
    </Window.Background>
</Window>

위 코드에서 ImageBrush의 ImageSource 속성으로 이미지 파일 경로를 지정하고, TileMode 속성으로 Tile 값을 설정하여 이미지를 반복하도록 지정하고 있습니다. 또한 Viewport 속성과 ViewportUnits 속성을 사용하여, 이미지를 반복할 때 어떤 부분을 반복할지 지정하고 있습니다. 이 예제에서는 0,0부터 시작하는 50x50 크기의 영역을 반복하도록 설정하고 있습니다.

또한 ImageBrush는 이미지를 나타내기 위한 브러시입니다. ImageBrush는 ImageSource 속성을 사용하여 이미지를 지정할 수 있습니다.

<Grid>
    <Grid.Background>
        <ImageBrush ImageSource="image.jpg"/>
    </Grid.Background>
    <TextBlock Text="Hello, World!" FontSize="24"/>
</Grid>

위 코드에서는 Grid의 배경으로 ImageBrush를 사용하고 있습니다. ImageBrush의 ImageSource 속성에 이미지 파일의 경로를 지정하여 해당 이미지를 나타내고 있습니다. 그리고 TextBlock을 추가하여 겹쳐진 이미지 위에 텍스트를 나타내고 있습니다.

위 코드를 실행하면, 지정한 이미지가 Grid의 배경으로 설정되어 나타나고, 위에 텍스트가 겹쳐져 보입니다.

이와 같이 ImageBrush를 사용하여 이미지를 나타낼 수 있습니다.