[WPF] Shapes, Brushes and Transforms

1. Shapes (도형)

WPF는 기본적인 도형을 내장하고 있어 쉽게 UI에 벡터 기반 그래픽을 그릴 수 있다

대표적인 도형으로는 Rectangle, Ellipse, Line, Polyline, Polygon, Path 등이 존재함

<Canvas>
  <Rectangle Width="100" Height="60" Fill="LightBlue" Stroke="DarkBlue" StrokeThickness="2"/>
  <Ellipse Width="60" Height="60" Fill="LightCoral" Canvas.Left="120"/>
</Canvas>

2. Brushes

UI 요소를 색상이나 이미지, 그래디언트 등으로 채우는 방식. WPF에서 제공하는 주요 브러시 유형은 다음과 같다.

 

• SolidColorBrush: 단색 채우기
• LinearGradientBrush: 선형 그라데이션
• RadialGradientBrush: 방사형 그라데이션
• ImageBrush: 이미지 채우기
• DrawingBrush: 도형 기반 브러시, 타일링 등에 활용
• VisualBrush: 다른 시각 요소를 캡처해 채우기

 

<Rectangle Width="100" Height="100" Canvas.Top="70">
  <Rectangle.Fill>
    <LinearGradientBrush>
      <GradientStop Offset="0" Color="Yellow"/>
      <GradientStop Offset="1" Color="Orange"/>
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

3. Transforms

도형 또는 UI 요소에 기하학적 변형(Transform) 효과를 적용해 회전, 이동, 확대/축소, 기울기 등을 구현할 수 있다.

 

• TranslateTransform (이동)
• RotateTransform (회전)
• ScaleTransform (확대/축소)
• SkewTransform (기울이기)
• TransformGroup (여러 변형 조합)

<Rectangle Width="80" Height="40" Fill="LightGreen" Canvas.Left="240">
  <Rectangle.RenderTransform>
    <TransformGroup>
      <RotateTransform Angle="30"/>
      <TranslateTransform X="20" Y="50"/>
    </TransformGroup>
  </Rectangle.RenderTransform>
</Rectangle>

 

카테고리	설명	예시
Shapes	벡터 기반 기본 도형	Rectangle, Ellipse 등
Brushes	채우기 방식 지정 (색, 그라디언트, 이미지 등)	SolidColor, Gradient 등 (Microsoft Learn)
Transforms	위치, 회전, 크기 등 기하학적 변형 적용	Rotate, Scale, TransformGroup 등

 

* Viewbox

1) 기본 개념

 

• 목적: UI를 비율 유지하면서 자동으로 확대/축소
• 사용 위치: 주로 이미지, 그림(Shape), 복잡한 UI 묶음을 스케일 조정할 때
• 자식 요소가 하나만 가능
• Stretch 속성으로 크기 조정 방식 제어
• StretchDirection 속성으로 확대/축소 방향 제어

 

2) 주요 속성

속성	설명
Stretch	확대/축소 비율 방식 선택 (None, Fill, Uniform, UniformToFill) None: 크기 조정 없음 Fill: 부모 컨테이너 크기에 맞게 늘리지만 비율 무시 Uniform: 비율 유지하며 부모에 맞춤 (가장 많이 사용) UniformToFill: 비율 유지하며 부모를 가득 채움 (잘릴 수 있음)
StretchDirection	확대/축소 방향 (Both, UpOnly, DownOnly)

 

예시 : 창 크기를 줄이거나 늘려도 안의 TextBlock과 Rectangle이 비율을 유지하면서 같이 커졌다 작아짐.

<Window x:Class="ViewboxExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        Title="Viewbox Demo" Height="300" Width="300">

    <Grid>
        <Viewbox Stretch="Uniform" StretchDirection="Both">
            <StackPanel>
                <TextBlock Text="Hello WPF" FontSize="20" Foreground="DarkBlue"/>
                <Rectangle Width="100" Height="50" Fill="Orange" Stroke="Black"/>
            </StackPanel>
        </Viewbox>
    </Grid>
</Window>

언제 쓰면 좋은가?

 

• 반응형 UI: 화면 크기에 맞춰 전체 UI 크기 조정
• 미리보기 화면: 프린트나 PDF 같은 결과물 미리보기
• 고정 비율 UI: 게임 보드, 차트, 도형 등 비율 유지가 중요한 경우
• 이미지 확대/축소: 로고, 아이콘, 인포그래픽

 

주의사항

 

• Viewbox 안의 글자(Font)도 스케일링되므로, 가독성에 영향을 줄 수 있음
• 복잡한 UI를 Viewbox로 전체 스케일하면 DPI 변화나 비율 왜곡에 주의
• ScrollViewer와 함께 쓰면 의도치 않은 스크롤/크기 문제가 생길 수 있음

 

 

* Transparency (투명도)

UI 요소의 불투명도(opacity)나 투명 색상(transparent color)을 지정해서, 아래 배경이 비치도록 만드는 기능

1) Opacity 속성

 

• 모든 UIElement가 가지고 있는 전역 투명도 속성.
• 값 범위: 0.0(완전 투명) ~ 1.0(완전 불투명).
• 요소 전체에 동일하게 적용 (자식 요소 포함).

<Rectangle Width="100" Height="100" Fill="Blue" Opacity="0.5"/>

 

2) OpacityMask 속성

 

• 요소의 특정 영역만 투명하게 만드는 기능.
• Brush(Solid, Gradient, Image 등)를 마스크로 사용.
• Brush의 흰색 부분은 완전 불투명, 검은색 부분은 완전 투명, 중간색은 반투명.

 

<Rectangle Width="200" Height="100" Fill="Blue">
    <Rectangle.OpacityMask>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="Black" Offset="0.0"/>
            <GradientStop Color="Transparent" Offset="1.0"/>
        </LinearGradientBrush>
    </Rectangle.OpacityMask>
</Rectangle>

3) Color의 알파 채널

 

• WPF의 Color는 ARGB 형식: Alpha(투명도) + Red + Green + Blue
• Alpha: 0(투명) ~ 255(불투명)
• #AARRGGBB 형식으로 표현

 

<Rectangle Width="100" Height="100" Fill="#80FF0000"/>

4) 투명한 Window

 

• WPF Window를 전체 또는 부분적으로 투명하게 만들 수 있음.
• AllowsTransparency="True" + WindowStyle="None"을 사용.
• 주로 커스텀 크롬 UI, HUD, 오버레이 UI 제작에 사용.

 

<Window x:Class="TransparentWindow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        AllowsTransparency="True" WindowStyle="None"
        Background="Transparent" Height="300" Width="300">
    <Ellipse Fill="#80FF0000"/>
</Window>

5) 주의사항

 

• AllowsTransparency="True"를 사용하면 성능이 떨어질 수 있음(특히 복잡한 UI에서).
• 투명도 처리는 GPU 가속이 필요하므로, 낮은 사양 PC에서는 프레임 저하 발생 가능.
• 반투명 텍스트는 가독성이 떨어질 수 있음