Custom Control 만들기 Part3 - Packman slider

Custom Control 만들기 Part2에 이어서 컨트롤 템플릿을 추가하는 방법에 대해서 알아보자

Part2에서 사용한 소스에서 시작하도록 하겠다.

 

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

Templating 이후 내용 참고

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. 추가 Template

Part1에서 CustomControl을 이용해서 컨트롤을 만들게되면 특징 중에 하나가 단일 style/template를 이용해서 컨트롤의 디자인을 변경할 수 있다고 이야기 했었다. 그래서 Part2와 동일한 SimpleSlider에 Template만 변경해서 전혀 다른 컨트롤 처럼 보이도록 만들어 보자.

 

오늘도 디자인 작업은 블랜드로 진행한다.

 

MainPage.xaml에서 SimpleSlider를 마우스 오른쪽으로 클릭해서 Edit Template -> Edit Copy...를 선택

 

 

스타일 이름은 PacmanSliderStyle로 변경하고 OK를 클릭한다. 

 

 

왼쪽을 보면 방금 입력한 스타일 이름이 보이고, 빨간색 테두리에는 현재 템플릿 수정 모드라는 것을 표시해 준다.

 

 

1) 우선 전체적으로 높이가 너무 작으니 모든 높이를 20으로 변경한다.(각 컨트롤을 클릭해서 Height 프로퍼티를 확인하면서 변경하거나 XAML 소스를 직접 수정)

2) Border를 선택해서 Background 컬러를 Transparent로 변경한다.

3) Border와 Canvas 사이에 Line을 추가한다.** Line은 컨트롤 목록에 없으므로 직접 XAML 코드를 입력해서 추가한다

4) Line의 속성 값을 변경한다.

 

 

<!--X2의 크기는 적당히 입력한다.-->

<Line StrokeThickness="10" Stroke="Blue" StrokeDashArray="1" VerticalAlignment="Center" Margin="0,4,0,0" X2="1000"/>

 

5) PART_Rectangle을 선택하고 Fill을 White로 변경한다.

6) PART_Thumb를 선택하고 마우스 오른쪽 버튼을 눌러서 Edit Template -> Edit a Copy...를 선택해서 스타일 이름을 PackmanThumbStyle로 변경하고 OK를 누른다.

 

 

7) 컨트롤 템플릿에 포함되어있는 VisualState는 삭제는 하지 말고 내용만 지운다. 그리고 Image 컨트롤을 추가한 후 팩맨 이미지를 연결한다. Packman 이미지는 png 파일을 구해서 사용하면 된다.

 

 

 

8) Thumb 최종 소스 - VisualState를 삭제하지 않은 것은 나중에 사용할 수 있기 때문이다. 음음 팩맨이 이동하면서 입도 움직이면 좋을 것 같아서..쿨럭..

 

<ControlTemplate TargetType="Thumb">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="PointerOver"/>
                <VisualState x:Name="Pressed"/>
                <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Image Height="30" Source="Assets/Pacman_HD.png"/>
    </Grid>
</ControlTemplate>

 

3. 실행 모습

 

 

 

 

4. 소스

 

CustomControlSample_part3.zip

 

 

5. 개선하면 좋을 것 같은 아이디어..

움직일 때 입도 움직였으면.. 비활성 모드가 되면 팩맨이 잠자는 모습으로 변했으면..ㅋㅋㅋ