[WPF] Pressed Button Style 만들기

1. [프로젝트] > [추가] > [리소스 사전]을 생성해서 Style을 작성할 ResourceDictionary 파일을 만든 다음에 불러오는 방법

• App.xaml, Page.xaml 혹은 Window.xaml에서 ResourceDictionary MergedDictionaries 하여 스타일을 사용할 수 있다.
• 스타일을 파일 별로 작성하고 사용하기 때문에 수정 및 관리가 용이하다.  

 

2. 각 Page.xaml 혹은 Window.xaml에서 Resource 태그 안에서 Style을 작성하는 방법

• 임시로 간단하게 작성하여 바로 사용할 수 있다.

 

<Dictionary1.xaml>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Color x:Key="black0Color">#252526</Color>
    <Color x:Key="white0Color">#FFFFFF</Color>
    <Color x:Key="green0Color">#00C28C</Color>
    <Color x:Key="text0Color">#0FFFFF</Color>
    <Color x:Key="ControlHintTextColor">#999999</Color>

    <SolidColorBrush x:Key="black0Brush" Color="{StaticResource black0Color}"/>
    <SolidColorBrush x:Key="white0Brush" Color="{StaticResource white0Color}"/>
    <SolidColorBrush x:Key="green0Brush" Color="{StaticResource green0Color}"/>
    <LinearGradientBrush x:Key="BlueGradient" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0" />
        <GradientStop Color="Red" Offset="1" />
    </LinearGradientBrush>

    <Style x:Key="MyButtonStyle" TargetType="Button" >
        <Setter Property="Background" Value="Black"/>
  

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border TextBlock.Foreground="{TemplateBinding Foreground}" x:Name="MyBorder" BorderThickness="2" CornerRadius="10">
                        <!--버튼 테두리부분 스타일-->
                        <Border.BorderBrush>
                            <LinearGradientBrush 
                                StartPoint="0,0"
                                EndPoint="0,1">
                                <LinearGradientBrush.GradientStops>
                                    <GradientStopCollection>
                                        <GradientStop 
                                            Color="Black"
                                            Offset="0.0" />
                                        <GradientStop 
                                            Color="Black"
                                            Offset="1.0" />
                                    </GradientStopCollection>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Border.BorderBrush>
                        <!--버튼 안쪽 스타일-->
                        <!--<Border.Background>
                            <LinearGradientBrush 
                                EndPoint="0.5,1"
                                StartPoint="0.5,0">
                                <GradientStop 
                                    Color="Transparent"
                                    Offset="0" />
                                <GradientStop 
                                    Color="Transparent"
                                    Offset="1" />
                            </LinearGradientBrush>
                        </Border.Background>-->
                        <!-- 버튼 효과들-->
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="VisualStateGroup">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                                    <VisualTransition GeneratedDuration="0" To="Pressed"/>
                                </VisualStateGroup.Transitions>

                                <!--Normal-->
                                <VisualState x:Name="Normal">
                                    
                                </VisualState>
                                
                                <!--MouseOver 효과-->
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background)" Storyboard.TargetName="MyBorder">
                                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                <DiscreteObjectKeyFrame KeyTime="0" >
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <LinearGradientBrush>
                                                            <GradientStop Color="White"/>
                                                            <GradientStop Color="Gray" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                                <!--Pressed 효과-->
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background)" Duration="0:0:0.5" AutoReverse="True" RepeatBehavior="Forever"  Storyboard.TargetName="MyBorder">
                                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                <DiscreteObjectKeyFrame KeyTime="0" >
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <LinearGradientBrush>
                                                            <GradientStop Color="Red"/>
                                                            <GradientStop Color="Green" Offset="1"/>
                                                        </LinearGradientBrush>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                                <!--Disabled 효과-->
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames 
                                            Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                            Storyboard.TargetName="MyBorder">
                                            <EasingColorKeyFrame KeyTime="0"
                                         Value="Gray" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                            Storyboard.TargetName="MyBorder">
                                            <EasingColorKeyFrame KeyTime="0"
                                         Value="Gray" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames 
                                            Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                            Storyboard.TargetName="MyBorder">
                                            <EasingColorKeyFrame 
                                                KeyTime="0"
                                                Value="Gray" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" />
                    </Border>

                    <!--<ControlTemplate.Triggers>
                        <Trigger 
                            Property="IsDefault"
                            Value="true">
                            <Setter 
                                TargetName="MyBorder"
                                Property="BorderBrush">
                                <Setter.Value>
                                    <LinearGradientBrush 
                                        StartPoint="0,0"
                                        EndPoint="0,1">
                                        <GradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop 
                                                    Color="{DynamicResource DefaultBorderBrushLightBrush}"
                                                    Offset="0.0" />
                                                <GradientStop 
                                                    Color="{DynamicResource DefaultBorderBrushDarkColor}"
                                                    Offset="1.0" />
                                            </GradientStopCollection>
                                        </GradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>-->

                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="false">
                <Setter Property="Background" Value="Black"/>
            </Trigger>
            
        </Style.Triggers>
    </Style>
</ResourceDictionary>

 

 

<App.xaml>

