[C#/WPF/.NET8] Button 엘리먼트 : 새 채팅 아이콘 버튼 만들기

■ Button 엘리먼트를 사용해 새 채팅 아이콘 버튼을 만드는 방법을 보여준다.

▶ ControlDictionary.xaml


<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Style TargetType="{x:Type local:NewChatButton}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:NewChatButton}">
                    <Grid>
                        <Viewbox
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}">
                            <Canvas
                                Width="40"
                                Height="40">
                                <Ellipse Name="PART_BackgroundEllipse" Canvas.Left="1" Canvas.Top="1"
                                    Width="40"
                                    Height="40"
                                    Fill="{TemplateBinding Foreground}" />
                                <Path Name="PART_ChatBubblePath"
                                    StrokeThickness="3"
                                    Stroke="White"
                                    Fill="Transparent">
                                    <Path.Data>
                                        <GeometryGroup>
                                            <EllipseGeometry
                                                Center="20 20"
                                                RadiusX="12"
                                                RadiusY="12" />
                                            <PathGeometry Figures="M 20 32 L 16 36 L 16 32 Z" />
                                        </GeometryGroup>
                                    </Path.Data>
                                </Path>
                                <Ellipse Name="PART_PlusSignEllipse" Canvas.Left="22" Canvas.Top="22"
                                    Width="14"
                                    Height="14"
                                    Fill="White" />
                                <Path Name="PART_PlusSignPath" Canvas.Left="-1" Canvas.Top="-1"
                                    StrokeThickness="2"
                                    Stroke="{TemplateBinding Foreground}"
                                    Data="M 30 26 V 34 M 26 30 H 34" />
                            </Canvas>
                        </Viewbox>
                        <ContentPresenter
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter
                                TargetName="PART_BackgroundEllipse"
                                Property="Fill"
                                Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverBrush}" />
                            <Setter
                                TargetName="PART_PlusSignPath"
                                Property="Stroke"
                                Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter
                                TargetName="PART_BackgroundEllipse"
                                Property="Fill"
                                Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBrush}" />
                            <Setter
                                TargetName="PART_PlusSignPath"
                                Property="Stroke"
                                Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBrush}" />
                            <Setter Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform
                                        CenterX="20"
                                        CenterY="20"
                                        ScaleX="0.95"
                                        ScaleY="0.95" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width"           Value="40"          />
        <Setter Property="Height"          Value="40"          />
        <Setter Property="BorderThickness" Value="0"           />
        <Setter Property="Background"      Value="Transparent" />
        <Setter Property="Foreground"      Value="#0762c1"     />
        <Setter Property="MouseOverBrush"  Value="#1976d2"     />
        <Setter Property="PressedBrush"    Value="#0d47a1"     />
    </Style>
</ResourceDictionary>

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:TestProject">

<Setter.Value>

<Grid>

<Viewbox

Width="{TemplateBinding Width}"

Height="{TemplateBinding Height}">

<Canvas

Width="40"

Height="40">

<Ellipse Name="PART_BackgroundEllipse" Canvas.Left="1" Canvas.Top="1"

Width="40"

Height="40"

Fill="{TemplateBinding Foreground}" />

<Path Name="PART_ChatBubblePath"

StrokeThickness="3"

Stroke="White"

Fill="Transparent">

<Path.Data>

<EllipseGeometry

Center="20 20"

RadiusX="12"

RadiusY="12" />

</GeometryGroup>

</Path.Data>

</Path>

<Ellipse Name="PART_PlusSignEllipse" Canvas.Left="22" Canvas.Top="22"

Width="14"

Height="14"

Fill="White" />

<Path Name="PART_PlusSignPath" Canvas.Left="-1" Canvas.Top="-1"

StrokeThickness="2"

Stroke="{TemplateBinding Foreground}"

Data="M 30 26 V 34 M 26 30 H 34" />

</Canvas>

</Viewbox>

<ContentPresenter

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Grid>

<ControlTemplate.Triggers>

<Setter

TargetName="PART_BackgroundEllipse"

Property="Fill"

Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverBrush}" />

<Setter

TargetName="PART_PlusSignPath"

Property="Stroke"

Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=MouseOverBrush}" />

</Trigger>

<Setter

TargetName="PART_BackgroundEllipse"

Property="Fill"

Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBrush}" />

<Setter

TargetName="PART_PlusSignPath"

Property="Stroke"

Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBrush}" />

<Setter.Value>

<ScaleTransform

