[C#/WPF] ControlTemplate 엘리먼트 : 비주얼 상태와 트리거를 사용해 Button 엘리먼트 정의하기

■ ControlTemplate 엘리먼트에서 비주얼 상태와 트리거를 사용해 Button 엘리먼트를 정의하는 방법을 보여준다.

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"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="DisabledControlDarkColorKeyKey">#ffc5cbf9</Color>
        <Color x:Key="DisabledForegroundColorKey">#ff888888</Color>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="ControlDarkColorKey">#ff211aa9</Color>
        <Color x:Key="ControlMouseOverColorKey">#ff3843c4</Color>
        <Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
        <Color x:Key="BorderLightColorKey">#ffcccccc</Color>
        <Color x:Key="BorderDarkColorKey">#ff444444</Color>
        <Color x:Key="PressedBorderLightColorKey">#ff888888</Color>
        <Color x:Key="PressedBorderDarkColorKey">#ff444444</Color>
        <Color x:Key="DisabledBorderDarkColorKey">#ff888888</Color>
        <Style x:Key="ButtonFocusVisualStyleKey">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border>
                            <Rectangle
                                Margin="2"
                                StrokeThickness="1"
                                Stroke="#60000000"
                                StrokeDashArray="1 2" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="Button">
            <Setter Property="FocusVisualStyle"      Value="{StaticResource ButtonFocusVisualStyleKey}" />
            <Setter Property="MinWidth"              Value="75"   />
            <Setter Property="MinHeight"             Value="23"   />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="SnapsToDevicePixels"   Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border"
                            CornerRadius="2"
                            BorderThickness="1"
                            TextBlock.Foreground="{TemplateBinding Foreground}">
                            <Border.BorderBrush>
                                <LinearGradientBrush
                                    StartPoint="0 0"
                                    EndPoint="0 1">
                                    <LinearGradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Offset="0.0" Color="{DynamicResource BorderLightColorKey}" />
                                            <GradientStop Offset="1.0" Color="{DynamicResource BorderDarkColorKey }" />
                                        </GradientStopCollection>
                                    </LinearGradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border.Background>
                                <LinearGradientBrush
                                    StartPoint="0.5 0"
                                    EndPoint="0.5 1">
                                    <GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey }" />
                                    <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.5" />
                                        <VisualTransition GeneratedDuration="0" To="Pressed" />
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource PressedBorderDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource PressedBorderLightColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColorKeyKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledBorderDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Margin="2"
                                RecognizesAccessKey="True" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefault" Value="true">
                                <Setter
                                    TargetName="border"
                                    Property="BorderBrush">
                                    <Setter.Value>
                                        <LinearGradientBrush
                                            StartPoint="0 0"
                                            EndPoint="0 1">
                                            <GradientBrush.GradientStops>
                                                <GradientStopCollection>
                                                    <GradientStop Offset="0.0" Color="{DynamicResource DefaultBorderBrushLightBrush}" />
                                                    <GradientStop Offset="1.0" Color="{DynamicResource DefaultBorderBrushDarkColor }" />
                                                </GradientStopCollection>
                                            </GradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Button
            Width="100"
            Height="30"
            Content="TEST" />
        <Button
            Margin="0 10 0 0"
            Width="100"
            Height="30"
            Content="TEST" />
        <Button
            Margin="0 10 0 0"
            Width="100"
            Height="30"
            Content="TEST" />
    </StackPanel>
</Window>