• Application에 Dictionary1.xaml을 가져옴으로써 어디서든 해당 파일에 작성된 스타일을 사용할 수 있다.

<Application x:Class="WpfTestProject.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfTestProject"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Dictionary1.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

 

<StyleTestPage.xaml>

• Page에서 로컬로 사용할 스타일을 Page.Resources 안에다가 작성하였다.

<Page x:Class="WpfTestProject.StyleTestPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:WpfTestProject"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="StyleTestPage">
    
    <Page.Resources>
        
        <Style x:Key="RedButton" TargetType="Button">
            <Setter Property="Background" Value="Beige"/>
            <Setter Property="Foreground" Value="DarkRed"/>
            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="MyBorder2" CornerRadius="10" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="Local Style Button" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" TargetName="MyBorder2" Value="#e8e7e7"/>
                                <Setter Property="Foreground" Value="White"/>
                                <Setter Property="BorderBrush" Value="#e8e7e7"></Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="True">
                                <Setter Property="Background" TargetName="MyBorder2" Value="#ed0d6c"/>
                                <Setter Property="BorderBrush" Value="#00afdd"></Setter>
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="MyBorder2" Value="#ff3c8f"/>
                                <Setter Property="BorderBrush" Value="#254c8e"></Setter>
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>

                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="MyBorder2" Value="#ed0d6c"/>
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Setter Property="Background" TargetName="MyBorder2" Value="#FFBCDDEE"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Resources>
                <LinearGradientBrush x:Key="RedGradient" StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="OrangeRed" Offset="0" />
                    <GradientStop Color="Red" Offset="1" />
                </LinearGradientBrush>
            </Style.Resources>
        </Style>
    </Page.Resources>
    
    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.02*"/>
                <RowDefinition Height="0.1*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Border Grid.Row="2" Background="WhiteSmoke">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.3*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border Grid.Row="0">
                        <Border.Background>
                            <LinearGradientBrush EndPoint="0.2,1" StartPoint="0.2,0">
                                <GradientStop Color="Green"/>
                                <GradientStop Color="LightGreen" Offset="0.3"/>
                            </LinearGradientBrush>
                        </Border.Background>
                        <StackPanel VerticalAlignment="Center">
                            <TextBlock Text="Let's create a press button style :)" FontSize="40" FontWeight="Bold" Foreground="Tomato" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </StackPanel>
                    </Border>
                    <Border Grid.Row="1">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.Column="0">
                                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                    <Border x:Name="All_Style_Button_Border" CornerRadius="10" BorderThickness="2" >
                                        <Button Style="{StaticResource MyButtonStyle}" Content="Global Style Button" Background="Black" Foreground="Blue" FontSize="25" FontWeight="Bold"  x:Name="All_Style_Button"  BorderBrush="LightYellow" BorderThickness="7" Height="100" Width="300" Click="All_Style_Button_Click"/>
                                    </Border>
                                </StackPanel>
                            </Border>
                            <Border Grid.Column="1">
                                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                    <Border x:Name="Page_Style_Button_Border" CornerRadius="10" BorderThickness="2">
                                        <Button Style="{StaticResource RedButton}" x:Name="Page_Style_Button"  FontSize="25" FontWeight="Bold" BorderBrush="LightYellow" BorderThickness="7" Height="100" Width="300" Click="Page_Style_Button_Click"/>
                                    </Border>
                                </StackPanel>
                            </Border>
                        </Grid>
                    </Border>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</Page>

 

<StyleTestPage.xaml.cs>

• All_Style_Button : Application에서 불러온 스타일을 사용하는 버튼
• Page_Style_Button : Page에서 작성한 스타일을 사용하는 버튼

namespace WpfTestProject
{
    public partial class StyleTestPage : Page
    {
        bool isClickedAllButton = false;
        bool isClickedPageButton = false;

        public StyleTestPage()
        {
            InitializeComponent();
        }


        private void All_Style_Button_Click(object sender, RoutedEventArgs e)
        {
            if(isClickedAllButton == false)
            {
                this.All_Style_Button.Foreground = new SolidColorBrush(Colors.Magenta);
                this.All_Style_Button_Border.Background = new SolidColorBrush(Colors.Aqua);
                isClickedAllButton = true;
            }
            else
            {
                this.All_Style_Button.Foreground = new SolidColorBrush(Colors.Aqua);
                this.All_Style_Button_Border.Background = new SolidColorBrush(Colors.Magenta);
                isClickedAllButton = false;
            }
        }

        private void Page_Style_Button_Click(object sender, RoutedEventArgs e)
        {

            if (this.isClickedPageButton == false)
            {
                this.Page_Style_Button.Foreground = new SolidColorBrush(Colors.Pink);
                this.Page_Style_Button_Border.Background = new SolidColorBrush(Colors.GreenYellow);
                isClickedPageButton = true;
            }
            else
            {
                this.Page_Style_Button.Foreground = new SolidColorBrush(Colors.GreenYellow);
                this.Page_Style_Button_Border.Background = new SolidColorBrush(Colors.Pink);
                isClickedPageButton = false;
            }
            
        }
    }

 

 

WPF Pressed Button Style