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

TestProject.zip

0.01MB

▶ ColorExtension.cs

using System.Windows;
using System.Windows.Media;

namespace TestProject
{
    /// <summary>
    /// 색상 확장
    /// </summary>
    public class ColorExtension
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 전경색 첨부 속성 - ForegroundColorProperty

        /// <summary>
        /// 전경색 첨부 속성
        /// </summary>
        public static readonly DependencyProperty ForegroundColorProperty = DependencyProperty.RegisterAttached
        (
            "ForegroundColor",
            typeof(Color),
            typeof(ColorExtension),
            new UIPropertyMetadata(Colors.White)
        );

        #endregion
        #region 배경색 첨부 속성 - BackgroundColorProperty

        /// <summary>
        /// 배경색 첨부 속성
        /// </summary>
        public static readonly DependencyProperty BackgroundColorProperty = DependencyProperty.RegisterAttached
        (
            "BackgroundColor",
            typeof(Color),
            typeof(ColorExtension),
            new UIPropertyMetadata(Colors.Black)
        );

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 전경색 구하기 - GetForegroundColor(dependencyObject)

        /// <summary>
        /// 전경색 구하기
        /// </summary>
        /// <param name="dependencyObject">의존 객체</param>
        /// <returns>전경색</returns>
        public static Color GetForegroundColor(DependencyObject dependencyObject)
        {
            return (Color)dependencyObject.GetValue(ForegroundColorProperty);
        }

        #endregion
        #region 전경색 설정하기 - SetForegroundColor(dependencyObject, color)

        /// <summary>
        /// 전경색 설정하기
        /// </summary>
        /// <param name="dependencyObject">의존 객체</param>
        /// <param name="color">색상</param>
        public static void SetForegroundColor(DependencyObject dependencyObject, Color color)
        {
            dependencyObject.SetValue(ForegroundColorProperty, color);
        }

        #endregion
        #region 배경색 구하기 - GetBackgroundColor(dependencyObject)

        /// <summary>
        /// 배경색 구하기
        /// </summary>
        /// <param name="dependencyObject">의존 객체</param>
        /// <returns>배경색</returns>
        public static Color GetBackgroundColor(DependencyObject dependencyObject)
        {
            return (Color)dependencyObject.GetValue(BackgroundColorProperty);
        }

        #endregion
        #region 배경색 설정하기 - SetBackgroundColor(dependencyObject, color)

        /// <summary>
        /// 배경색 설정하기
        /// </summary>
        /// <param name="dependencyObject">의존 객체</param>
        /// <param name="color">색상</param>
        public static void SetBackgroundColor(DependencyObject dependencyObject, Color color)
        {
            dependencyObject.SetValue(BackgroundColorProperty, color);
        }

        #endregion
    }
}

 

728x90

 

▶ 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"
    xmlns:local="clr-namespace:TestProject"
    Width="800"
    Height="600"
    Title="ControlTemplate 엘리먼트 : Button 엘리먼트 정의하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="StandardButtonStyleKey" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border"
                            BorderThickness="0"
                            BorderBrush="Black">
                            <Grid
                                Width="auto"
                                Height="auto">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="2*" />
                                    <RowDefinition Height="*"  />
                                </Grid.RowDefinitions>
                                <Border Grid.RowSpan="2"
                                    CornerRadius="4 4 4 4"
                                    Background="{TemplateBinding Background}">
                                    <Border CornerRadius="4 4 4 4" >
                                        <Border.Background>
                                            <LinearGradientBrush
                                                StartPoint="0 0"
                                                EndPoint="0 1">
                                                <GradientStop
                                                    Offset="0"
                                                    Color="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                        Path=(local:ColorExtension.ForegroundColor)}" />
                                                <GradientStop
                                                    Offset="1"
                                                    Color="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                        Path=(local:ColorExtension.BackgroundColor) }" />
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Border>
                                <Rectangle Grid.Row="0"
                                    Margin="1 1"
                                    RadiusX="3"
                                    RadiusY="3">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush
                                            StartPoint="0 0"
                                            EndPoint="0 1">
                                            <GradientStop Offset="0" Color="#80999999" />
                                            <GradientStop Offset="1" Color="#00999999" />
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <ContentPresenter Grid.RowSpan="2"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Margin="2"
                                    RecognizesAccessKey="True" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Button.IsPressed" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="Transparent" />
                                <Setter TargetName="border" Property="Effect">
                                    <Setter.Value>
                                        <DropShadowEffect
                                            ShadowDepth="2"
                                            BlurRadius="6" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="(Button.Opacity)"
                                    AutoReverse="False"
                                    Duration="00:00:00.1"
                                    From="1.0"
                                    To="0.95" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="(Button.Opacity)"
                                    Duration="00:00:00.1"
                                    To="1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Button
            Style="{DynamicResource StandardButtonStyleKey}"
            Width="100"
            Height="30"
            local:ColorExtension.ForegroundColor="DarkGreen"
            local:ColorExtension.BackgroundColor="DarkGreen">
            <Button.Effect>
                <DropShadowEffect
                    ShadowDepth="0"
                    BlurRadius="4" />
            </Button.Effect>
            <TextBlock
                Foreground="White"
                Text="START" />
        </Button>
        <Button
            Style="{DynamicResource StandardButtonStyleKey}"
            Margin="0 10 0 0"
            Width="100"
            Height="30"
            local:ColorExtension.ForegroundColor="DarkRed"
            local:ColorExtension.BackgroundColor="DarkRed">
            <Button.Effect>
                <DropShadowEffect
                    ShadowDepth="0"
                    BlurRadius="4" />
            </Button.Effect>
            <TextBlock
                Foreground="White"
                Text="STOP" />
        </Button>
        <Button
            Style="{DynamicResource StandardButtonStyleKey}"
            Margin="0 10 0 0"
            Width="100"
            Height="30"
            local:ColorExtension.ForegroundColor="DarkGoldenrod"
            local:ColorExtension.BackgroundColor="DarkGoldenrod">
            <Button.Effect>
                <DropShadowEffect
                    ShadowDepth="0"
                    BlurRadius="4" />
            </Button.Effect>
            <TextBlock
                Foreground="White"
                Text="RESET" />
        </Button>
        <Button
            Style="{DynamicResource StandardButtonStyleKey}"
            Margin="0 10 0 0"
            Width="100"
            Height="30"
            local:ColorExtension.ForegroundColor="DarkCyan"
            local:ColorExtension.BackgroundColor="DarkCyan">
            <Button.Effect>
                <DropShadowEffect
                    ShadowDepth="0"
                    BlurRadius="4" />
            </Button.Effect>
            <TextBlock
                Foreground="White"
                Text="HOME" />
        </Button>
        <Button
            Style="{DynamicResource StandardButtonStyleKey}"
            Margin="0 10 0 0"
            Width="100"
            Height="30"
            local:ColorExtension.ForegroundColor="DarkKhaki"
            local:ColorExtension.BackgroundColor="DarkKhaki">
            <Button.Effect>
                <DropShadowEffect
                    ShadowDepth="0"
                    BlurRadius="4" />
            </Button.Effect>
            <TextBlock
                Foreground="White"
                Text="LOGIN" />
        </Button>
    </StackPanel>
</Window>