[21기 김종현] WPF UserControl Class

[21기 김종현]

UserControl Class	작성자 : 김종현
	작성일 : 2011-04-17
주 제 : 간단하게 WPF에서 User Control을 사용하는 방법에 대한 설명

※ 이 문서는 .NET Framework 3.5 version 기반으로 설명되었습니다.

※ 네임스페이스 : System.Windows.Controls (UserControl)

※ 네임스페이스 : System.Windows.Threading (DispatcherTimer)

◎ UserControl

- WPF의 컨트롤에서는 다양한 콘텐츠, 스타일, 트리거 및 템플릿을 지원합니다. 이러한 기능을 통해 새 컨트롤을 만들지 않고도 요구 사항에 맞으면서 일관성 있는 환경을 만들 수 있는 경우가 많습니다. 새 컨트롤을 만들려는 경우 UserControl에서 파생되는 클래스를 만드는 방법이 가장 간단합니다. 이렇게 하면 컨트롤에서 템플릿이 지원되지 않으므로 복잡한 사용자 지정을 구현할 수 없습니다. 그러나 복잡한 사용자 지정을 지원할 필요가 없으며 응용 프로그램을 작성하는 방법과 비슷하게 컨트롤에 기존 요소를 추가하는 방법으로 컨트롤을 직접 작성하려는 경우에는 UserControl에서 파생하는 방법이 적합합니다. 컨트롤에 템플릿을 사용하려면 대신 Control에서 파생해야 합니다.

- 한 마디로 컨트롤을 만들 수 있는 간단한 방법을 제공합니다.

- 그럼 간단하게 Stopwatch 기능이 있는, UserControl를 만들어서 사용하는데 필요한 Class들과 사용 예제를 살펴 보도록 하겠습니다.

◎ DispatcherTimer Class 메서드

이름	설명
Equals	지정한 Object가 현재 Object와 같은지 여부를 확인합니다.
Finalize	GC에서 Object를 회수하기 전에 Object가 리소스를 해제하고 다른 정리 작업을 수행할 수 있게 합니다.
GetHashCode	특정 형식에 대한 해시 함수 역할을 합니다.
GetType	현재 인스턴스에 Type을 가져옵니다.
MemberwiseClone	현재 Object의 단순 복사본을 만듭니다.
Start	DispatcherTimer를 시작합니다.
Stop	DispatcherTimer를 중지합니다.
ToString	현재 Object를 나타내는 String을 반환합니다.

◎ DispatcherTimer Class 속성

이름	설명
Dispatcher	이 DispatcherTimer와 연결된 Dispatcher를 가져옵니다.
Interval	타이머 틱 사이의 시간 간격을 가져오거나 설정합니다.
IsEnabled	타이머가 실행 중인지 여부를 나타내는 값을 가져오거나 설정합니다.
Tag	Tick 이벤트 처리기로 전달되는 사용자 정의 데이터 개체를 가져오거나 설정합니다.

◎ DispatcherTimer Class 이벤트

이름	설명
Tick	타이머 간격이 경과되면 발생합니다.

그럼 이제 부터 위와 같은 Class들을 사용하는 UserControl을 사용 하는 예제에 대해서 설명하도록 하겠습니다.

새 프로젝트 만들기를 통해서 WPF 응용 프로그램을 하나 만들어 줍니다.

새 항목 추가 탭을 누른 뒤에 WPF 범주에서 사용자 정의 컨트롤을 추가해 줍니다. 사용자 정의 컨트롤과 사용자 지정 컨트롤은 서로 다른 것이니 주의 하시기 바랍니다. 영문 버전에서는 UserControl과 CustomControl로 구별 됩니다. 추가를 했다면 새로 추가한 UserControl에 밑의 XAML 코드와 C# 코드를 추가하여 기능을 가지고 있는 UserControl로 만들어 줍니다.

◎ Stopwatch 디자인을 위한 XAML 코드

<UserControl x:Class="Prac_UserControl.Timer"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Height="30" Width="175">

<StackPanel Orientation="Horizontal">

   <TextBlock Margin="2,2,2,2" Name="ElapsedTime" MinWidth="30"></TextBlock>

   <Button Click="StartTimer_Click">Start Timer</Button>

   <Button Click="StopTimer_Click">Stop Timer</Button>

  </StackPanel>

</UserControl>

StackPanel에 가로 방향으로 정렬하기 위해서 Orientaion 값을 Horizontal을 지정해줍니다. 적당한 위치에 TextBlock을 만들어 주는데 개체의 최소 너비 값으로 30정도를 주고 시간의 경과를 보여준다는 의미에서 ElapsedTime이라는 이름으로 선언해 주었지만, 정확히 하면 임의의 이름값을 주면 됩니다. Stopwatch 기능이 있어야 하니깐 시작 버튼과 멈춤 버튼을 만들어서 이벤트 생성기를 이용해서 추가해 줍니다. 이와 같이 디자인 배치를 해주고 C#코드를 작성해서 UserControl에 stopwatch의 기능을 넣어 줍니다.

public partial class Timer : UserControl

{

   private int seconds = 0;

   private DispatcherTimer dt = new DispatcherTimer();

   public Timer()

{

   InitializeComponent();

      dt.Interval = new TimeSpan(0, 0, 1);

      dt.Tick += new EventHandler(t_Tick);

}

second를 0으로 초기화 해주고, DispatcherTimer 인스턴스를 생성해 줍니다. Timer 생성자에 시간 간격을 의미하는 Interval을 TimeSpan구조체를 이용해서 1초로 줍니다. (0,0,1)은 시,분,초를 의미합니다. 타이머 간격을 EventHandler를 이용해서 컨트롤해 줍니다

void t_Tick(object sender, EventArgs e)

   {

      seconds = seconds + 1;

      ElapsedTime.Text = seconds.ToString();

   }

초는 1씩 증가하고 그 변화하는 모습을 ElapsedTime TextBlock 창에 띄어 주게 합니다. 이름이 틀릴 경우에 오류가 발생되니 이름은 정확하게 입력해주기 바랍니다.

private void StartTimer_Click(object sender, RoutedEventArgs e)

   {

       dt.Start();

   }

   private void StopTimer_Click(object sender, RoutedEventArgs e)

   {

       dt.Stop();

   }

}

 Button에 대한 명령은 쉽습니다. 시작과 중지를 의미하는 Start와 Stop을 호출해서 사용하면 됩니다. 위와 같은 과정을 거치면 Stopwatch 기능이 있는 Timer를 만들 수 있습니다.

◎ Stopwatch UserControl을 가져와서 사용하는 XAML코드

<Window x:Class="Prac_UserControl.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:uc1="clr-namespace:Prac_UserControl"

    Title="Window1" Height="300" Width="300">

    <Grid>

        <uc1:Timer></uc1:Timer>

    </Grid>

</Window>

위에 만들어진 사용자 정의 컨트롤을 가지고 와서 XAML에서 사용하는 방법입니다. 가장 먼저 만들었던 WPF 응용에서 UserControl1을 의미하는 uc1에 우리가 추가하고자 하는 UserControl을 찾아서 지정해줍니다. 그 다음에 uc1에 만들어 놓은 Timer를 추가해주면 디자인 창에 이전에 만들어 놨던 UserControl의 형태가 추가되는 것을 확인 할 수 있을 겁니다.

UserControl 사용 예제 : Prac_UserControl.exe