[플래시처럼쉽게] 3.유저컨트롤만들기

유저컨트롤(UserControl) 이란?

기존에 제공되는 컨트롤이 아닌 사용자(개발자)가 임의로 만들어서 쓰는 컨트롤. 

새로운 형태의 개발이 가능하며, 꼭 필요한 기능만 구현하므로 용량이 상대적으로 적음. (개발자에 따라 달라질 수 있음) 

플래시의 (속성과 메소드가 없는)Sprite나 MovieClip으로 개발하는 것과 유사한 형태. 

그럼 만들어 볼까요..

1. 프로젝트를 생성합니다. (http://airdev.tistory.com/28 참고)

프로젝트 명은 'UserControlExam' 입니다.

2. 아래 이미지와 같이 순서대로 따라하세요. (프로젝트에서 마우스 오른쪽 버튼 클릭)

3. 아래 이미지 번호 순서대로 따라하세요.

4. 아래와 같이 Circle 컨트롤이 생성되었습니다. (Circle.xaml + Circle.xaml.cs)

5. Circle.xaml을 아래와 같이 수정합니다.

<Canvas xmlns="http://schemas.microsoft.com/client/2007"          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"          Width="100"         Height="100"         >  <Ellipse Width="100" Height="100" Fill="#FFE11D1D" Canvas.Left="2"/>  <Ellipse Width="80" Height="80" Fill="#FFEE6F1D" Canvas.Left="12" Canvas.Top="10"/>  <Ellipse Width="58" Height="58" Fill="#FFEEEC1D" Canvas.Left="23" Canvas.Top="21"/>  <Ellipse Width="36" Height="36" Fill="#FFACEE1D" Canvas.Left="34" Canvas.Top="32"/> </Canvas>

이런 원이 만들어 집니다.

6. 이제 이 컨트롤(Class)의 객체(Instance)를 생성해 보겠습니다. Page.xaml.cs를 아래와 같이 수정합니다.

using System; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace UserControlExam {     public partial class Page : Canvas     {         public void Page_Loaded(object o, EventArgs e)         {             // Required to initialize variables             InitializeComponent();             this.MouseLeftButtonDown += new MouseEventHandler(Page_MouseLeftButtonDown);         }         void Page_MouseLeftButtonDown(object sender, MouseEventArgs e)         {             Random rnd = new Random();//Random - 난수를 만드는 클래스             Circle circle = new Circle();             circle.SetValue(Canvas.LeftProperty, rnd.Next(640));             circle.SetValue(Canvas.TopProperty, rnd.Next(480));             circle.Opacity = rnd.NextDouble();             this.Children.Add(circle);         }     } }

7. F5 또는 Ctrl+F5를 눌러 실행해 보세요. 실버라이트 바탕을 클릭하면 원이 생성됩니다.

유저컨트롤을 어디에 써야 하는지 느낌이 오시나요? 아직 잘 모르겠다면 앞으로 만드는 모든 객체를 유저컨트롤로 만들어서 써보세요..
그럼 어떨때는 써야하고 어떨때는 안써도 되는지 이해가게 되실겁니다..(경험이 무언가를 이해하는데 가장 빠른 방법이죠^^ 공자님 말씀..)

수고하셨습니다.

usercontrolexam.zip

p.s. 마우스로 클릭하려니 번거로우시죠? 그럼 지난 강좌에 소개했던 엔터프레임(EnterFrame)을 이용해 보세요. 성공하셨다면 카페에 자랑해 보세요^^