■ Button 엘리먼트를 사용해 PATH 아이콘과 텍스트를 표시하는 버튼을 만드는 방법을 보여준다.
▶ PathIconButton.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 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 |
<Button x:Class="TestProject.PathIconButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Button.Template> <ControlTemplate TargetType="Button"> <Border Name="border" CornerRadius="10" Padding="5" Background="{TemplateBinding Background}"> <StackPanel Margin="{TemplateBinding Padding}" Orientation="Horizontal"> <Path Name="path" VerticalAlignment="Center" Margin="0 0 0 0" Width="{Binding PathWidth, RelativeSource={RelativeSource TemplatedParent}}" Height="{Binding PathHeight, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" Fill="{TemplateBinding Foreground}" Data="{Binding PathData, RelativeSource={RelativeSource TemplatedParent}}" /> <ContentPresenter Name="contentPresenter" VerticalAlignment="Center" Content="{TemplateBinding Content}"> <ContentPresenter.Style> <Style TargetType="ContentPresenter"> <Setter Property="Margin" Value="10 0 0 0" /> <Setter Property="Visibility" Value="Visible" /> <Style.Triggers> <DataTrigger Binding="{Binding Content, RelativeSource={RelativeSource Self}}" Value="{x:Null}"> <Setter Property="Margin" Value="0" /> <Setter Property="Visibility" Value="Collapsed" /> </DataTrigger> </Style.Triggers> </Style> </ContentPresenter.Style> </ContentPresenter> </StackPanel> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="border" Property="Background" Value="{Binding MouseOverBrush, RelativeSource={RelativeSource TemplatedParent}}" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="border" Property="Background" Value="{Binding PressedBrush, RelativeSource={RelativeSource TemplatedParent}}" /> <Setter TargetName="border" Property="RenderTransform"> <Setter.Value> <TranslateTransform Y="2" /> </Setter.Value> </Setter> <Setter TargetName="path" Property="RenderTransform"> <Setter.Value> <TranslateTransform Y="1" /> </Setter.Value> </Setter> <Setter TargetName="contentPresenter" Property="RenderTransform"> <Setter.Value> <TranslateTransform Y="1" /> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="border" Property="Background" Value="DarkGray" /> <Setter TargetName="path" Property="Fill" Value="LightGray" /> <Setter TargetName="contentPresenter" Property="IsEnabled" Value="False" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> |
▶ PathIconButton.xaml.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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 |
using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace TestProject; /// <summary> /// 패스 아이콘 버튼 /// </summary> public partial class PathIconButton : Button { //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 마우스 오버 브러시 속성 - MouseOverBrushProperty /// <summary> /// 마우스 오버 브러시 속성 /// </summary> public static readonly DependencyProperty MouseOverBrushProperty = DependencyProperty.Register ( nameof(MouseOverBrush), typeof(Brush), typeof(PathIconButton), new PropertyMetadata(null) ); #endregion #region 프레스 브러시 속성 - PressedBrushProperty /// <summary> /// 프레스 브러시 속성 /// </summary> public static readonly DependencyProperty PressedBrushProperty = DependencyProperty.Register ( nameof(PressedBrush), typeof(Brush), typeof(PathIconButton), new PropertyMetadata(null) ); #endregion #region 패스 너비 속성 - PathWidthProperty /// <summary> /// 패스 너비 속성 /// </summary> public static readonly DependencyProperty PathWidthProperty = DependencyProperty.Register ( nameof(PathWidth), typeof(double), typeof(PathIconButton), new PropertyMetadata(16d) ); #endregion #region 패스 높이 속성 - PathHeightProperty /// <summary> /// 패스 높이 속성 /// </summary> public static readonly DependencyProperty PathHeightProperty = DependencyProperty.Register ( nameof(PathHeight), typeof(double), typeof(PathIconButton), new PropertyMetadata(16d) ); #endregion #region 패스 데이터 속성 - PathDataProperty /// <summary> /// 패스 데이터 속성 /// </summary> public static readonly DependencyProperty PathDataProperty = DependencyProperty.Register ( nameof(PathData), typeof(Geometry), typeof(PathIconButton), new PropertyMetadata(null) ); #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 마우스 오버 브러시 - MouseOverBrush /// <summary> /// 마우스 오버 브러시 /// </summary> public Brush MouseOverBrush { get { return (Brush)GetValue(MouseOverBrushProperty); } set { SetValue(MouseOverBrushProperty, value); } } #endregion #region 프레스 브러시 - PressedBrush /// <summary> /// 프레스 브러시 /// </summary> public Brush PressedBrush { get { return (Brush)GetValue(PressedBrushProperty); } set { SetValue(PressedBrushProperty, value); } } #endregion #region 패스 너비 - PathWidth /// <summary> /// 패스 너비 /// </summary> public double PathWidth { get { return (double)GetValue(PathWidthProperty); } set { SetValue(PathWidthProperty, value); } } #endregion #region 패스 높이 - PathHeight /// <summary> /// 패스 높이 /// </summary> public double PathHeight { get { return (double)GetValue(PathHeightProperty); } set { SetValue(PathHeightProperty, value); } } #endregion #region 패스 데이터 - PathData /// <summary> /// 패스 데이터 /// </summary> public Geometry PathData { get { return (Geometry)GetValue(PathDataProperty); } set { SetValue(PathDataProperty, value); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - PathIconButton() /// <summary> /// 생성자 /// </summary> public PathIconButton() { InitializeComponent(); } #endregion } |
▶ MainWindow.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 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 88 89 90 |
<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"> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <local:PathIconButton HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Padding="10" Background="#007bff" Foreground="White" MouseOverBrush="#0056b3" PressedBrush="#004085" PathWidth="20" PathHeight="20"> <local:PathIconButton.PathData> <Geometry>M 2.01 21 L 23 12 2.01 3 2 10 l 15 2 -15 2 z</Geometry> </local:PathIconButton.PathData> <TextBlock VerticalAlignment="Center" Text="작업 전송" /> </local:PathIconButton> <local:PathIconButton HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Padding="10" Background="#007bff" Foreground="White" MouseOverBrush="#0056b3" PressedBrush="#004085" PathWidth="20" PathHeight="20" IsEnabled="False"> <local:PathIconButton.PathData> <Geometry>M 2.01 21 L 23 12 2.01 3 2 10 l 15 2 -15 2 z</Geometry> </local:PathIconButton.PathData> <TextBlock VerticalAlignment="Center" Text="작업 전송" /> </local:PathIconButton> <local:PathIconButton HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Padding="10" Background="#007bff" Foreground="White" MouseOverBrush="#0056b3" PressedBrush="#004085" PathWidth="20" PathHeight="20"> <local:PathIconButton.PathData> <Geometry>M 25 25 H 75 A 5 5 0 0 1 80 30 V 70 A5 5 0 0 1 75 75 H 25 A 5 5 0 0 1 20 70 V 30 A 5 5 0 0 1 25 25 Z</Geometry> </local:PathIconButton.PathData> <TextBlock VerticalAlignment="Center" Text="작업 중단" /> </local:PathIconButton> <local:PathIconButton HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Padding="10" Background="#007bff" Foreground="White" MouseOverBrush="#0056b3" PressedBrush="#004085" PathWidth="20" PathHeight="20" IsEnabled="False"> <local:PathIconButton.PathData> <Geometry>M 25 25 H 75 A 5 5 0 0 1 80 30 V 70 A5 5 0 0 1 75 75 H 25 A 5 5 0 0 1 20 70 V 30 A 5 5 0 0 1 25 25 Z</Geometry> </local:PathIconButton.PathData> <TextBlock VerticalAlignment="Center" Text="작업 중단" /> </local:PathIconButton> </StackPanel> </Window> |
