[C#] WPF : Graphic

안녕하세요!

이번 글에서는 WPF 프로젝트에서 그래픽 요소를 다루는 방법에 대해 알아보겠습니다.

 

WPF는 MFC의 GDI+와 다르게 벡터기반의 그래픽 렌더링을 사용하여 다양한 해상도에 대응할 수 있고, 그래픽 처리를 GPU에게 위임하여 성능을 향상시켜 풍부한 애니메이션 효과를 지원합니다.

---

프로젝트 생성

• WPF프로젝트를 생성해 줍니다.
• 프로젝트 이름은 Graphic으로 설정해 주었습니다.

 

프로젝트 생성

 

---

 

MainWindow.xaml파일 수정

• 그래픽요소 예제의 동작확인을 위해 MainWindow.xaml파일을 아래와 같이 수정해 줍니다.

 

<Window x:Class="Graphic.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Graphic"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Content="애니메이션" Width="100" Height="30" Click="Button_Click"/>
            <Ellipse x:Name="AnimatedEllipse" Width="50" Height="50" Fill="Blue" Margin="0,20,0,0"/>
        </StackPanel>
    </Grid>
</Window>

• 클릭 시 애니메이션을 출력 할 버튼을 추가하고 클릭 이벤트를 지정해 주었습니다.
• Ellipse를 사용하여 화면에 파란색 원을 출력하도록 코드를 작성하였습니다.

 

 

MainWindow디자인

 

---

 

비하인드코드 수정

• xaml에서 추가한 요소들을 핸들링하기 위하여 비하인드 코드를 아래와 같이 수정해 줍니다.

 

namespace Graphic
{
	/// <summary>
	/// Interaction logic for MainWindow.xaml
	/// </summary>
	public partial class MainWindow : Window
	{
		public MainWindow()
		{
			InitializeComponent();
		}

		private void Button_Click(object sender, RoutedEventArgs e)
		{
			AnimateEllipse();
		}

		private void AnimateEllipse()
		{
			DoubleAnimation animation = new DoubleAnimation
			{
				From = 50,
				To = 150,
				Duration = TimeSpan.FromSeconds(1),
				AutoReverse = true
			};

			AnimatedEllipse.BeginAnimation(WidthProperty, animation);
			AnimatedEllipse.BeginAnimation(HeightProperty, animation);
		}
	}
}

•  50부터 150까지 1초동안 증가하는 DoubleAnimation객체를 생성 후 AutoReverse를 true로 지정해 역재생을 수행하도록 하였습니다.
• AnimatedEllipse객체의 BeginAnimation매서드를 호출하여 생성한 가로와 세로 크기를 DoubleAnimation객체의 시나리오 대로 조절합니다.
• 버튼 클릭 이벤트에 작성한 매서드를 호출하도록 하였습니다.

 

---

 

빌드

 

빌드

• 애니메이션 버튼을 누르면 원의 크기가 1초동안 커졌다가 다시 1초 동안 줄어드는 것을 확인할 수 있습니다.

 

---

 

여기까지 WPF의 그래픽요소를 핸들링 하는 예제를 실습해 보았습니다.

MFC만 다루다가 WPF를 다뤄보니 너무 빠르고 편하게 개발을 할 수 있네요.

감사합니다!