Custom Button

개발을 진행하다 보면 다양한 스타일의 버튼을 만들게 되는데요.

Round 스타일이나 Mouse Over, Pressed 같은 경우에 색을 변경해야 경우가 많습니다.

이런 속성을 추가한 Custom Button을 만들어 사용하는 것도 한 방법이 되겠습니다.

그래서 CornerRadius 와 Mouse Over, Pressed 이벤트시 Background 와 BorderBrush 의 색상을 변경하는 프로퍼티를 가지는

간단한 버튼 컨트롤을 만들어 보았습니다.

<control:CustomButton Width="150" Height="50" BorderThickness="2" CornerRadius="20" MouseOverBackgroundBrush="LightGreen" MouseOverBorderBrush="Green" PressedBackgroundBrush="LightBlue" PressedBorderBrush="Blue"/>

xaml

<Button x:Class="Wpf.Controls.CustomButton" 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" mc:Ignorable="d" Template="{DynamicResource ButtonTemplate}"> <Button.Resources> <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}"> <Border x:Name="border" CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsDefaulted" Value="True"> <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" TargetName="border" Value="{Binding MouseOverBackgroundBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, TargetNullValue=#FFBEE6FD}"/> <Setter Property="BorderBrush" TargetName="border" Value="{Binding MouseOverBorderBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, TargetNullValue=#FF3C7FB1}"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" TargetName="border" Value="{Binding PressedBackgroundBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, TargetNullValue=#FFC4E5F6}"/> <Setter Property="BorderBrush" TargetName="border" Value="{Binding PressedBorderBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}, TargetNullValue=#FF2C628B}"/> </Trigger> <Trigger Property="ToggleButton.IsChecked" Value="True"> <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/> <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/> <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/> <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Resources> </Button>

cs

public partial class CustomButton : Button { #region Dependency Property #region CornerRadius public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(CustomButton), new PropertyMetadata(new CornerRadius(0))); public CornerRadius CornerRadius { get { return (CornerRadius)GetValue(CornerRadiusProperty); } set { SetValue(CornerRadiusProperty, value); } } #endregion #region MouseOverBackgroundBrush public static readonly DependencyProperty MouseOverBackgroundBrushProperty = DependencyProperty.Register("MouseOverBackgroundBrush", typeof(Brush), typeof(CustomButton)); public Brush MouseOverBackgroundBrush { get { return (Brush)GetValue(MouseOverBackgroundBrushProperty); } set { SetValue(MouseOverBackgroundBrushProperty, value); } } #endregion #region MouseOverBorderBrush public static readonly DependencyProperty MouseOverBorderBrushProperty = DependencyProperty.Register("MouseOverBorderBrush", typeof(Brush), typeof(CustomButton)); public Brush MouseOverBorderBrush { get { return (Brush)GetValue(MouseOverBorderBrushProperty); } set { SetValue(MouseOverBorderBrushProperty, value); } } #endregion #region PressedBackgroundBrush public static readonly DependencyProperty PressedBackgroundBrushProperty = DependencyProperty.Register("PressedBackgroundBrush", typeof(Brush), typeof(CustomButton)); public Brush PressedBackgroundBrush { get { return (Brush)GetValue(PressedBackgroundBrushProperty); } set { SetValue(PressedBackgroundBrushProperty, value); } } #endregion #region PressedBorderBrush public static readonly DependencyProperty PressedBorderBrushProperty = DependencyProperty.Register("PressedBorderBrush", typeof(Brush), typeof(CustomButton)); public Brush PressedBorderBrush { get { return (Brush)GetValue(PressedBorderBrushProperty); } set { SetValue(PressedBorderBrushProperty, value); } } #endregion #endregion public CustomButton() { InitializeComponent(); } }

 

CustomButton.xaml

CustomButton.xaml.cs