CenterX="20"

CenterY="20"

ScaleX="0.95"

ScaleY="0.95" />

</Setter.Value>

</Setter>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

▶ NewChatButton.cs


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

namespace TestProject;

/// <summary>
/// 새 채팅 버튼
/// </summary>
public class NewChatButton : Button
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// DependencyProperty
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 마우스 오버 브러시 속성 - MouseOverBrushProperty

    /// <summary>
    /// 마우스 오버 브러시 속성
    /// </summary>
    public static readonly DependencyProperty MouseOverBrushProperty = DependencyProperty.Register
    (
        nameof(MouseOverBrush),
        typeof(Brush),
        typeof(NewChatButton),
        new PropertyMetadata(new SolidColorBrush(Color.FromRgb(0x19, 0x76, 0xd2)))
    );

    #endregion
    #region PRESS 브러시 속성 - PressedBrushProperty

    /// <summary>
    /// PRESS 브러시 속성
    /// </summary>
    public static readonly DependencyProperty PressedBrushProperty = DependencyProperty.Register
    (
        nameof(PressedBrush),
        typeof(Brush),
        typeof(NewChatButton),
        new PropertyMetadata(new SolidColorBrush(Color.FromRgb(0x0d, 0x47, 0xa1)))
    );

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 마우스 오버 브러시 - MouseOverBrush

    /// <summary>
    /// 마우스 오버 브러시
    /// </summary>
    public Brush MouseOverBrush
    {
        get => (Brush)GetValue(MouseOverBrushProperty);
        set => SetValue(MouseOverBrushProperty, value);
    }

    #endregion
    #region PRESS 브러시 - PressedBrush

    /// <summary>
    /// PRESS 브러시
    /// </summary>
    public Brush PressedBrush
    {
        get => (Brush)GetValue(PressedBrushProperty);
        set => SetValue(PressedBrushProperty, value);
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Static

    #region 생성자 - NewChatButton()

    /// <summary>
    /// 생성자
    /// </summary>
    static NewChatButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(NewChatButton), new FrameworkPropertyMetadata(typeof(NewChatButton)));
    }

    #endregion
}

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

namespace TestProject;

/// <summary>

/// 새 채팅 버튼

/// </summary>

public class NewChatButton : Button

{

//////////////////////////////////////////////////////////////////////////////////////////////////// DependencyProperty

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Public

#region 마우스 오버 브러시 속성 - MouseOverBrushProperty

/// <summary>

/// 마우스 오버 브러시 속성

/// </summary>

public static readonly DependencyProperty MouseOverBrushProperty = DependencyProperty.Register

(

nameof(MouseOverBrush),

typeof(Brush),

typeof(NewChatButton),

new PropertyMetadata(new SolidColorBrush(Color.FromRgb(0x19, 0x76, 0xd2)))

);

#endregion

#region PRESS 브러시 속성 - PressedBrushProperty

/// <summary>

/// PRESS 브러시 속성

/// </summary>

public static readonly DependencyProperty PressedBrushProperty = DependencyProperty.Register

(

nameof(PressedBrush),

typeof(Brush),

typeof(NewChatButton),

new PropertyMetadata(new SolidColorBrush(Color.FromRgb(0x0d, 0x47, 0xa1)))

);

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 마우스 오버 브러시 - MouseOverBrush

/// <summary>

/// 마우스 오버 브러시

/// </summary>

public Brush MouseOverBrush

{

get => (Brush)GetValue(MouseOverBrushProperty);

set => SetValue(MouseOverBrushProperty, value);

}

#endregion

#region PRESS 브러시 - PressedBrush

/// <summary>

/// PRESS 브러시

/// </summary>

public Brush PressedBrush

{

get => (Brush)GetValue(PressedBrushProperty);

set => SetValue(PressedBrushProperty, value);

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Static

#region 생성자 - NewChatButton()

/// <summary>

/// 생성자

/// </summary>

static NewChatButton()

{

DefaultStyleKeyProperty.OverrideMetadata(typeof(NewChatButton), new FrameworkPropertyMetadata(typeof(NewChatButton)));

}

#endregion

}

▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="CONTROL/ControlDictionary.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="MainWindow.xaml">

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ 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="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <local:NewChatButton x:Name="newChatButton"
        Width="40"
        Height="40" />
</Window>

<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="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<local:NewChatButton x:Name="newChatButton"

Width="40"

Height="40" />

</Window>

TestProject.zip