[C#/WPF] ControlTemplate 엘리먼트 : RadioButton 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 RadioButton 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip

다운로드

▶ 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="ControlTemplate 엘리먼트 : RadioButton 엘리먼트 정의하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <DrawingBrush x:Key="BlueBlueGridDrawingBrushKey"
            Viewport="0 0 10 10"
            ViewportUnits="Absolute"
            TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="#99ccccff">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0 0 1 1" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 1 0 1 0.1 0 0.1 Z" />
                        <GeometryDrawing
                            Brush="#ccccff"
                            Geometry="M 0 0 L 0 1 0.1 1 0.1 0 Z" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
        <GradientStopCollection x:Key="GlassGradientStopCollectionKey">
            <GradientStop Color="WhiteSmoke"  Offset="0.2"  />
            <GradientStop Color="Transparent" Offset="0.4"  />
            <GradientStop Color="WhiteSmoke"  Offset="0.5"  />
            <GradientStop Color="Transparent" Offset="0.75" />
            <GradientStop Color="WhiteSmoke"  Offset="0.9"  />
            <GradientStop Color="Transparent" Offset="1"    />
        </GradientStopCollection>
        <LinearGradientBrush x:Key="GlassLinearGradientBrushKey"
            StartPoint="0 0"
            EndPoint="1 1"
            Opacity="0.75"
            GradientStops="{StaticResource GlassGradientStopCollectionKey}" />
        <ControlTemplate x:Key="RadioButtonControlTemplateKey" TargetType="{x:Type RadioButton}">
            <Grid
                Width="{TemplateBinding Width}"
                Height="{TemplateBinding Height}">
                <Rectangle x:Name="outerRectangle"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    RadiusX="20"
                    RadiusY="20"
                    Stroke="{TemplateBinding Background}"
                    StrokeThickness="5"
                    Fill="Transparent" />
                <Rectangle x:Name="innerRectangle"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Stroke="Transparent"
                    StrokeThickness="20"
                    RadiusX="20"
                    RadiusY="20"
                    Fill="{TemplateBinding Background}" />
                <Rectangle x:Name="glassCubeRectangle"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    RadiusX="10"
                    RadiusY="10"
                    StrokeThickness="2"
                    Opacity="0"
                    Fill="{StaticResource GlassLinearGradientBrushKey}"
                    RenderTransformOrigin="0.5 0.5">
                    <Rectangle.Stroke>
                        <LinearGradientBrush
                            StartPoint="0.5 0"
                            EndPoint="0.5 1">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Offset="0.0" Color="LightBlue" />
                                <GradientStop Offset="1.0" Color="Gray"      />
                            </LinearGradientBrush.GradientStops>
                        </LinearGradientBrush>
                    </Rectangle.Stroke>
                    <Rectangle.RenderTransform>
                        <ScaleTransform x:Name="glassCubeScaleTransform" />
                    </Rectangle.RenderTransform>
                    <Rectangle.BitmapEffect>
                        <BevelBitmapEffect />
                    </Rectangle.BitmapEffect>
                </Rectangle>
                <DockPanel>
                    <ContentPresenter
                        Margin="15"
                        TextBlock.Foreground="Black"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Content="{TemplateBinding Content}" />
                </DockPanel>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsFocused" Value="true">
                    <Setter
                        TargetName="glassCubeRectangle"
                        Property="Rectangle.Opacity"
                        Value="1" />
                    <Setter
                        TargetName="innerRectangle"
                        Property="Rectangle.Opacity"
                        Value="1" />
                </Trigger>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard Name="mouseEnterBeginStoryboard">
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="glassCubeScaleTransform"
                                    Storyboard.TargetProperty="ScaleX"
                                    From="1"
                                    To="0.9"
                                    Duration="0:0:0.5" />
                                <DoubleAnimation
                                    Storyboard.TargetName="glassCubeScaleTransform"
                                    Storyboard.TargetProperty="ScaleY"
                                    From="1"
                                    To="0.9"
                                    Duration="0:0:0.5" />
                                <DoubleAnimation
                                    Storyboard.TargetName="outerRectangle"
                                    Storyboard.TargetProperty="RadiusX"
                                    From="20"
                                    To="0"
                                    Duration="0:0:0.5" />
                                <DoubleAnimation
                                    Storyboard.TargetName="outerRectangle"
                                    Storyboard.TargetProperty="RadiusY"
                                    From="20"
                                    To="0"
                                    Duration="0:0:0.5" />
                                <DoubleAnimation
                                    Storyboard.TargetName="glassCubeRectangle"
                                    Storyboard.TargetProperty="Opacity"
                                    From="0"
                                    To="1"
                                    Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="outerRectangle"
                                    Storyboard.TargetProperty="RadiusX"
                                    From="0"
                                    To="20"
                                    Duration="0:0:0.5" />
                                <DoubleAnimation
                                    Storyboard.TargetName="outerRectangle"
                                    Storyboard.TargetProperty="RadiusY"
                                    From="0"
                                    To="20"
                                    Duration="0:0:0.5" />
                                <DoubleAnimation
                                    Storyboard.TargetName="glassCubeRectangle"
                                    Storyboard.TargetProperty="Opacity"
                                    From="1"
                                    To="0"
                                    Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="RadioButton.Checked">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="glassCubeScaleTransform"
                                    Storyboard.TargetProperty="ScaleX"
                                    AutoReverse="True"
                                    To="0.1"
                                    Duration="0:0:0.1" />
                                <DoubleAnimation
                                    Storyboard.TargetName="glassCubeScaleTransform"
                                    Storyboard.TargetProperty="ScaleY"
                                    AutoReverse="True"
                                    To="0.1"
                                    Duration="0:0:0.1" />
                                <DoubleAnimation
                                    Storyboard.TargetName="innerRectangle"
                                    Storyboard.TargetProperty="Opacity"
                                    To="0"
                                    Duration="0:0:0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="RadioButton.Unchecked">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="innerRectangle"
                                    Storyboard.TargetProperty="Opacity"
                                    To="1.0"
                                    Duration="0:0:0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style TargetType="{x:Type RadioButton}">
            <Setter Property="Margin"                     Value="10"     />
            <Setter Property="Width"                      Value="200"    />
            <Setter Property="Height"                     Value="50"     />
            <Setter Property="Template"                   Value="{StaticResource RadioButtonControlTemplateKey}" />
            <Setter Property="Background"                 Value="White"  />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment"   Value="Center" />
        </Style>
    </Window.Resources>
    <Grid Margin="10">
        <Grid Background="{StaticResource BlueBlueGridDrawingBrushKey}">
            <StackPanel
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
                <RadioButton Content="라디오 버튼 1" />
                <RadioButton Content="라디오 버튼 2" />
                <RadioButton Content="라디오 버튼 3" />
                <RadioButton Content="라디오 버튼 4" />
                <RadioButton Content="라디오 버튼 5" />
            </StackPanel>
        </Grid>
    </Grid>
</Window>