[C#/WPF] ControlTemplate 엘리먼트 : ToggleButton 엘리먼트를 정의해 재생 버튼 만들기

■ ControlTemplate 엘리먼트를 사용해 재생 버튼을 만드는 ToggleButton 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip

0.01MB

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    Background="#2a2a2a"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <!-- 디폴트 재생 버튼 이미지 브러시 리소스 -->
        <Geometry x:Key="DefaultPlayButtonGeometry1Key">
F     0     M     27371 27371 z     M     0     0     z
M     10184 9742  L     10184 17618 C     10184 18325 11138
19113 12135 18604 12230 18555 12294 18508 12384 18458 L
15650 16538 C     15820 16432 15979 16349 16149 16247 16317
16146 16472 16051 16645 15954 16818 15857 16976 15763 17142
15661 L     18652 14775 C     19403 14313 19460 13444 19009
12936 18845 12751 18677 12647 18474 12526 L     14866 10395
C     14659 10275 14470 10167 14269 10044 13866 9797  12119
8736  11837 8657  10975 8415  10183 9087  10183 9743  z
        </Geometry>
        <Geometry x:Key="DefaultPlayButtonGeometry2Key">
F     0     M     27371 27371 z     M     0     0     z
M     13685 0     C     21243 0     27370 6127  27370 13685
27370 21243 21243 27370 13685 27370 6127  27370 0     21243
0     13685 0     6127  6127  0     13685 0     z     M
13685 2595  C     19810 2595  24775 7560  24775 13685 24775
19810 19810 24775 13685 24775 7560  24775 2595  19810 2595
13685 2595  7560  7560  2595  13685 2595  z
        </Geometry>
        <DrawingGroup x:Key="DefaultPlayButtonDrawingGroupKey"
            ClipGeometry="M0,0 V27371 H27371 V0 H0 Z">
            <DrawingGroup Opacity="1">
                <DrawingGroup Opacity="1">
                    <GeometryDrawing Brush="#ffffffff" Geometry="{StaticResource DefaultPlayButtonGeometry1Key}" />
                    <GeometryDrawing Brush="#ff37abd2" Geometry="{StaticResource DefaultPlayButtonGeometry2Key}" />
                </DrawingGroup>
            </DrawingGroup>
        </DrawingGroup>
        <DrawingImage x:Key="DefaultPlayButtonDrawingImageKey"
            Drawing="{StaticResource DefaultPlayButtonDrawingGroupKey}" />
        <ImageBrush x:Key="DefaultPlayButtonImageBrushKey"
            Stretch="Uniform"
            ImageSource="{StaticResource DefaultPlayButtonDrawingImageKey}" />
        <!-- 마우스 OVER 재생 버튼 이미지 브러시 리소스-->
        <Geometry x:Key="MouseOverPlayButtonGeometry1Key">
F     0     M     27795 27795z M     0     0     z     M
10342 9893  L     10342 17891  C     10342 18609 11310 19409
12324 18892 12420 18843 12485  18795 12577 18744 L     15894
16794 C     16067 16686 16228  16602 16401 16499 16572 16397
16729 16300 16905 16201 17080  16102 17241 16007 17410 15904
L     18943 15004 C     19705  14535 19763 13652 19306 13137
19139 12949 18969 12844 18763  12721 L     15099 10557 C
14889 10435 14697 10325 14493  10200 14084 9949  12310 8872
12023 8792  11147 8546  10343  9229  10343 9895  z
        </Geometry>
        <Geometry x:Key="MouseOverPlayButtonGeometry2Key">
F     0     M     27795 27795z M     0     0     z     M
13898 0     C     21573 0      27796 6222  27796 13898 27796
21573 21574 27796 13898 27796  6223  27796 0     21574 0
13898 0     6223  6222  0      13898 0     z     M     13898
2636  C     20118 2636  25160  7678  25160 13898 25160 20118
20118 25160 13898 25160 7678   25160 2636  20118 2636  13898
2636  7678  7678  2636  13898  2636  z
        </Geometry>
        <DrawingGroup x:Key="MouseOverPlayButtonDrawingGroupKey"
            ClipGeometry="M0,0 V27795 H27795 V0 H0 Z">
            <DrawingGroup Opacity="1">
                <DrawingGroup Opacity="1">
                    <GeometryDrawing Brush="#ff37abd2" Geometry="{StaticResource MouseOverPlayButtonGeometry1Key}" />
                    <GeometryDrawing Brush="#ffffffff" Geometry="{StaticResource MouseOverPlayButtonGeometry2Key}" />
                </DrawingGroup>
            </DrawingGroup>
        </DrawingGroup>
        <DrawingImage x:Key="MouseOverPlayButtonDrawingImageKey"
            Drawing="{StaticResource MouseOverPlayButtonDrawingGroupKey}" />
        <ImageBrush x:Key="MouseOverPlayButtonImageBrushKey"
            Stretch="Uniform"
            ImageSource="{StaticResource MouseOverPlayButtonDrawingImageKey}" />
        <!--디폴트 중단 버튼 이미지 브러시 리소스 -->
        <Geometry x:Key="DefaultStopButtonGeometry1Key">
F     0     M     35045 35045 z     M 0     0     z
M     11017 12690 L     11017 22354 C 11017 23272 11771
24027 12690 24027 L     22354 24027 C 23272 24027 24027
23273 24027 22354 L     24027 12690 C 24027 11772 23273
11017 22354 11017 L     12690 11017 C 11772 11017 11017
11771 11017 12690 z
        </Geometry>
        <Geometry x:Key="DefaultStopButtonGeometry2Key">
F     0     M     35045 35045 z     M     0     0     z
M     17522 0     C     27199 0     35045 7845  35045 17522
35045 27199 27200 35045 17522 35045 7845  35045 0     27200
0     17522 0     7845  7845  0     17522 0     z     M
17522 3323  C     25365 3323  31722 9680  31722 17522 31722
25365 25365 31722 17522 31722 9680  31722 3323  25365 3323
17522 3323  9680  9680  3323  17522 3323  z
        </Geometry>
        <DrawingGroup x:Key="DefaultStopButtonDrawingGroupKey"
            ClipGeometry="M0,0 V35045 H35045 V0 H0 Z">
            <DrawingGroup Opacity="1">
                <DrawingGroup Opacity="1">
                    <GeometryDrawing Brush="#ffffffff" Geometry="{StaticResource DefaultStopButtonGeometry1Key}" />
                    <GeometryDrawing Brush="#ff37abd2" Geometry="{StaticResource DefaultStopButtonGeometry2Key}" />
                </DrawingGroup>
            </DrawingGroup>
        </DrawingGroup>
        <DrawingImage x:Key="DefaultStopButtonDrawingImageKey"
            Drawing="{StaticResource DefaultStopButtonDrawingGroupKey}" />
        <ImageBrush x:Key="DefaultStopButtonImageBrushKey"
            Stretch="Uniform"
            ImageSource="{StaticResource DefaultStopButtonDrawingImageKey}" />
        <!-- 재생 토글 버튼 스타일 -->
        <Style x:Key="PlayToggleButtonStyleKey" TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border x:Name="border"
                            Background="{StaticResource DefaultPlayButtonImageBrushKey}">
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter
                                    TargetName="border"
                                    Property="Background"
                                    Value="{StaticResource MouseOverPlayButtonImageBrushKey}" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter
                                    TargetName="border"
                                    Property="Background"
                                    Value="{StaticResource DefaultStopButtonImageBrushKey}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <ToggleButton Name="startButton"
            Style="{StaticResource PlayToggleButtonStyleKey}"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="100"
            Height="100" />
    </Grid>
</Window>