열이 Blog : )

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

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

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

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

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

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>