Custom Control 만들기 Part2

Custom Control 만들기 Part1에 이어서 Part2를 진행하는데, 처음부터 다시 만들기는 거시기하니 지난 소스부터 이어서 진행 하도록 하겠다. -0-

1. 참고 포스트(이전 Part1 1-2 참고 포스트)

사이가 춤추고 있는 이미지 다음부터 진행한다.

Building Custom Controls for Windows 8 Store apps

http://blogs.u2u.be/diederik/post/2012/12/06/Building-Custom-Controls-for-Windows-8-Store-apps.aspx

2. VisualState를 이용하기

참고 포스트에서는 IsEnabled 프로퍼티에 따라서 컨트롤에 변화를 주고 있는데 이걸 만들어 보자.

반드시 블랜드를 이용해서 이전 소스를 열자!!

난 블랜드가 싫어!! 코드로 모든 작업을 다 할 수 있어~라고 하는 분은 그냥 Visual Studio에서 작업해도 상관 없다.

아래 화면에서 Resources 탭을 선택하고, SimpleSlider default 옆에 회색 버튼을 클릭해서 편집 모드로 들어간다.

파렛트를 클릭 후에 Edit Template -> Edit Current를 선택해서 Template 편집 화면으로 들어간다.

그리고 왼쪽에 States 탭을 클릭한다.

우리는 NormalState와 DisabledState 2개의 상태를 만들어야 하는데, 우선은 VisualStateGroup을 한개 추가해준다. 노란색 테두리 있는 곳을 클릭하면된다. 그리고 State추가는 빨간색 테두리 부분을 클릭하면 추가할 수 있다. State를 추가한 후 이름을 변경해 준다. 여기까지하면 작업 준비 완료!

먼저 DisabledState를 선택한 후 PART_Thumb을 클릭하고 Property 탭으로 넘어간다.

DisabledState에서는 Thumb의 배경색을 LightGray로 변경하고, Rectangle의 채우기 색을 DimGray로 변경해야한다.

이때 반드시 오른쪽 상단에 빨간색 녹화(?) 상태에서 프로퍼티를 변경해준다.

프로퍼티의 값을 변경 후 Show Timeline 버튼을 누른 후 각 컨트롤을 펼쳐보면 컨트롤의 어떤 프로퍼티에 변경 사항이 생겼는지 확인 할 수 있다.

이제 NormalState와 DisabledState를 번갈아가며 클릭해 보면 각 상태에 따라서 색이 어떻게 변경되는지를 알 수 있다. 여기서는 컨트롤의 색만 변경을 했지만, 컨트롤의 프로퍼티나 에니메이션 기능을 넣을 수도 있다.

3. SimpleSlider.cs 코드 작업

        /// <summary>
        /// 템플릿이 적용될 때 실행
        /// </summary>
        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            //이름으로 각 파트 컨트롤 땡김
            _thumb = GetTemplateChild(ThumbPartName) as Thumb;
            if (_thumb == null) return;
            //이벤트 연결
            _thumb.DragDelta += _thumb_DragDelta;
            _rectangle = GetTemplateChild(RectanglePartName) as Rectangle;
            //사이즈 체인지 이벤트 연결
            SizeChanged += SimpleSlider_SizeChanged;
            //IsEnabled 체인지 이벤트 연결
            IsEnabledChanged += SimpleSlider_IsEnabledChanged;
        }
        /// <summary>
        /// IsEnabed 변경 이벤트 처리
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void SimpleSlider_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            VisualStateManager.GoToState(this, IsEnabled ? "NormalState" : "DisabledState", true);
        }

위에 굵은 글씨 부분을 SimpleSlider.cs에 추가하면 된다.

4. MainPage.xaml 수정

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="115*" />
        </Grid.RowDefinitions>
        <TextBlock Text="CustomControl Sample" Style="{StaticResource TitleTextBlockStyle}" />
        <StackPanel VerticalAlignment="Center" Grid.Row="1" Margin="10,0">
            <local:SimpleSlider x:Name="simpleSlider" Height="20" Maximum="100" Value="50" />
            <TextBlock Text="{Binding Value, ElementName=simpleSlider}" />
            <ToggleSwitch Header="SimpleSlider"
                          IsOn="{Binding IsEnabled, ElementName=simpleSlider, Mode=TwoWay}" />
        </StackPanel>
    </Grid>

5. 실행 결과

6. 소스

CustomControlSample_part2.zip