개발을 진행하다 보면 다양한 스타일의 버튼을 만들게 되는데요.
Round 스타일이나 Mouse Over, Pressed 같은 경우에 색을 변경해야 경우가 많습니다.
이런 속성을 추가한 Custom Button을 만들어 사용하는 것도 한 방법이 되겠습니다.
그래서 CornerRadius 와 Mouse Over, Pressed 이벤트시 Background 와 BorderBrush 의 색상을 변경하는 프로퍼티를 가지는
간단한 버튼 컨트롤을 만들어 보았습니다.
1 2 3 4 | <control:CustomButton Width="150" Height="50" BorderThickness="2" CornerRadius="20" MouseOverBackgroundBrush="LightGreen" MouseOverBorderBrush="Green" PressedBackgroundBrush="LightBlue" PressedBorderBrush="Blue"/> |
xaml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <Button x:Class="Wpf.Controls.CustomButton" 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 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
'Window > WPF' 카테고리의 다른 글
| VisualStudio 2017에 .NET 4.0 Bootstrapper 설정 (0) | 2018.02.21 |
|---|---|
| Virtual Keyboard ( Hangul ) (1) | 2015.11.23 |
| Pixel Shader Effect in WPF (0) | 2015.02.26 |
| [ WPF ] Word Cloud (0) | 2014.02.23 |
| [ WPF ] VisualTree FindChild (0) | 2012.08.17 |
