TRIGGER Archives - icodebroker

[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:StopButton}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="CornerRadius"    Value="5"       />
        <Setter Property="BorderThickness" Value="1"       />
        <Setter Property="BorderBrush"     Value="#003e92" />
        <Setter Property="Background"      Value="#fcfcfc" />
        <Setter Property="Foreground"      Value="Black"   />
        <Setter Property="Padding"         Value="10"      />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:StopButton}">
                    <Border Name="PART_RootBorder"
                        Padding="{TemplateBinding Padding}"
                        CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CornerRadius}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}">
                        <StackPanel
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Orientation="Horizontal">
                            <Viewbox
                                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IconWidth}"
                                Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IconHeight}">
                                <Path Name="PART_IconPath"
                                    Fill="#003e92"
                                    Stretch="Uniform"
                                    Data="M 0 0 H 20 V 20 H 0 Z" />
                            </Viewbox>
                            <TextBlock Name="PART_ContentTextBlock"
                                VerticalAlignment="Center"
                                Margin="8 0 0 0"
                                FontSize="14"
                                Text="{TemplateBinding Content}" />
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="PART_RootBorder"       Property="Background" Value="#f0f0f0" />
                            <Setter TargetName="PART_IconPath"         Property="Fill"       Value="#0050b8" />
                            <Setter TargetName="PART_ContentTextBlock" Property="Foreground" Value="#0050b8" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="PART_RootBorder"       Property="Background" Value="#e0e0e0" />
                            <Setter TargetName="PART_IconPath"         Property="Fill"       Value="#002a66" />
                            <Setter TargetName="PART_ContentTextBlock" Property="Foreground" Value="#002a66" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </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>

<Border Name="PART_RootBorder"

Padding="{TemplateBinding Padding}"

CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CornerRadius}"

BorderThickness="{TemplateBinding BorderThickness}"

BorderBrush="{TemplateBinding BorderBrush}"

Background="{TemplateBinding Background}">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

<Viewbox

Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IconWidth}"

Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IconHeight}">

<Path Name="PART_IconPath"

Fill="#003e92"

Stretch="Uniform"

Data="M 0 0 H 20 V 20 H 0 Z" />

</Viewbox>

<TextBlock Name="PART_ContentTextBlock"

VerticalAlignment="Center"

Margin="8 0 0 0"

FontSize="14"

Text="{TemplateBinding Content}" />

</StackPanel>

</Border>

<ControlTemplate.Triggers>

</Trigger>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

▶ 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"
    xmlns:local="clr-namespace:TestProject"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="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"

xmlns:local="clr-namespace:TestProject"

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:StopButton
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Padding="10"
        Content="Stop" />
</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:StopButton

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10"

Content="Stop" />

</Window>

▶ StopButton.cs


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

namespace TestProject;

/// <summary>
/// 중단 버튼
/// </summary>
public class StopButton : Button
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 코너 반경 속성 - CornerRadiusProperty

    /// <summary>
    /// 코너 반경 속성
    /// </summary>
    public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register
    (
        "CornerRadius",
        typeof(CornerRadius),
        typeof(StopButton),
        new PropertyMetadata(new CornerRadius(5))
    );

    #endregion
    #region 아이콘 너비 속성 - IconWidthProperty

    /// <summary>
    /// 아이콘 너비 속성
    /// </summary>
    public static readonly DependencyProperty IconWidthProperty = DependencyProperty.Register
    (
        "IconWidth",
        typeof(double),
        typeof(StopButton),
        new PropertyMetadata(14.0)
    );

    #endregion
    #region 아이콘 높이 속성 - IconHeightProperty

    /// <summary>
    /// 아이콘 높이 속성
    /// </summary>
    public static readonly DependencyProperty IconHeightProperty = DependencyProperty.Register
    (
        "IconHeight",
        typeof(double),
        typeof(StopButton),
        new PropertyMetadata(14.0)
    );

    #endregion

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

    #region 코너 반경 - CornerRadius

    /// <summary>
    /// 코너 반경
    /// </summary>
    public CornerRadius CornerRadius
    {
        get => (CornerRadius)GetValue(CornerRadiusProperty);
        set => SetValue(CornerRadiusProperty, value);
    }

    #endregion
    #region 아이콘 너비 - IconWidth

    /// <summary>
    /// 아이콘 너비
    /// </summary>
    public double IconWidth
    {
        get => (double)GetValue(IconWidthProperty);
        set => SetValue(IconWidthProperty, value);
    }

    #endregion
    #region 아이콘 높이 - IconHeight

    /// <summary>
    /// 아이콘 높이
    /// </summary>
    public double IconHeight
    {
        get => (double)GetValue(IconHeightProperty);
        set => SetValue(IconHeightProperty, value);
    }

    #endregion

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

    #region 생성자 - StopButton()

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

    #endregion

    ////////////////////////////////////////////////////////////////////////////////////////// Instance
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - StopButton

    /// <summary>
    /// 생성자
    /// </summary>
    public StopButton() : base()
    {
        Content = "Stop";
    }

    #endregion
}

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

using System.Windows;

using System.Windows.Controls;

namespace TestProject;

/// <summary>

/// 중단 버튼

/// </summary>

public class StopButton : Button

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property

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

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

#region 코너 반경 속성 - CornerRadiusProperty

/// <summary>

/// 코너 반경 속성

/// </summary>

public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register

(

"CornerRadius",

typeof(CornerRadius),

typeof(StopButton),

new PropertyMetadata(new CornerRadius(5))

);

#endregion

#region 아이콘 너비 속성 - IconWidthProperty

/// <summary>

/// 아이콘 너비 속성

/// </summary>

public static readonly DependencyProperty IconWidthProperty = DependencyProperty.Register

(

"IconWidth",

typeof(double),

typeof(StopButton),

new PropertyMetadata(14.0)

);

#endregion

#region 아이콘 높이 속성 - IconHeightProperty

/// <summary>

/// 아이콘 높이 속성

/// </summary>

public static readonly DependencyProperty IconHeightProperty = DependencyProperty.Register

(

"IconHeight",

typeof(double),

typeof(StopButton),

new PropertyMetadata(14.0)

);

#endregion

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

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

#region 코너 반경 - CornerRadius

/// <summary>

/// 코너 반경

/// </summary>

public CornerRadius CornerRadius

{

get => (CornerRadius)GetValue(CornerRadiusProperty);

set => SetValue(CornerRadiusProperty, value);

}

#endregion

#region 아이콘 너비 - IconWidth

/// <summary>

/// 아이콘 너비

/// </summary>

public double IconWidth

{

get => (double)GetValue(IconWidthProperty);

set => SetValue(IconWidthProperty, value);

}

#endregion

#region 아이콘 높이 - IconHeight

/// <summary>

/// 아이콘 높이

/// </summary>

public double IconHeight

{

get => (double)GetValue(IconHeightProperty);

set => SetValue(IconHeightProperty, value);

}

#endregion

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

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

#region 생성자 - StopButton()

/// <summary>

/// 생성자

/// </summary>

static StopButton()

{

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

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Instance

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

#region 생성자 - StopButton

/// <summary>

/// 생성자

/// </summary>

public StopButton() : base()

{

Content = "Stop";

}

#endregion

}

TestProject.zip

[C#/WPF/.NET8] Control 클래스 : 이미지 회전 목마 컨트롤 만들기 2

■ Control 클래스를 사용해 이미지 회전 목마 컨트롤을 만드는 방법을 보여준다. ▶ ArrowButton.cs


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

namespace TestProject;

/// <summary>
/// 화살표 버튼
/// </summary>
public class ArrowButton : Button
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 배경 원 스트로크 두께 속성 - BackgroundEllipseStrokeThicknessProperty

    /// <summary>
    /// 배경 원 두께
    /// </summary>
    public static readonly DependencyProperty BackgroundEllipseStrokeThicknessProperty = DependencyProperty.Register
    (
        "BackgroundEllipseStrokeThickness",
        typeof(Thickness),
        typeof(ArrowButton),
        new PropertyMetadata(new Thickness(0))
    );

    #endregion
    #region 배경 원 스트로크 속성 - BackgroundEllipseStrokeProperty

    /// <summary>
    /// 배경 원 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty BackgroundEllipseStrokeProperty = DependencyProperty.Register
    (
        "BackgroundEllipseStroke",
        typeof(Brush),
        typeof(ArrowButton),
        new PropertyMetadata(Brushes.Transparent)
    );

    #endregion
    #region 배경 원 채우기 속성 - BackgroundEllipseFillProperty

    /// <summary>
    /// 배경 원 채우기 속성
    /// </summary>
    public static readonly DependencyProperty BackgroundEllipseFillProperty = DependencyProperty.Register
    (
        "BackgroundEllipseFill",
        typeof(Brush),
        typeof(ArrowButton),
        new PropertyMetadata(Brushes.Transparent)
    );

    #endregion
    #region 화살표 크기 속성 - ArrowSizeProperty

    /// <summary>
    /// 화살표 크기 속성
    /// </summary>
    public static readonly DependencyProperty ArrowSizeProperty = DependencyProperty.Register
    (
        "ArrowSize",
        typeof(double),
        typeof(ArrowButton),
        new PropertyMetadata(20.0)
    );

    #endregion
    #region 화살표 방향 속성 - ArrowDirectionProperty

    /// <summary>
    /// 화살표 방향 속성
    /// </summary>
    public static readonly DependencyProperty ArrowDirectionProperty = DependencyProperty.Register
    (
        "ArrowDirection",
        typeof(ArrowDirection),
        typeof(ArrowButton),
        new PropertyMetadata(ArrowDirection.Left, DirectionPropertyChangedCallback)
    );

    #endregion
    #region 화살표 스트로크 두께 속성 - ArrowStrokeThicknessProperty

    /// <summary>
    /// 화살표 두께
    /// </summary>
    public static readonly DependencyProperty ArrowStrokeThicknessProperty = DependencyProperty.Register
    (
        "ArrowStrokeThickness",
        typeof(Thickness),
        typeof(ArrowButton),
        new PropertyMetadata(new Thickness(1))
    );

    #endregion
    #region 화살표 스트로크 속성 - ArrowStrokeProperty

    /// <summary>
    /// 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty ArrowStrokeProperty = DependencyProperty.Register
    (
        "ArrowStroke",
        typeof(Brush),
        typeof(ArrowButton),
        new PropertyMetadata(Brushes.Black)
    );

    #endregion
    #region 왼쪽 화살표 패스 데이터 속성 - LeftArrowPathDataProperty

    /// <summary>
    /// 왼쪽 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty LeftArrowPathDataProperty = DependencyProperty.Register
    (
        "LeftArrowPathData",
        typeof(string),
        typeof(ArrowButton),
        new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15", ArrowPathDataPropertyChangedCallback)
    );

    #endregion
    #region 오른쪽 화살표 패스 데이터 속성 - RightArrowPathDataProperty

    /// <summary>
    /// 오른쪽 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty RightArrowPathDataProperty = DependencyProperty.Register
    (
        "RightArrowPathData",
        typeof(string),
        typeof(ArrowButton),
        new PropertyMetadata("M 5 10 L 15 10 M 15 10 L 10 5 M 15 10 L 10 15", ArrowPathDataPropertyChangedCallback)
    );

    #endregion
    #region 화살표 패스 데이터 속성 - ArrowPathDataProperty

    /// <summary>
    /// 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty ArrowPathDataProperty = DependencyProperty.Register
    (
        "ArrowPathData",
        typeof(string),
        typeof(ArrowButton),
        new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15")
    );

    #endregion

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

    #region 배경 원 채우기 - BackgroundEllipseFill

    /// <summary>
    /// 배경 원 채우기
    /// </summary>
    public Brush BackgroundEllipseFill
    {
        get => (Brush)GetValue(BackgroundEllipseFillProperty);
        set => SetValue(BackgroundEllipseFillProperty, value);
    }

    #endregion
    #region 배경 원 스트로크 두께 - BackgroundEllipseStrokeThickness

    /// <summary>
    /// 배경 원 스트로크 두께
    /// </summary>
    public Thickness BackgroundEllipseStrokeThickness
    {
        get => (Thickness)GetValue(BackgroundEllipseStrokeThicknessProperty);
        set => SetValue(BackgroundEllipseStrokeThicknessProperty, value);
    }

    #endregion
    #region 배경 원 스트로크 - BackgroundEllipseStroke

    /// <summary>
    /// 배경 원 스트로크
    /// </summary>
    public Brush BackgroundEllipseStroke
    {
        get => (Brush)GetValue(BackgroundEllipseStrokeProperty);
        set => SetValue(BackgroundEllipseStrokeProperty, value);
    }

    #endregion
    #region 화살표 크기 - ArrowSize

    /// <summary>
    /// 화살표 크기
    /// </summary>
    public double ArrowSize
    {
        get => (double)GetValue(ArrowSizeProperty);
        set => SetValue(ArrowSizeProperty, value);
    }

    #endregion
    #region 화살표 방향 - ArrowDirection

    /// <summary>
    /// 화살표 방향
    /// </summary>
    public ArrowDirection ArrowDirection
    {
        get => (ArrowDirection)GetValue(ArrowDirectionProperty);
        set => SetValue(ArrowDirectionProperty, value);
    }

    #endregion
    #region 화살표 스트로크 두께 - ArrowStrokeThickness

    /// <summary>
    /// 화살표 스트로크 두께
    /// </summary>
    public Thickness ArrowStrokeThickness
    {
        get => (Thickness)GetValue(ArrowStrokeThicknessProperty);
        set => SetValue(ArrowStrokeThicknessProperty, value);
    }

    #endregion
    #region 화살표 스트로크 - ArrowStroke

    /// <summary>
    /// 화살표 스트로크
    /// </summary>
    public Brush ArrowStroke
    {
        get => (Brush)GetValue(ArrowStrokeProperty);
        set => SetValue(ArrowStrokeProperty, value);
    }

    #endregion
    #region 왼쪽 화살표 패스 데이터 - LeftArrowPathData

    /// <summary>
    /// 왼쪽 화살표 패스 데이터
    /// </summary>
    public string LeftArrowPathData
    {
        get => (string)GetValue(LeftArrowPathDataProperty);
        set => SetValue(LeftArrowPathDataProperty, value);
    }

    #endregion
    #region 오른쪽 화살표 패스 데이터 - RightArrowPathData

    /// <summary>
    /// 오른쪽 화살표 패스 데이터
    /// </summary>
    public string RightArrowPathData
    {
        get => (string)GetValue(RightArrowPathDataProperty);
        set => SetValue(RightArrowPathDataProperty, value);
    }

    #endregion
    #region 화살표 패스 데이터 - ArrowPathData

    /// <summary>
    /// 화살표 패스 데이터
    /// </summary>
    public string ArrowPathData
    {
        get => (string)GetValue(ArrowPathDataProperty);
        private set => SetValue(ArrowPathDataProperty, value);
    }

    #endregion

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

    #region 생성자 - ArrowButton()

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

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Private

    #region 방향 속성 변경시 콜백 처리하기 - DirectionPropertyChangedCallback(d, e)

    /// <summary>
    /// 방향 속성 변경시 콜백 처리하기
    /// </summary>
    /// <param name="d">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private static void DirectionPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if(d is ArrowButton button)
        {
            button.UpdateArrowPathData();
        }
    }

    #endregion
    #region 화살표 패스 데이터 속성 변경시 콜백 처리하기 - ArrowPathDataPropertyChangedCallback(d, e)

    /// <summary>
    /// 화살표 패스 데이터 속성 변경시 콜백 처리하기
    /// </summary>
    /// <param name="d">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private static void ArrowPathDataPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if(d is ArrowButton button)
        {
            button.UpdateArrowPathData();
        }
    }

    #endregion

    ////////////////////////////////////////////////////////////////////////////////////////// Instance
    //////////////////////////////////////////////////////////////////////////////// Private

    #region 화살표 패스 데이터 업데이트하기 - UpdateArrowPathData()

    /// <summary>
    /// 화살표 패스 데이터 업데이트하기
    /// </summary>
    private void UpdateArrowPathData()
    {
        ArrowPathData = ArrowDirection == ArrowDirection.Left ? LeftArrowPathData : RightArrowPathData;
    }

    #endregion
}

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

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

namespace TestProject;

/// <summary>

/// 화살표 버튼

/// </summary>

public class ArrowButton : Button

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property

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

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

#region 배경 원 스트로크 두께 속성 - BackgroundEllipseStrokeThicknessProperty

/// <summary>

/// 배경 원 두께

/// </summary>

public static readonly DependencyProperty BackgroundEllipseStrokeThicknessProperty = DependencyProperty.Register

(

"BackgroundEllipseStrokeThickness",

typeof(Thickness),

typeof(ArrowButton),

new PropertyMetadata(new Thickness(0))

);

#endregion

#region 배경 원 스트로크 속성 - BackgroundEllipseStrokeProperty

/// <summary>

/// 배경 원 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty BackgroundEllipseStrokeProperty = DependencyProperty.Register

(

"BackgroundEllipseStroke",

typeof(Brush),

typeof(ArrowButton),

new PropertyMetadata(Brushes.Transparent)

);

#endregion

#region 배경 원 채우기 속성 - BackgroundEllipseFillProperty

/// <summary>

/// 배경 원 채우기 속성

/// </summary>

public static readonly DependencyProperty BackgroundEllipseFillProperty = DependencyProperty.Register

(

"BackgroundEllipseFill",

typeof(Brush),

typeof(ArrowButton),

new PropertyMetadata(Brushes.Transparent)

);

#endregion

#region 화살표 크기 속성 - ArrowSizeProperty

/// <summary>

/// 화살표 크기 속성

/// </summary>

public static readonly DependencyProperty ArrowSizeProperty = DependencyProperty.Register

(

"ArrowSize",

typeof(double),

typeof(ArrowButton),

new PropertyMetadata(20.0)

);

#endregion

#region 화살표 방향 속성 - ArrowDirectionProperty

/// <summary>

/// 화살표 방향 속성

/// </summary>

public static readonly DependencyProperty ArrowDirectionProperty = DependencyProperty.Register

(

"ArrowDirection",

typeof(ArrowDirection),

typeof(ArrowButton),

new PropertyMetadata(ArrowDirection.Left, DirectionPropertyChangedCallback)

);

#endregion

#region 화살표 스트로크 두께 속성 - ArrowStrokeThicknessProperty

/// <summary>

/// 화살표 두께

/// </summary>

public static readonly DependencyProperty ArrowStrokeThicknessProperty = DependencyProperty.Register

(

"ArrowStrokeThickness",

typeof(Thickness),

typeof(ArrowButton),

new PropertyMetadata(new Thickness(1))

);

#endregion

#region 화살표 스트로크 속성 - ArrowStrokeProperty

/// <summary>

/// 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty ArrowStrokeProperty = DependencyProperty.Register

(

"ArrowStroke",

typeof(Brush),

typeof(ArrowButton),

new PropertyMetadata(Brushes.Black)

);

#endregion

#region 왼쪽 화살표 패스 데이터 속성 - LeftArrowPathDataProperty

/// <summary>

/// 왼쪽 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty LeftArrowPathDataProperty = DependencyProperty.Register

(

"LeftArrowPathData",

typeof(string),

typeof(ArrowButton),

new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15", ArrowPathDataPropertyChangedCallback)

);

#endregion

#region 오른쪽 화살표 패스 데이터 속성 - RightArrowPathDataProperty

/// <summary>

/// 오른쪽 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty RightArrowPathDataProperty = DependencyProperty.Register

(

"RightArrowPathData",

typeof(string),

typeof(ArrowButton),

new PropertyMetadata("M 5 10 L 15 10 M 15 10 L 10 5 M 15 10 L 10 15", ArrowPathDataPropertyChangedCallback)

);

#endregion

#region 화살표 패스 데이터 속성 - ArrowPathDataProperty

/// <summary>

/// 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty ArrowPathDataProperty = DependencyProperty.Register

(

"ArrowPathData",

typeof(string),

typeof(ArrowButton),

new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15")

);

#endregion

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

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

#region 배경 원 채우기 - BackgroundEllipseFill

/// <summary>

/// 배경 원 채우기

/// </summary>

public Brush BackgroundEllipseFill

{

get => (Brush)GetValue(BackgroundEllipseFillProperty);

set => SetValue(BackgroundEllipseFillProperty, value);

}

#endregion

#region 배경 원 스트로크 두께 - BackgroundEllipseStrokeThickness

/// <summary>

/// 배경 원 스트로크 두께

/// </summary>

public Thickness BackgroundEllipseStrokeThickness

{

get => (Thickness)GetValue(BackgroundEllipseStrokeThicknessProperty);

set => SetValue(BackgroundEllipseStrokeThicknessProperty, value);

}

#endregion

#region 배경 원 스트로크 - BackgroundEllipseStroke

/// <summary>

/// 배경 원 스트로크

/// </summary>

public Brush BackgroundEllipseStroke

{

get => (Brush)GetValue(BackgroundEllipseStrokeProperty);

set => SetValue(BackgroundEllipseStrokeProperty, value);

}

#endregion

#region 화살표 크기 - ArrowSize

/// <summary>

/// 화살표 크기

/// </summary>

public double ArrowSize

{

get => (double)GetValue(ArrowSizeProperty);

set => SetValue(ArrowSizeProperty, value);

}

#endregion

#region 화살표 방향 - ArrowDirection

/// <summary>

/// 화살표 방향

/// </summary>

public ArrowDirection ArrowDirection

{

get => (ArrowDirection)GetValue(ArrowDirectionProperty);

set => SetValue(ArrowDirectionProperty, value);

}

#endregion

#region 화살표 스트로크 두께 - ArrowStrokeThickness

/// <summary>

/// 화살표 스트로크 두께

/// </summary>

public Thickness ArrowStrokeThickness

{

get => (Thickness)GetValue(ArrowStrokeThicknessProperty);

set => SetValue(ArrowStrokeThicknessProperty, value);

}

#endregion

#region 화살표 스트로크 - ArrowStroke

/// <summary>

/// 화살표 스트로크

/// </summary>

public Brush ArrowStroke

{

get => (Brush)GetValue(ArrowStrokeProperty);

set => SetValue(ArrowStrokeProperty, value);

}

#endregion

#region 왼쪽 화살표 패스 데이터 - LeftArrowPathData

/// <summary>

/// 왼쪽 화살표 패스 데이터

/// </summary>

public string LeftArrowPathData

{

get => (string)GetValue(LeftArrowPathDataProperty);

set => SetValue(LeftArrowPathDataProperty, value);

}

#endregion

#region 오른쪽 화살표 패스 데이터 - RightArrowPathData

/// <summary>

/// 오른쪽 화살표 패스 데이터

/// </summary>

public string RightArrowPathData

{

get => (string)GetValue(RightArrowPathDataProperty);

set => SetValue(RightArrowPathDataProperty, value);

}

#endregion

#region 화살표 패스 데이터 - ArrowPathData

/// <summary>

/// 화살표 패스 데이터

/// </summary>

public string ArrowPathData

{

get => (string)GetValue(ArrowPathDataProperty);

private set => SetValue(ArrowPathDataProperty, value);

}

#endregion

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

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

#region 생성자 - ArrowButton()

/// <summary>

/// 생성자

/// </summary>

static ArrowButton()

{

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

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

//////////////////////////////////////////////////////////////////////////////// Private

#region 방향 속성 변경시 콜백 처리하기 - DirectionPropertyChangedCallback(d, e)

/// <summary>

/// 방향 속성 변경시 콜백 처리하기

/// </summary>

/// <param name="d">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private static void DirectionPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

if(d is ArrowButton button)

{

button.UpdateArrowPathData();

}

#endregion

#region 화살표 패스 데이터 속성 변경시 콜백 처리하기 - ArrowPathDataPropertyChangedCallback(d, e)

/// <summary>

/// 화살표 패스 데이터 속성 변경시 콜백 처리하기

/// </summary>

/// <param name="d">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private static void ArrowPathDataPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

if(d is ArrowButton button)

{

button.UpdateArrowPathData();

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Instance

//////////////////////////////////////////////////////////////////////////////// Private

#region 화살표 패스 데이터 업데이트하기 - UpdateArrowPathData()

/// <summary>

/// 화살표 패스 데이터 업데이트하기

/// </summary>

private void UpdateArrowPathData()

{

ArrowPathData = ArrowDirection == ArrowDirection.Left ? LeftArrowPathData : RightArrowPathData;

}

#endregion

}

▶ ArrowDirection.cs


namespace TestProject;

/// <summary>
/// 화살표 방향
/// </summary>
public enum ArrowDirection
{
    Left,
    Right
}

namespace TestProject;

/// <summary>

/// 화살표 방향

/// </summary>

public enum ArrowDirection

{

Left,

Right

}

▶ 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:ArrowButton}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ArrowButton}">
                    <Grid Name="grid">
                        <Ellipse Name="backgroundEllipse"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStrokeThickness}"
                            Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStroke}"
                            Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseFill}"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"/>
                        <Viewbox
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Width="{TemplateBinding ArrowSize}"
                            Height="{TemplateBinding ArrowSize}"
                            Margin="{TemplateBinding Padding}">
                            <Canvas
                                Width="20"
                                Height="20">
                                <Path Name="arrowPath"
                                    StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStrokeThickness}"
                                    Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStroke}"
                                    StrokeStartLineCap="Round"
                                    StrokeEndLineCap="Round"
                                    Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowPathData}" />
                            </Canvas>
                        </Viewbox>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter
                                TargetName="backgroundEllipse"
                                Property="Fill"
                                Value="#e0e0e0" />
                            <Setter
                                TargetName="arrowPath"
                                Property="Stroke"
                                Value="Black" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter
                                TargetName="backgroundEllipse"
                                Property="Fill"
                                Value="#bdbdbd" />
                            <Setter
                                TargetName="grid"
                                Property="RenderTransform">
                                <Setter.Value>
                                    <TranslateTransform
                                        X="1"
                                        Y="1" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width"     Value="32" />
        <Setter Property="Height"    Value="32" />
        <Setter Property="ArrowSize" Value="20" />
    </Style>
    <Style TargetType="{x:Type local:ImageCarousel}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ImageCarousel}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="10"  />
                            <ColumnDefinition Width="*"   />
                            <ColumnDefinition Width="10"  />
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <local:ArrowButton x:Name="PART_LeftArrowButton" Grid.Column="0"
                            Width="32"
                            Height="32"
                            ArrowDirection="Left"
                            ArrowSize="20"
                            ArrowStrokeThickness="2"
                            ArrowStroke="DarkGray" />
                        <Canvas Name="PART_ItemCanvas" Grid.Column="2"
                            ClipToBounds="True" />
                        <local:ArrowButton x:Name="PART_RightArrowButton" Grid.Column="4"
                            Width="32"
                            Height="32"
                            ArrowDirection="Right"
                            ArrowSize="20"
                            ArrowStrokeThickness="2"
                            ArrowStroke="DarkGray" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

100

101

102

103

104

105

<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>

<Ellipse Name="backgroundEllipse"

HorizontalAlignment="Center"

VerticalAlignment="Center"

StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStrokeThickness}"

Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStroke}"

Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseFill}"

Width="{TemplateBinding Width}"

Height="{TemplateBinding Height}"/>

<Viewbox

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="{TemplateBinding ArrowSize}"

Height="{TemplateBinding ArrowSize}"

Margin="{TemplateBinding Padding}">

<Canvas

Width="20"

Height="20">

<Path Name="arrowPath"

StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStrokeThickness}"

Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStroke}"

StrokeStartLineCap="Round"

StrokeEndLineCap="Round"

Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowPathData}" />

</Canvas>

</Viewbox>

</Grid>

<ControlTemplate.Triggers>

<Setter

TargetName="backgroundEllipse"

Property="Fill"

Value="#e0e0e0" />

<Setter

TargetName="arrowPath"

Property="Stroke"

Value="Black" />

</Trigger>

<Setter

TargetName="backgroundEllipse"

Property="Fill"

Value="#bdbdbd" />

<Setter

TargetName="grid"

Property="RenderTransform">

<Setter.Value>

<TranslateTransform

X="1"

Y="1" />

</Setter.Value>

</Setter>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Setter.Value>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<local:ArrowButton x:Name="PART_LeftArrowButton" Grid.Column="0"

Width="32"

Height="32"

ArrowDirection="Left"

ArrowSize="20"

ArrowStrokeThickness="2"

ArrowStroke="DarkGray" />

<Canvas Name="PART_ItemCanvas" Grid.Column="2"

ClipToBounds="True" />

<local:ArrowButton x:Name="PART_RightArrowButton" Grid.Column="4"

Width="32"

Height="32"

ArrowDirection="Right"

ArrowSize="20"

ArrowStrokeThickness="2"

ArrowStroke="DarkGray" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

▶ ImageCarousel.cs

[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:ImageButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ImageButton}">
                    <Border Name="PART_Border"
                        Background="Transparent">
                        <Grid>
                            <Image Name="PART_IconImage"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Width="{TemplateBinding ImageWidth}"
                                Height="{TemplateBinding ImageHeight}"
                                Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EnabledImageSource}" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter
                                TargetName="PART_IconImage"
                                Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform
                                        ScaleX="0.9"
                                        ScaleY="0.9" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter
                                TargetName="PART_IconImage"
                                Property="Source"
                                Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisabledImageSource}" />
                            <Setter Property="Opacity" Value="0.5" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </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>

<Border Name="PART_Border"

Background="Transparent">

<Grid>

<Image Name="PART_IconImage"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="{TemplateBinding ImageWidth}"

Height="{TemplateBinding ImageHeight}"

Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=EnabledImageSource}" />

</Grid>

</Border>

<ControlTemplate.Triggers>

<Setter

TargetName="PART_IconImage"

Property="RenderTransform">

<Setter.Value>

<ScaleTransform

ScaleX="0.9"

ScaleY="0.9" />

</Setter.Value>

</Setter>

</Trigger>

<Setter

TargetName="PART_IconImage"

Property="Source"

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

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

▶ ImageButton.cs


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

namespace TestProject;

/// <summary>
/// 이미지 버튼
/// </summary>
public class ImageButton : Button
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property
    ////////////////////////////////////////////////////////////////////////////////////////// Statc
    //////////////////////////////////////////////////////////////////////////////// Statc

    #region 이미지 너비 속성 - ImageWidthProperty

    /// <summary>
    /// 이미지 너비 속성
    /// </summary>
    public static readonly DependencyProperty ImageWidthProperty = DependencyProperty.Register
    (
        "ImageWidth",
        typeof(double),
        typeof(ImageButton),
        new PropertyMetadata(32.0)
    );

    #endregion
    #region 이미지 높이 속성 - ImageHeightProperty

    /// <summary>
    /// 이미지 높이 속성
    /// </summary>
    public static readonly DependencyProperty ImageHeightProperty = DependencyProperty.Register
    (
        "ImageHeight",
        typeof(double),
        typeof(ImageButton),
        new PropertyMetadata(32.0)
    );

    #endregion
    #region 이용 가능 이미지 소스 속성 - EnabledImageSourceProperty

    /// <summary>
    /// 이용 가능 이미지 소스 속성
    /// </summary>
    public static readonly DependencyProperty EnabledImageSourceProperty = DependencyProperty.Register
    (
        "EnabledImageSource",
        typeof(ImageSource),
        typeof(ImageButton),
        new PropertyMetadata(null)
    );

    #endregion
    #region 이용 불가 이미지 소스 속성 - DisabledImageSourceProperty

    /// <summary>
    /// 이용 불가 이미지 소스 속성
    /// </summary>
    public static readonly DependencyProperty DisabledImageSourceProperty = DependencyProperty.Register
    (
        "DisabledImageSource",
        typeof(ImageSource),
        typeof(ImageButton),
        new PropertyMetadata(null)
    );

    #endregion

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

    #region 이미지 너비 - ImageWidth

    /// <summary>
    /// 이미지 너비
    /// </summary>
    public double ImageWidth
    {
        get => (double)GetValue(ImageWidthProperty);
        set => SetValue(ImageWidthProperty, value);
    }

    #endregion
    #region 이미지 높이 - ImageHeight

    /// <summary>
    /// 이미지 높이
    /// </summary>
    public double ImageHeight
    {
        get => (double)GetValue(ImageHeightProperty);
        set => SetValue(ImageHeightProperty, value);
    }

    #endregion
    #region 이용 가능 이미지 소스 - EnabledImageSource

    /// <summary>
    /// 이용 가능 이미지 소스
    /// </summary>
    public ImageSource EnabledImageSource
    {
        get => (ImageSource)GetValue(EnabledImageSourceProperty);
        set => SetValue(EnabledImageSourceProperty, value);
    }

    #endregion
    #region 이용 불가 이미지 소스 - DisabledImageSource

    /// <summary>
    /// 이용 불가 이미지 소스
    /// </summary>
    public ImageSource DisabledImageSource
    {
        get => (ImageSource)GetValue(DisabledImageSourceProperty);
        set => SetValue(DisabledImageSourceProperty, value);
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Statc

    #region 생성자 - ImageButton

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

    #endregion
}

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

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

namespace TestProject;

/// <summary>

/// 이미지 버튼

/// </summary>

public class ImageButton : Button

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property

////////////////////////////////////////////////////////////////////////////////////////// Statc

//////////////////////////////////////////////////////////////////////////////// Statc

#region 이미지 너비 속성 - ImageWidthProperty

/// <summary>

/// 이미지 너비 속성

/// </summary>

public static readonly DependencyProperty ImageWidthProperty = DependencyProperty.Register

(

"ImageWidth",

typeof(double),

typeof(ImageButton),

new PropertyMetadata(32.0)

);

#endregion

#region 이미지 높이 속성 - ImageHeightProperty

/// <summary>

/// 이미지 높이 속성

/// </summary>

public static readonly DependencyProperty ImageHeightProperty = DependencyProperty.Register

(

"ImageHeight",

typeof(double),

typeof(ImageButton),

new PropertyMetadata(32.0)

);

#endregion

#region 이용 가능 이미지 소스 속성 - EnabledImageSourceProperty

/// <summary>

/// 이용 가능 이미지 소스 속성

/// </summary>

public static readonly DependencyProperty EnabledImageSourceProperty = DependencyProperty.Register

(

"EnabledImageSource",

typeof(ImageSource),

typeof(ImageButton),

new PropertyMetadata(null)

);

#endregion

#region 이용 불가 이미지 소스 속성 - DisabledImageSourceProperty

/// <summary>

/// 이용 불가 이미지 소스 속성

/// </summary>

public static readonly DependencyProperty DisabledImageSourceProperty = DependencyProperty.Register

(

"DisabledImageSource",

typeof(ImageSource),

typeof(ImageButton),

new PropertyMetadata(null)

);

#endregion

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

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

#region 이미지 너비 - ImageWidth

/// <summary>

/// 이미지 너비

/// </summary>

public double ImageWidth

{

get => (double)GetValue(ImageWidthProperty);

set => SetValue(ImageWidthProperty, value);

}

#endregion

#region 이미지 높이 - ImageHeight

/// <summary>

/// 이미지 높이

/// </summary>

public double ImageHeight

{

get => (double)GetValue(ImageHeightProperty);

set => SetValue(ImageHeightProperty, value);

}

#endregion

#region 이용 가능 이미지 소스 - EnabledImageSource

/// <summary>

/// 이용 가능 이미지 소스

/// </summary>

public ImageSource EnabledImageSource

{

get => (ImageSource)GetValue(EnabledImageSourceProperty);

set => SetValue(EnabledImageSourceProperty, value);

}

#endregion

#region 이용 불가 이미지 소스 - DisabledImageSource

/// <summary>

/// 이용 불가 이미지 소스

/// </summary>

public ImageSource DisabledImageSource

{

get => (ImageSource)GetValue(DisabledImageSourceProperty);

set => SetValue(DisabledImageSourceProperty, value);

}

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Statc

#region 생성자 - ImageButton

/// <summary>

/// 생성자

/// </summary>

static ImageButton()

{

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

}

#endregion

}

▶ MainApplication.cs


<Application x:Class="TestProject.MainApplication"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestProject"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="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"

xmlns:local="clr-namespace:TestProject"

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">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <local:ImageButton x:Name="imageButton1"
            Width="40"
            Height="40"
            ImageWidth="40"
            ImageHeight="40"
            EnabledImageSource="IMAGE/new_chat.png"
            DisabledImageSource="IMAGE/new_chat_gray.png" />
        <local:ImageButton x:Name="imageButton2"
            Margin="0 20 0 0"
            Width="20"
            Height="20"
            ImageWidth="18"
            ImageHeight="18"
            EnabledImageSource="IMAGE/send.png"
            DisabledImageSource="IMAGE/send_gray.png" />
        <Button Name="toggleButton"
            Margin="0 30 0 0"
            Padding="10"
            Content="IsEnabled 속성 토글" />
    </StackPanel>
</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">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<local:ImageButton x:Name="imageButton1"

Width="40"

Height="40"

ImageWidth="40"

ImageHeight="40"

EnabledImageSource="IMAGE/new_chat.png"

DisabledImageSource="IMAGE/new_chat_gray.png" />

<local:ImageButton x:Name="imageButton2"

Margin="0 20 0 0"

Width="20"

Height="20"

ImageWidth="18"

ImageHeight="18"

EnabledImageSource="IMAGE/send.png"

DisabledImageSource="IMAGE/send_gray.png" />

<Button Name="toggleButton"

Margin="0 30 0 0"

Padding="10"

Content="IsEnabled 속성 토글" />

</StackPanel>

</Window>

▶

[C#/WPF/.NET8] Control 클래스 : 이미지 회전 목마 컨트롤 만들기 1

■ Control 클래스를 사용해 이미지 회전 목마 컨트롤을 만드는 방법을 보여준다. ▶ ArrowButton.cs


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

namespace TestProject;

/// <summary>
/// 화살표 버튼
/// </summary>
public class ArrowButton : Button
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 배경 원 스트로크 두께 속성 - BackgroundEllipseStrokeThicknessProperty

    /// <summary>
    /// 배경 원 두께
    /// </summary>
    public static readonly DependencyProperty BackgroundEllipseStrokeThicknessProperty = DependencyProperty.Register
    (
        "BackgroundEllipseStrokeThickness",
        typeof(Thickness),
        typeof(ArrowButton),
        new PropertyMetadata(new Thickness(0))
    );

    #endregion
    #region 배경 원 스트로크 속성 - BackgroundEllipseStrokeProperty

    /// <summary>
    /// 배경 원 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty BackgroundEllipseStrokeProperty = DependencyProperty.Register
    (
        "BackgroundEllipseStroke",
        typeof(Brush),
        typeof(ArrowButton),
        new PropertyMetadata(Brushes.Transparent)
    );

    #endregion
    #region 배경 원 채우기 속성 - BackgroundEllipseFillProperty

    /// <summary>
    /// 배경 원 채우기 속성
    /// </summary>
    public static readonly DependencyProperty BackgroundEllipseFillProperty = DependencyProperty.Register
    (
        "BackgroundEllipseFill",
        typeof(Brush),
        typeof(ArrowButton),
        new PropertyMetadata(Brushes.Transparent)
    );

    #endregion
    #region 화살표 크기 속성 - ArrowSizeProperty

    /// <summary>
    /// 화살표 크기 속성
    /// </summary>
    public static readonly DependencyProperty ArrowSizeProperty = DependencyProperty.Register
    (
        "ArrowSize",
        typeof(double),
        typeof(ArrowButton),
        new PropertyMetadata(20.0)
    );

    #endregion
    #region 화살표 방향 속성 - ArrowDirectionProperty

    /// <summary>
    /// 화살표 방향 속성
    /// </summary>
    public static readonly DependencyProperty ArrowDirectionProperty = DependencyProperty.Register
    (
        "ArrowDirection",
        typeof(ArrowDirection),
        typeof(ArrowButton),
        new PropertyMetadata(ArrowDirection.Left, DirectionPropertyChangedCallback)
    );

    #endregion
    #region 화살표 스트로크 두께 속성 - ArrowStrokeThicknessProperty

    /// <summary>
    /// 화살표 두께
    /// </summary>
    public static readonly DependencyProperty ArrowStrokeThicknessProperty = DependencyProperty.Register
    (
        "ArrowStrokeThickness",
        typeof(Thickness),
        typeof(ArrowButton),
        new PropertyMetadata(new Thickness(1))
    );

    #endregion
    #region 화살표 스트로크 속성 - ArrowStrokeProperty

    /// <summary>
    /// 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty ArrowStrokeProperty = DependencyProperty.Register
    (
        "ArrowStroke",
        typeof(Brush),
        typeof(ArrowButton),
        new PropertyMetadata(Brushes.Black)
    );

    #endregion
    #region 왼쪽 화살표 패스 데이터 속성 - LeftArrowPathDataProperty

    /// <summary>
    /// 왼쪽 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty LeftArrowPathDataProperty = DependencyProperty.Register
    (
        "LeftArrowPathData",
        typeof(string),
        typeof(ArrowButton),
        new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15", ArrowPathDataPropertyChangedCallback)
    );

    #endregion
    #region 오른쪽 화살표 패스 데이터 속성 - RightArrowPathDataProperty

    /// <summary>
    /// 오른쪽 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty RightArrowPathDataProperty = DependencyProperty.Register
    (
        "RightArrowPathData",
        typeof(string),
        typeof(ArrowButton),
        new PropertyMetadata("M 5 10 L 15 10 M 15 10 L 10 5 M 15 10 L 10 15", ArrowPathDataPropertyChangedCallback)
    );

    #endregion
    #region 화살표 패스 데이터 속성 - ArrowPathDataProperty

    /// <summary>
    /// 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty ArrowPathDataProperty = DependencyProperty.Register
    (
        "ArrowPathData",
        typeof(string),
        typeof(ArrowButton),
        new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15")
    );

    #endregion

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

    #region 배경 원 채우기 - BackgroundEllipseFill

    /// <summary>
    /// 배경 원 채우기
    /// </summary>
    public Brush BackgroundEllipseFill
    {
        get => (Brush)GetValue(BackgroundEllipseFillProperty);
        set => SetValue(BackgroundEllipseFillProperty, value);
    }

    #endregion
    #region 배경 원 스트로크 두께 - BackgroundEllipseStrokeThickness

    /// <summary>
    /// 배경 원 스트로크 두께
    /// </summary>
    public Thickness BackgroundEllipseStrokeThickness
    {
        get => (Thickness)GetValue(BackgroundEllipseStrokeThicknessProperty);
        set => SetValue(BackgroundEllipseStrokeThicknessProperty, value);
    }

    #endregion
    #region 배경 원 스트로크 - BackgroundEllipseStroke

    /// <summary>
    /// 배경 원 스트로크
    /// </summary>
    public Brush BackgroundEllipseStroke
    {
        get => (Brush)GetValue(BackgroundEllipseStrokeProperty);
        set => SetValue(BackgroundEllipseStrokeProperty, value);
    }

    #endregion
    #region 화살표 크기 - ArrowSize

    /// <summary>
    /// 화살표 크기
    /// </summary>
    public double ArrowSize
    {
        get => (double)GetValue(ArrowSizeProperty);
        set => SetValue(ArrowSizeProperty, value);
    }

    #endregion
    #region 화살표 방향 - ArrowDirection

    /// <summary>
    /// 화살표 방향
    /// </summary>
    public ArrowDirection ArrowDirection
    {
        get => (ArrowDirection)GetValue(ArrowDirectionProperty);
        set => SetValue(ArrowDirectionProperty, value);
    }

    #endregion
    #region 화살표 스트로크 두께 - ArrowStrokeThickness

    /// <summary>
    /// 화살표 스트로크 두께
    /// </summary>
    public Thickness ArrowStrokeThickness
    {
        get => (Thickness)GetValue(ArrowStrokeThicknessProperty);
        set => SetValue(ArrowStrokeThicknessProperty, value);
    }

    #endregion
    #region 화살표 스트로크 - ArrowStroke

    /// <summary>
    /// 화살표 스트로크
    /// </summary>
    public Brush ArrowStroke
    {
        get => (Brush)GetValue(ArrowStrokeProperty);
        set => SetValue(ArrowStrokeProperty, value);
    }

    #endregion
    #region 왼쪽 화살표 패스 데이터 - LeftArrowPathData

    /// <summary>
    /// 왼쪽 화살표 패스 데이터
    /// </summary>
    public string LeftArrowPathData
    {
        get => (string)GetValue(LeftArrowPathDataProperty);
        set => SetValue(LeftArrowPathDataProperty, value);
    }

    #endregion
    #region 오른쪽 화살표 패스 데이터 - RightArrowPathData

    /// <summary>
    /// 오른쪽 화살표 패스 데이터
    /// </summary>
    public string RightArrowPathData
    {
        get => (string)GetValue(RightArrowPathDataProperty);
        set => SetValue(RightArrowPathDataProperty, value);
    }

    #endregion
    #region 화살표 패스 데이터 - ArrowPathData

    /// <summary>
    /// 화살표 패스 데이터
    /// </summary>
    public string ArrowPathData
    {
        get => (string)GetValue(ArrowPathDataProperty);
        private set => SetValue(ArrowPathDataProperty, value);
    }

    #endregion

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

    #region 생성자 - ArrowButton()

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

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Private

    #region 방향 속성 변경시 콜백 처리하기 - DirectionPropertyChangedCallback(d, e)

    /// <summary>
    /// 방향 속성 변경시 콜백 처리하기
    /// </summary>
    /// <param name="d">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private static void DirectionPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if(d is ArrowButton button)
        {
            button.UpdateArrowPathData();
        }
    }

    #endregion
    #region 화살표 패스 데이터 속성 변경시 콜백 처리하기 - ArrowPathDataPropertyChangedCallback(d, e)

    /// <summary>
    /// 화살표 패스 데이터 속성 변경시 콜백 처리하기
    /// </summary>
    /// <param name="d">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private static void ArrowPathDataPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if(d is ArrowButton button)
        {
            button.UpdateArrowPathData();
        }
    }

    #endregion

    ////////////////////////////////////////////////////////////////////////////////////////// Instance
    //////////////////////////////////////////////////////////////////////////////// Private

    #region 화살표 패스 데이터 업데이트하기 - UpdateArrowPathData()

    /// <summary>
    /// 화살표 패스 데이터 업데이트하기
    /// </summary>
    private void UpdateArrowPathData()
    {
        ArrowPathData = ArrowDirection == ArrowDirection.Left ? LeftArrowPathData : RightArrowPathData;
    }

    #endregion
}

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

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

namespace TestProject;

/// <summary>

/// 화살표 버튼

/// </summary>

public class ArrowButton : Button

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property

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

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

#region 배경 원 스트로크 두께 속성 - BackgroundEllipseStrokeThicknessProperty

/// <summary>

/// 배경 원 두께

/// </summary>

public static readonly DependencyProperty BackgroundEllipseStrokeThicknessProperty = DependencyProperty.Register

(

"BackgroundEllipseStrokeThickness",

typeof(Thickness),

typeof(ArrowButton),

new PropertyMetadata(new Thickness(0))

);

#endregion

#region 배경 원 스트로크 속성 - BackgroundEllipseStrokeProperty

/// <summary>

/// 배경 원 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty BackgroundEllipseStrokeProperty = DependencyProperty.Register

(

"BackgroundEllipseStroke",

typeof(Brush),

typeof(ArrowButton),

new PropertyMetadata(Brushes.Transparent)

);

#endregion

#region 배경 원 채우기 속성 - BackgroundEllipseFillProperty

/// <summary>

/// 배경 원 채우기 속성

/// </summary>

public static readonly DependencyProperty BackgroundEllipseFillProperty = DependencyProperty.Register

(

"BackgroundEllipseFill",

typeof(Brush),

typeof(ArrowButton),

new PropertyMetadata(Brushes.Transparent)

);

#endregion

#region 화살표 크기 속성 - ArrowSizeProperty

/// <summary>

/// 화살표 크기 속성

/// </summary>

public static readonly DependencyProperty ArrowSizeProperty = DependencyProperty.Register

(

"ArrowSize",

typeof(double),

typeof(ArrowButton),

new PropertyMetadata(20.0)

);

#endregion

#region 화살표 방향 속성 - ArrowDirectionProperty

/// <summary>

/// 화살표 방향 속성

/// </summary>

public static readonly DependencyProperty ArrowDirectionProperty = DependencyProperty.Register

(

"ArrowDirection",

typeof(ArrowDirection),

typeof(ArrowButton),

new PropertyMetadata(ArrowDirection.Left, DirectionPropertyChangedCallback)

);

#endregion

#region 화살표 스트로크 두께 속성 - ArrowStrokeThicknessProperty

/// <summary>

/// 화살표 두께

/// </summary>

public static readonly DependencyProperty ArrowStrokeThicknessProperty = DependencyProperty.Register

(

"ArrowStrokeThickness",

typeof(Thickness),

typeof(ArrowButton),

new PropertyMetadata(new Thickness(1))

);

#endregion

#region 화살표 스트로크 속성 - ArrowStrokeProperty

/// <summary>

/// 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty ArrowStrokeProperty = DependencyProperty.Register

(

"ArrowStroke",

typeof(Brush),

typeof(ArrowButton),

new PropertyMetadata(Brushes.Black)

);

#endregion

#region 왼쪽 화살표 패스 데이터 속성 - LeftArrowPathDataProperty

/// <summary>

/// 왼쪽 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty LeftArrowPathDataProperty = DependencyProperty.Register

(

"LeftArrowPathData",

typeof(string),

typeof(ArrowButton),

new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15", ArrowPathDataPropertyChangedCallback)

);

#endregion

#region 오른쪽 화살표 패스 데이터 속성 - RightArrowPathDataProperty

/// <summary>

/// 오른쪽 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty RightArrowPathDataProperty = DependencyProperty.Register

(

"RightArrowPathData",

typeof(string),

typeof(ArrowButton),

new PropertyMetadata("M 5 10 L 15 10 M 15 10 L 10 5 M 15 10 L 10 15", ArrowPathDataPropertyChangedCallback)

);

#endregion

#region 화살표 패스 데이터 속성 - ArrowPathDataProperty

/// <summary>

/// 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty ArrowPathDataProperty = DependencyProperty.Register

(

"ArrowPathData",

typeof(string),

typeof(ArrowButton),

new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15")

);

#endregion

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

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

#region 배경 원 채우기 - BackgroundEllipseFill

/// <summary>

/// 배경 원 채우기

/// </summary>

public Brush BackgroundEllipseFill

{

get => (Brush)GetValue(BackgroundEllipseFillProperty);

set => SetValue(BackgroundEllipseFillProperty, value);

}

#endregion

#region 배경 원 스트로크 두께 - BackgroundEllipseStrokeThickness

/// <summary>

/// 배경 원 스트로크 두께

/// </summary>

public Thickness BackgroundEllipseStrokeThickness

{

get => (Thickness)GetValue(BackgroundEllipseStrokeThicknessProperty);

set => SetValue(BackgroundEllipseStrokeThicknessProperty, value);

}

#endregion

#region 배경 원 스트로크 - BackgroundEllipseStroke

/// <summary>

/// 배경 원 스트로크

/// </summary>

public Brush BackgroundEllipseStroke

{

get => (Brush)GetValue(BackgroundEllipseStrokeProperty);

set => SetValue(BackgroundEllipseStrokeProperty, value);

}

#endregion

#region 화살표 크기 - ArrowSize

/// <summary>

/// 화살표 크기

/// </summary>

public double ArrowSize

{

get => (double)GetValue(ArrowSizeProperty);

set => SetValue(ArrowSizeProperty, value);

}

#endregion

#region 화살표 방향 - ArrowDirection

/// <summary>

/// 화살표 방향

/// </summary>

public ArrowDirection ArrowDirection

{

get => (ArrowDirection)GetValue(ArrowDirectionProperty);

set => SetValue(ArrowDirectionProperty, value);

}

#endregion

#region 화살표 스트로크 두께 - ArrowStrokeThickness

/// <summary>

/// 화살표 스트로크 두께

/// </summary>

public Thickness ArrowStrokeThickness

{

get => (Thickness)GetValue(ArrowStrokeThicknessProperty);

set => SetValue(ArrowStrokeThicknessProperty, value);

}

#endregion

#region 화살표 스트로크 - ArrowStroke

/// <summary>

/// 화살표 스트로크

/// </summary>

public Brush ArrowStroke

{

get => (Brush)GetValue(ArrowStrokeProperty);

set => SetValue(ArrowStrokeProperty, value);

}

#endregion

#region 왼쪽 화살표 패스 데이터 - LeftArrowPathData

/// <summary>

/// 왼쪽 화살표 패스 데이터

/// </summary>

public string LeftArrowPathData

{

get => (string)GetValue(LeftArrowPathDataProperty);

set => SetValue(LeftArrowPathDataProperty, value);

}

#endregion

#region 오른쪽 화살표 패스 데이터 - RightArrowPathData

/// <summary>

/// 오른쪽 화살표 패스 데이터

/// </summary>

public string RightArrowPathData

{

get => (string)GetValue(RightArrowPathDataProperty);

set => SetValue(RightArrowPathDataProperty, value);

}

#endregion

#region 화살표 패스 데이터 - ArrowPathData

/// <summary>

/// 화살표 패스 데이터

/// </summary>

public string ArrowPathData

{

get => (string)GetValue(ArrowPathDataProperty);

private set => SetValue(ArrowPathDataProperty, value);

}

#endregion

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

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

#region 생성자 - ArrowButton()

/// <summary>

/// 생성자

/// </summary>

static ArrowButton()

{

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

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

//////////////////////////////////////////////////////////////////////////////// Private

#region 방향 속성 변경시 콜백 처리하기 - DirectionPropertyChangedCallback(d, e)

/// <summary>

/// 방향 속성 변경시 콜백 처리하기

/// </summary>

/// <param name="d">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private static void DirectionPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

if(d is ArrowButton button)

{

button.UpdateArrowPathData();

}

#endregion

#region 화살표 패스 데이터 속성 변경시 콜백 처리하기 - ArrowPathDataPropertyChangedCallback(d, e)

/// <summary>

/// 화살표 패스 데이터 속성 변경시 콜백 처리하기

/// </summary>

/// <param name="d">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private static void ArrowPathDataPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

if(d is ArrowButton button)

{

button.UpdateArrowPathData();

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Instance

//////////////////////////////////////////////////////////////////////////////// Private

#region 화살표 패스 데이터 업데이트하기 - UpdateArrowPathData()

/// <summary>

/// 화살표 패스 데이터 업데이트하기

/// </summary>

private void UpdateArrowPathData()

{

ArrowPathData = ArrowDirection == ArrowDirection.Left ? LeftArrowPathData : RightArrowPathData;

}

#endregion

}

▶ ArrowDirection.cs


namespace TestProject;

/// <summary>
/// 화살표 방향
/// </summary>
public enum ArrowDirection
{
    Left,
    Right
}

namespace TestProject;

/// <summary>

/// 화살표 방향

/// </summary>

public enum ArrowDirection

{

Left,

Right

}

▶ 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:ArrowButton}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ArrowButton}">
                    <Grid Name="grid">
                        <Ellipse Name="backgroundEllipse"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStrokeThickness}"
                            Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStroke}"
                            Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseFill}"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"/>
                        <Viewbox
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Width="{TemplateBinding ArrowSize}"
                            Height="{TemplateBinding ArrowSize}"
                            Margin="{TemplateBinding Padding}">
                            <Canvas
                                Width="20"
                                Height="20">
                                <Path Name="arrowPath"
                                    StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStrokeThickness}"
                                    Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStroke}"
                                    StrokeStartLineCap="Round"
                                    StrokeEndLineCap="Round"
                                    Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowPathData}" />
                            </Canvas>
                        </Viewbox>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter
                                TargetName="backgroundEllipse"
                                Property="Fill"
                                Value="#e0e0e0" />
                            <Setter
                                TargetName="arrowPath"
                                Property="Stroke"
                                Value="Black" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter
                                TargetName="backgroundEllipse"
                                Property="Fill"
                                Value="#bdbdbd" />
                            <Setter
                                TargetName="grid"
                                Property="RenderTransform">
                                <Setter.Value>
                                    <TranslateTransform
                                        X="1"
                                        Y="1" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width"     Value="32" />
        <Setter Property="Height"    Value="32" />
        <Setter Property="ArrowSize" Value="20" />
    </Style>
    <Style TargetType="{x:Type local:RoundImage}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:RoundImage}">
                    <Border Name="PART_RootBorder"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        Background="{TemplateBinding Background}">
                        <ContentPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="{x:Type local:ImageCarousel}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ImageCarousel}">
                    <Border
                        CornerRadius="10"
                        Background="{TemplateBinding Background}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"  />
                                <RowDefinition Height="10" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="5"    />
                                <ColumnDefinition Width="*"    />
                                <ColumnDefinition Width="5"    />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <local:ArrowButton x:Name="PART_PreviousArrowButton" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left"
                                Width="32"
                                Height="32"
                                BackgroundEllipseStrokeThickness="1"
                                BackgroundEllipseStroke="LightGray"
                                ArrowDirection="Left"
                                ArrowSize="20"
                                ArrowStrokeThickness="2"
                                ArrowStroke="Black"
                                LeftArrowPathData="M 7 10 L 12 5 M 7 10 L 12 15"
                                RightArrowPathData="M 13 10 L 8 5 M 13 10 L 8 15">
                                <local:ArrowButton.BackgroundEllipseFill>
                                    <SolidColorBrush>
                                        <SolidColorBrush.Color>
                                            <Color A="127" R="255" G="255" B="255" />
                                        </SolidColorBrush.Color>
                                    </SolidColorBrush>
                                </local:ArrowButton.BackgroundEllipseFill>
                            </local:ArrowButton>
                            <local:RoundImage x:Name="PART_RoundImage" Grid.Row="0" Grid.Column="2"
                                Margin="0 0 0 15">
                            </local:RoundImage>
                            <Border Grid.Row="0" Grid.RowSpan="2" Grid.Column="2"
                                Margin="10"
                                VerticalAlignment="Bottom"
                                CornerRadius="10"
                                BorderThickness="1"
                                BorderBrush="DarkGray"
                                Background="#e0ffffff"
                                Padding="10">
                                <TextBlock Name="PART_DescriptionTextBlock"
                                    HorizontalAlignment="Center"
                                    Foreground="Black"
                                    TextWrapping="Wrap" />
                            </Border>
                            <local:ArrowButton x:Name="PART_NextArrowButton" Grid.Row="0" Grid.RowSpan="2"  Grid.Column="4"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Right"
                                Width="32"
                                Height="32"
                                BackgroundEllipseStrokeThickness="1"
                                BackgroundEllipseStroke="LightGray"
                                ArrowDirection="Right"
                                ArrowSize="20"
                                ArrowStrokeThickness="2"
                                ArrowStroke="Black"
                                LeftArrowPathData="M 7 10 L 12 5 M 7 10 L 12 15"
                                RightArrowPathData="M 13 10 L 8 5 M 13 10 L 8 15">
                                <local:ArrowButton.BackgroundEllipseFill>
                                    <SolidColorBrush>
                                        <SolidColorBrush.Color>
                                            <Color A="192" R="255" G="255" B="255" />
                                        </SolidColorBrush.Color>
                                    </SolidColorBrush>
                                </local:ArrowButton.BackgroundEllipseFill>
                            </local:ArrowButton>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

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

<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>

<Ellipse Name="backgroundEllipse"

HorizontalAlignment="Center"

VerticalAlignment="Center"

StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStrokeThickness}"

Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStroke}"

Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseFill}"

Width="{TemplateBinding Width}"

Height="{TemplateBinding Height}"/>

<Viewbox

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="{TemplateBinding ArrowSize}"

Height="{TemplateBinding ArrowSize}"

Margin="{TemplateBinding Padding}">

<Canvas

Width="20"

Height="20">

<Path Name="arrowPath"

StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStrokeThickness}"

Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStroke}"

StrokeStartLineCap="Round"

StrokeEndLineCap="Round"

Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowPathData}" />

</Canvas>

</Viewbox>

</Grid>

<ControlTemplate.Triggers>

<Setter

TargetName="backgroundEllipse"

Property="Fill"

Value="#e0e0e0" />

<Setter

TargetName="arrowPath"

Property="Stroke"

Value="Black" />

</Trigger>

<Setter

TargetName="backgroundEllipse"

Property="Fill"

Value="#bdbdbd" />

<Setter

TargetName="grid"

Property="RenderTransform">

<Setter.Value>

<TranslateTransform

X="1"

Y="1" />

</Setter.Value>

</Setter>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Setter.Value>

<Border Name="PART_RootBorder"

BorderThickness="{TemplateBinding BorderThickness}"

BorderBrush="{TemplateBinding BorderBrush}"

CornerRadius="{TemplateBinding CornerRadius}"

Background="{TemplateBinding Background}">

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Setter.Value>

<Border

CornerRadius="10"

Background="{TemplateBinding Background}">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<local:ArrowButton x:Name="PART_PreviousArrowButton" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"

VerticalAlignment="Center"

HorizontalAlignment="Left"

Width="32"

Height="32"

BackgroundEllipseStrokeThickness="1"

BackgroundEllipseStroke="LightGray"

ArrowDirection="Left"

ArrowSize="20"

ArrowStrokeThickness="2"

ArrowStroke="Black"

LeftArrowPathData="M 7 10 L 12 5 M 7 10 L 12 15"

RightArrowPathData="M 13 10 L 8 5 M 13 10 L 8 15">

<local:ArrowButton.BackgroundEllipseFill>

<SolidColorBrush.Color>

</SolidColorBrush.Color>

</SolidColorBrush>

</local:ArrowButton.BackgroundEllipseFill>

</local:ArrowButton>

<local:RoundImage x:Name="PART_RoundImage" Grid.Row="0" Grid.Column="2"

Margin="0 0 0 15">

</local:RoundImage>

<Border Grid.Row="0" Grid.RowSpan="2" Grid.Column="2"

Margin="10"

VerticalAlignment="Bottom"

CornerRadius="10"

BorderThickness="1"

BorderBrush="DarkGray"

Background="#e0ffffff"

Padding="10">

<TextBlock Name="PART_DescriptionTextBlock"

HorizontalAlignment="Center"

Foreground="Black"

TextWrapping="Wrap" />

</Border>

<local:ArrowButton x:Name="PART_NextArrowButton" Grid.Row="0" Grid.RowSpan="2" Grid.Column="4"

VerticalAlignment="Center"

HorizontalAlignment="Right"

Width="32"

Height="32"

BackgroundEllipseStrokeThickness="1"

BackgroundEllipseStroke="LightGray"

ArrowDirection="Right"

ArrowSize="20"

ArrowStrokeThickness="2"

ArrowStroke="Black"

LeftArrowPathData="M 7 10 L 12 5 M 7 10 L 12 15"

RightArrowPathData="M 13 10 L 8 5 M 13 10 L 8 15">

<local:ArrowButton.BackgroundEllipseFill>

<SolidColorBrush.Color>

</SolidColorBrush.Color>

</SolidColorBrush>

</local:ArrowButton.BackgroundEllipseFill>

</local:ArrowButton>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

▶ ImageCarousel.cs

[C#/WPF/.NET8] Button 클래스 : 화살표 원 버튼 만들기

■ Button 클래스를 사용해 화살표 원 버튼을 만드는 방법을 보여준다. ▶ ArrowButton.cs


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

namespace TestProject;

/// <summary>
/// 화살표 버튼
/// </summary>
public class ArrowButton : Button
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 배경 원 스트로크 두께 속성 - BackgroundEllipseStrokeThicknessProperty

    /// <summary>
    /// 배경 원 두께
    /// </summary>
    public static readonly DependencyProperty BackgroundEllipseStrokeThicknessProperty = DependencyProperty.Register
    (
        "BackgroundEllipseStrokeThickness",
        typeof(Thickness),
        typeof(ArrowButton),
        new PropertyMetadata(new Thickness(0))
    );

    #endregion
    #region 배경 원 스트로크 속성 - BackgroundEllipseStrokeProperty

    /// <summary>
    /// 배경 원 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty BackgroundEllipseStrokeProperty = DependencyProperty.Register
    (
        "BackgroundEllipseStroke",
        typeof(Brush),
        typeof(ArrowButton),
        new PropertyMetadata(Brushes.Transparent)
    );

    #endregion
    #region 배경 원 채우기 속성 - BackgroundEllipseFillProperty

    /// <summary>
    /// 배경 원 채우기 속성
    /// </summary>
    public static readonly DependencyProperty BackgroundEllipseFillProperty = DependencyProperty.Register
    (
        "BackgroundEllipseFill",
        typeof(Brush),
        typeof(ArrowButton),
        new PropertyMetadata(Brushes.Transparent)
    );

    #endregion
    #region 화살표 크기 속성 - ArrowSizeProperty

    /// <summary>
    /// 화살표 크기 속성
    /// </summary>
    public static readonly DependencyProperty ArrowSizeProperty = DependencyProperty.Register
    (
        "ArrowSize",
        typeof(double),
        typeof(ArrowButton),
        new PropertyMetadata(20.0)
    );

    #endregion
    #region 화살표 방향 속성 - ArrowDirectionProperty

    /// <summary>
    /// 화살표 방향 속성
    /// </summary>
    public static readonly DependencyProperty ArrowDirectionProperty = DependencyProperty.Register
    (
        "ArrowDirection",
        typeof(ArrowDirection),
        typeof(ArrowButton),
        new PropertyMetadata(ArrowDirection.Left, DirectionPropertyChangedCallback)
    );

    #endregion
    #region 화살표 스트로크 두께 속성 - ArrowStrokeThicknessProperty

    /// <summary>
    /// 화살표 두께
    /// </summary>
    public static readonly DependencyProperty ArrowStrokeThicknessProperty = DependencyProperty.Register
    (
        "ArrowStrokeThickness",
        typeof(Thickness),
        typeof(ArrowButton),
        new PropertyMetadata(new Thickness(1))
    );

    #endregion
    #region 화살표 스트로크 속성 - ArrowStrokeProperty

    /// <summary>
    /// 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty ArrowStrokeProperty = DependencyProperty.Register
    (
        "ArrowStroke",
        typeof(Brush),
        typeof(ArrowButton),
        new PropertyMetadata(Brushes.Black)
    );

    #endregion
    #region 왼쪽 화살표 패스 데이터 속성 - LeftArrowPathDataProperty

    /// <summary>
    /// 왼쪽 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty LeftArrowPathDataProperty = DependencyProperty.Register
    (
        "LeftArrowPathData",
        typeof(string),
        typeof(ArrowButton),
        new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15", ArrowPathDataPropertyChangedCallback)
    );

    #endregion
    #region 오른쪽 화살표 패스 데이터 속성 - RightArrowPathDataProperty

    /// <summary>
    /// 오른쪽 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty RightArrowPathDataProperty = DependencyProperty.Register
    (
        "RightArrowPathData",
        typeof(string),
        typeof(ArrowButton),
        new PropertyMetadata("M 5 10 L 15 10 M 15 10 L 10 5 M 15 10 L 10 15", ArrowPathDataPropertyChangedCallback)
    );

    #endregion
    #region 화살표 패스 데이터 속성 - ArrowPathDataProperty

    /// <summary>
    /// 화살표 패스 데이터 속성
    /// </summary>
    public static readonly DependencyProperty ArrowPathDataProperty = DependencyProperty.Register
    (
        "ArrowPathData",
        typeof(string),
        typeof(ArrowButton),
        new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15")
    );

    #endregion

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

    #region 배경 원 채우기 - BackgroundEllipseFill

    /// <summary>
    /// 배경 원 채우기
    /// </summary>
    public Brush BackgroundEllipseFill
    {
        get => (Brush)GetValue(BackgroundEllipseFillProperty);
        set => SetValue(BackgroundEllipseFillProperty, value);
    }

    #endregion
    #region 배경 원 스트로크 두께 - BackgroundEllipseStrokeThickness

    /// <summary>
    /// 배경 원 스트로크 두께
    /// </summary>
    public Thickness BackgroundEllipseStrokeThickness
    {
        get => (Thickness)GetValue(BackgroundEllipseStrokeThicknessProperty);
        set => SetValue(BackgroundEllipseStrokeThicknessProperty, value);
    }

    #endregion
    #region 배경 원 스트로크 - BackgroundEllipseStroke

    /// <summary>
    /// 배경 원 스트로크
    /// </summary>
    public Brush BackgroundEllipseStroke
    {
        get => (Brush)GetValue(BackgroundEllipseStrokeProperty);
        set => SetValue(BackgroundEllipseStrokeProperty, value);
    }

    #endregion
    #region 화살표 크기 - ArrowSize

    /// <summary>
    /// 화살표 크기
    /// </summary>
    public double ArrowSize
    {
        get => (double)GetValue(ArrowSizeProperty);
        set => SetValue(ArrowSizeProperty, value);
    }

    #endregion
    #region 화살표 방향 - ArrowDirection

    /// <summary>
    /// 화살표 방향
    /// </summary>
    public ArrowDirection ArrowDirection
    {
        get => (ArrowDirection)GetValue(ArrowDirectionProperty);
        set => SetValue(ArrowDirectionProperty, value);
    }

    #endregion
    #region 화살표 스트로크 두께 - ArrowStrokeThickness

    /// <summary>
    /// 화살표 스트로크 두께
    /// </summary>
    public Thickness ArrowStrokeThickness
    {
        get => (Thickness)GetValue(ArrowStrokeThicknessProperty);
        set => SetValue(ArrowStrokeThicknessProperty, value);
    }

    #endregion
    #region 화살표 스트로크 - ArrowStroke

    /// <summary>
    /// 화살표 스트로크
    /// </summary>
    public Brush ArrowStroke
    {
        get => (Brush)GetValue(ArrowStrokeProperty);
        set => SetValue(ArrowStrokeProperty, value);
    }

    #endregion
    #region 왼쪽 화살표 패스 데이터 - LeftArrowPathData

    /// <summary>
    /// 왼쪽 화살표 패스 데이터
    /// </summary>
    public string LeftArrowPathData
    {
        get => (string)GetValue(LeftArrowPathDataProperty);
        set => SetValue(LeftArrowPathDataProperty, value);
    }

    #endregion
    #region 오른쪽 화살표 패스 데이터 - RightArrowPathData

    /// <summary>
    /// 오른쪽 화살표 패스 데이터
    /// </summary>
    public string RightArrowPathData
    {
        get => (string)GetValue(RightArrowPathDataProperty);
        set => SetValue(RightArrowPathDataProperty, value);
    }

    #endregion
    #region 화살표 패스 데이터 - ArrowPathData

    /// <summary>
    /// 화살표 패스 데이터
    /// </summary>
    public string ArrowPathData
    {
        get => (string)GetValue(ArrowPathDataProperty);
        private set => SetValue(ArrowPathDataProperty, value);
    }

    #endregion

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

    #region 생성자 - ArrowButton()

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

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Private

    #region 방향 속성 변경시 콜백 처리하기 - DirectionPropertyChangedCallback(d, e)

    /// <summary>
    /// 방향 속성 변경시 콜백 처리하기
    /// </summary>
    /// <param name="d">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private static void DirectionPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if(d is ArrowButton button)
        {
            button.UpdateArrowPathData();
        }
    }

    #endregion
    #region 화살표 패스 데이터 속성 변경시 콜백 처리하기 - ArrowPathDataPropertyChangedCallback(d, e)

    /// <summary>
    /// 화살표 패스 데이터 속성 변경시 콜백 처리하기
    /// </summary>
    /// <param name="d">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private static void ArrowPathDataPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if(d is ArrowButton button)
        {
            button.UpdateArrowPathData();
        }
    }

    #endregion

    ////////////////////////////////////////////////////////////////////////////////////////// Instance
    //////////////////////////////////////////////////////////////////////////////// Private

    #region 화살표 패스 데이터 업데이트하기 - UpdateArrowPathData()

    /// <summary>
    /// 화살표 패스 데이터 업데이트하기
    /// </summary>
    private void UpdateArrowPathData()
    {
        ArrowPathData = ArrowDirection == ArrowDirection.Left ? LeftArrowPathData : RightArrowPathData;
    }

    #endregion
}

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

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

namespace TestProject;

/// <summary>

/// 화살표 버튼

/// </summary>

public class ArrowButton : Button

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property

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

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

#region 배경 원 스트로크 두께 속성 - BackgroundEllipseStrokeThicknessProperty

/// <summary>

/// 배경 원 두께

/// </summary>

public static readonly DependencyProperty BackgroundEllipseStrokeThicknessProperty = DependencyProperty.Register

(

"BackgroundEllipseStrokeThickness",

typeof(Thickness),

typeof(ArrowButton),

new PropertyMetadata(new Thickness(0))

);

#endregion

#region 배경 원 스트로크 속성 - BackgroundEllipseStrokeProperty

/// <summary>

/// 배경 원 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty BackgroundEllipseStrokeProperty = DependencyProperty.Register

(

"BackgroundEllipseStroke",

typeof(Brush),

typeof(ArrowButton),

new PropertyMetadata(Brushes.Transparent)

);

#endregion

#region 배경 원 채우기 속성 - BackgroundEllipseFillProperty

/// <summary>

/// 배경 원 채우기 속성

/// </summary>

public static readonly DependencyProperty BackgroundEllipseFillProperty = DependencyProperty.Register

(

"BackgroundEllipseFill",

typeof(Brush),

typeof(ArrowButton),

new PropertyMetadata(Brushes.Transparent)

);

#endregion

#region 화살표 크기 속성 - ArrowSizeProperty

/// <summary>

/// 화살표 크기 속성

/// </summary>

public static readonly DependencyProperty ArrowSizeProperty = DependencyProperty.Register

(

"ArrowSize",

typeof(double),

typeof(ArrowButton),

new PropertyMetadata(20.0)

);

#endregion

#region 화살표 방향 속성 - ArrowDirectionProperty

/// <summary>

/// 화살표 방향 속성

/// </summary>

public static readonly DependencyProperty ArrowDirectionProperty = DependencyProperty.Register

(

"ArrowDirection",

typeof(ArrowDirection),

typeof(ArrowButton),

new PropertyMetadata(ArrowDirection.Left, DirectionPropertyChangedCallback)

);

#endregion

#region 화살표 스트로크 두께 속성 - ArrowStrokeThicknessProperty

/// <summary>

/// 화살표 두께

/// </summary>

public static readonly DependencyProperty ArrowStrokeThicknessProperty = DependencyProperty.Register

(

"ArrowStrokeThickness",

typeof(Thickness),

typeof(ArrowButton),

new PropertyMetadata(new Thickness(1))

);

#endregion

#region 화살표 스트로크 속성 - ArrowStrokeProperty

/// <summary>

/// 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty ArrowStrokeProperty = DependencyProperty.Register

(

"ArrowStroke",

typeof(Brush),

typeof(ArrowButton),

new PropertyMetadata(Brushes.Black)

);

#endregion

#region 왼쪽 화살표 패스 데이터 속성 - LeftArrowPathDataProperty

/// <summary>

/// 왼쪽 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty LeftArrowPathDataProperty = DependencyProperty.Register

(

"LeftArrowPathData",

typeof(string),

typeof(ArrowButton),

new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15", ArrowPathDataPropertyChangedCallback)

);

#endregion

#region 오른쪽 화살표 패스 데이터 속성 - RightArrowPathDataProperty

/// <summary>

/// 오른쪽 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty RightArrowPathDataProperty = DependencyProperty.Register

(

"RightArrowPathData",

typeof(string),

typeof(ArrowButton),

new PropertyMetadata("M 5 10 L 15 10 M 15 10 L 10 5 M 15 10 L 10 15", ArrowPathDataPropertyChangedCallback)

);

#endregion

#region 화살표 패스 데이터 속성 - ArrowPathDataProperty

/// <summary>

/// 화살표 패스 데이터 속성

/// </summary>

public static readonly DependencyProperty ArrowPathDataProperty = DependencyProperty.Register

(

"ArrowPathData",

typeof(string),

typeof(ArrowButton),

new PropertyMetadata("M 15 10 L 5 10 M 5 10 L 10 5 M 5 10 L 10 15")

);

#endregion

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

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

#region 배경 원 채우기 - BackgroundEllipseFill

/// <summary>

/// 배경 원 채우기

/// </summary>

public Brush BackgroundEllipseFill

{

get => (Brush)GetValue(BackgroundEllipseFillProperty);

set => SetValue(BackgroundEllipseFillProperty, value);

}

#endregion

#region 배경 원 스트로크 두께 - BackgroundEllipseStrokeThickness

/// <summary>

/// 배경 원 스트로크 두께

/// </summary>

public Thickness BackgroundEllipseStrokeThickness

{

get => (Thickness)GetValue(BackgroundEllipseStrokeThicknessProperty);

set => SetValue(BackgroundEllipseStrokeThicknessProperty, value);

}

#endregion

#region 배경 원 스트로크 - BackgroundEllipseStroke

/// <summary>

/// 배경 원 스트로크

/// </summary>

public Brush BackgroundEllipseStroke

{

get => (Brush)GetValue(BackgroundEllipseStrokeProperty);

set => SetValue(BackgroundEllipseStrokeProperty, value);

}

#endregion

#region 화살표 크기 - ArrowSize

/// <summary>

/// 화살표 크기

/// </summary>

public double ArrowSize

{

get => (double)GetValue(ArrowSizeProperty);

set => SetValue(ArrowSizeProperty, value);

}

#endregion

#region 화살표 방향 - ArrowDirection

/// <summary>

/// 화살표 방향

/// </summary>

public ArrowDirection ArrowDirection

{

get => (ArrowDirection)GetValue(ArrowDirectionProperty);

set => SetValue(ArrowDirectionProperty, value);

}

#endregion

#region 화살표 스트로크 두께 - ArrowStrokeThickness

/// <summary>

/// 화살표 스트로크 두께

/// </summary>

public Thickness ArrowStrokeThickness

{

get => (Thickness)GetValue(ArrowStrokeThicknessProperty);

set => SetValue(ArrowStrokeThicknessProperty, value);

}

#endregion

#region 화살표 스트로크 - ArrowStroke

/// <summary>

/// 화살표 스트로크

/// </summary>

public Brush ArrowStroke

{

get => (Brush)GetValue(ArrowStrokeProperty);

set => SetValue(ArrowStrokeProperty, value);

}

#endregion

#region 왼쪽 화살표 패스 데이터 - LeftArrowPathData

/// <summary>

/// 왼쪽 화살표 패스 데이터

/// </summary>

public string LeftArrowPathData

{

get => (string)GetValue(LeftArrowPathDataProperty);

set => SetValue(LeftArrowPathDataProperty, value);

}

#endregion

#region 오른쪽 화살표 패스 데이터 - RightArrowPathData

/// <summary>

/// 오른쪽 화살표 패스 데이터

/// </summary>

public string RightArrowPathData

{

get => (string)GetValue(RightArrowPathDataProperty);

set => SetValue(RightArrowPathDataProperty, value);

}

#endregion

#region 화살표 패스 데이터 - ArrowPathData

/// <summary>

/// 화살표 패스 데이터

/// </summary>

public string ArrowPathData

{

get => (string)GetValue(ArrowPathDataProperty);

private set => SetValue(ArrowPathDataProperty, value);

}

#endregion

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

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

#region 생성자 - ArrowButton()

/// <summary>

/// 생성자

/// </summary>

static ArrowButton()

{

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

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

//////////////////////////////////////////////////////////////////////////////// Private

#region 방향 속성 변경시 콜백 처리하기 - DirectionPropertyChangedCallback(d, e)

/// <summary>

/// 방향 속성 변경시 콜백 처리하기

/// </summary>

/// <param name="d">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private static void DirectionPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

if(d is ArrowButton button)

{

button.UpdateArrowPathData();

}

#endregion

#region 화살표 패스 데이터 속성 변경시 콜백 처리하기 - ArrowPathDataPropertyChangedCallback(d, e)

/// <summary>

/// 화살표 패스 데이터 속성 변경시 콜백 처리하기

/// </summary>

/// <param name="d">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private static void ArrowPathDataPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

if(d is ArrowButton button)

{

button.UpdateArrowPathData();

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Instance

//////////////////////////////////////////////////////////////////////////////// Private

#region 화살표 패스 데이터 업데이트하기 - UpdateArrowPathData()

/// <summary>

/// 화살표 패스 데이터 업데이트하기

/// </summary>

private void UpdateArrowPathData()

{

ArrowPathData = ArrowDirection == ArrowDirection.Left ? LeftArrowPathData : RightArrowPathData;

}

#endregion

}

▶ ArrowDirection.cs


namespace TestProject;

/// <summary>
/// 화살표 방향
/// </summary>
public enum ArrowDirection
{
    Left,
    Right
}

namespace TestProject;

/// <summary>

/// 화살표 방향

/// </summary>

public enum ArrowDirection

{

Left,

Right

}

▶ 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:ArrowButton}" BasedOn="{StaticResource {x:Type Button}}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ArrowButton}">
                    <Grid Name="grid">
                        <Ellipse Name="backgroundEllipse"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStrokeThickness}"
                            Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStroke}"
                            Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseFill}"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"/>
                        <Viewbox
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Width="{TemplateBinding ArrowSize}"
                            Height="{TemplateBinding ArrowSize}"
                            Margin="{TemplateBinding Padding}">
                            <Canvas
                                Width="20"
                                Height="20">
                                <Path Name="arrowPath"
                                    StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStrokeThickness}"
                                    Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStroke}"
                                    StrokeStartLineCap="Round"
                                    StrokeEndLineCap="Round"
                                    Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowPathData}" />
                            </Canvas>
                        </Viewbox>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter
                                TargetName="backgroundEllipse"
                                Property="Fill"
                                Value="#e0e0e0" />
                            <Setter
                                TargetName="arrowPath"
                                Property="Stroke"
                                Value="Black" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter
                                TargetName="backgroundEllipse"
                                Property="Fill"
                                Value="#bdbdbd" />
                            <Setter
                                TargetName="grid"
                                Property="RenderTransform">
                                <Setter.Value>
                                    <TranslateTransform
                                        X="1"
                                        Y="1" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Width"     Value="32" />
        <Setter Property="Height"    Value="32" />
        <Setter Property="ArrowSize" Value="20" />
    </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>

<Ellipse Name="backgroundEllipse"

HorizontalAlignment="Center"

VerticalAlignment="Center"

StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStrokeThickness}"

Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseStroke}"

Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BackgroundEllipseFill}"

Width="{TemplateBinding Width}"

Height="{TemplateBinding Height}"/>

<Viewbox

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="{TemplateBinding ArrowSize}"

Height="{TemplateBinding ArrowSize}"

Margin="{TemplateBinding Padding}">

<Canvas

Width="20"

Height="20">

<Path Name="arrowPath"

StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStrokeThickness}"

Stroke="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowStroke}"

StrokeStartLineCap="Round"

StrokeEndLineCap="Round"

Data="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ArrowPathData}" />

</Canvas>

</Viewbox>

</Grid>

<ControlTemplate.Triggers>

<Setter

TargetName="backgroundEllipse"

Property="Fill"

Value="#e0e0e0" />

<Setter

TargetName="arrowPath"

Property="Stroke"

Value="Black" />

</Trigger>

<Setter

TargetName="backgroundEllipse"

Property="Fill"

Value="#bdbdbd" />

<Setter

TargetName="grid"

Property="RenderTransform">

<Setter.Value>

<TranslateTransform

X="1"

Y="1" />

</Setter.Value>

</Setter>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

▶ 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"
    xmlns:local="clr-namespace:TestProject"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="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"

xmlns:local="clr-namespace:TestProject"

StartupUri="MainWindow.xaml">

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

[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

[C#/WPF/.NET8] Button 엘리먼트 : PATH 아이콘과 텍스트를 표시하는 버튼 만들기

■ Button 엘리먼트를 사용해 PATH 아이콘과 텍스트를 표시하는 버튼을 만드는 방법을 보여준다. ▶ PathIconButton.xaml


<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>

<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>

<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.Triggers>

<DataTrigger

Binding="{Binding Content, RelativeSource={RelativeSource Self}}"

Value="{x:Null}">

</DataTrigger>

</Style.Triggers>

</Style>

</ContentPresenter.Style>

</ContentPresenter>

</StackPanel>

</Border>

<ControlTemplate.Triggers>

</Trigger>

<Setter.Value>

</Setter.Value>

</Setter>

<Setter.Value>

</Setter.Value>

</Setter>

<Setter.Value>

</Setter.Value>

</Setter>

</Trigger>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Button.Template>

</Button>

▶ PathIconButton.xaml.cs


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
}

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


<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>

<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>

</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>

</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>

</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>

</local:PathIconButton.PathData>

<TextBlock

VerticalAlignment="Center"

Text="작업 중단" />

</local:PathIconButton>

</StackPanel>

</Window>

TestProject.zip

[C#/WINUI3/.NET8] Setter 엘리먼트 : Target 속성에서 특정 엘리먼트의 첨부 속성 설정하기

■ Setter 엘리먼트의 Target 속성에서 특정 엘리먼트의 첨부 속성을 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서

[C#/WINUI3/.NET8] AdaptiveTrigger 엘리먼트 : MinWindowWidth 속성을 사용해 컨트롤 일정 크기 이상일 경우 처리하기

■ AdaptiveTrigger 엘리먼트의 MinWindowWidth 속성을 사용해 컨트롤이 일정 크기 이상일 경우 처리하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="640" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="splitView.DisplayMode" Value="Inline" />
                    <Setter Target="splitView.IsPaneOpen"  Value="True"   />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <SplitView Name="splitView"
        DisplayMode="CompactInline"
        CompactPaneLength="20"
        IsPaneOpen="False">
    </SplitView>
</Grid>

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<SplitView Name="splitView"

DisplayMode="CompactInline"

CompactPaneLength="20"

IsPaneOpen="False">

</SplitView>

</Grid>

[C#/WINUI3/.NET8] VisualState 엘리먼트 : StateTriggers 속성에서 AdaptiveTrigger 엘리먼트를 사용해 컨트롤 비주얼 상태 변경하기

■ VisualState 엘리먼트의 StateTriggers 속성에서 AdaptiveTrigger 엘리먼트를 사용해 컨트롤의 비주얼 상태를 변경하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] UserHandPreferenceStateTrigger 엘리먼트 : HandPreference 속성을 사용해 왼손잡이/오른손잡이 여부에 따라 처리하기

■ UserHandPreferenceStateTrigger 엘리먼트의 HandPreference 속성을 사용해 왼손잡이/오른손잡이 여부에 따라 처리하기 ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] RegexStateTrigger 엘리먼트 : Expression/Options/Value 속성을 사용해 정규식 상태에 따라 처리하기

■ RegexStateTrigger 엘리먼트의 Expression/Options/Value 속성을 사용해 정규식 상태에 따라 처리하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] NetworkConnectionStateTrigger 엘리먼트 : ConnectionState 속성을 사용해 네트워크 연결 상태에 따라 처리하기

■ NetworkConnectionStateTrigger 엘리먼트의 ConnectionState 속성을 사용해 네트워크 연결 상태에 따라 처리하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] IsNullOrEmptyStateTrigger 엘리먼트 : Value 속성을 사용해 값이 NULL 또는 빈 경우에 따라 처리하기

■ IsNullOrEmptyStateTrigger 엘리먼트의 Value 속성을 사용해 값이 NULL 또는 빈 경우에 따라 처리하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] IsNotEqualStateTrigger 엘리먼트 : Value/To 속성을 사용해 비동일 상태 여부에 따라 처리하기

■ IsNotEqualStateTrigger 엘리먼트의 Value/To 속성을 사용해 비동일 상태 여부에 따라 처리하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] IsEqualStateTrigger 엘리먼트 : Value/To 속성을 사용해 동일 상태 여부에 따라 처리하기

■ IsEqualStateTrigger 엘리먼트의 Value/To 속성을 사용해 동일 상태 여부에 따라 처리하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] ControlSizeTrigger 엘리먼트 : TargetElement/MinWidth/MaxWidth 속성을 사용해 컨트롤 크기에 따라 처리하기

■ ControlSizeTrigger 엘리먼트의 TargetElement/MinWidth/MaxWidth 속성을 사용해 컨트롤 크기에 따라 처리하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] CommunityToolkit.WinUI.Triggers 누겟 설치하기

■ CommunityToolkit.WinUI.Triggers 누겟을 설치하는 방법을 보여준다. 1. Visual Studio를 실행한다. 2. [도구] / [NuGet 패키지 관리자] / [패키지 관리자 콘솔] 메뉴를 실행한다.

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] CompareStateTrigger 엘리먼트 : Comparison/Value/To 속성을 사용해 값 상태에 따라 처리하기

■ CompareStateTrigger 엘리먼트의 Comparison/Value/To 속성을 사용해 값 상태에 따라 처리하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서

[C#/WPF] Trigger 엘리먼트 : 속성 값 변경시 애니메이션 트리거하기

■ Trigger 엘리먼트를 사용해 속성 값 변경시 애니메이션을 트리거하는 방법을 보여준다. ▶ 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"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="EllipseStyleKey" TargetType="{x:Type Ellipse}">
            <Setter Property="Opacity" Value="0.25" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    Duration="00:00:01"
                                    To="1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    Duration="00:00:01"
                                    To="0.25" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Ellipse
            Style="{StaticResource EllipseStyleKey}"
            Width="250"
            Height="250"
            Fill="Gold" />
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 30 0 0"
            Text="마우스를 원 위로 이동시켜 주시기 바랍니다." />
    </StackPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Style.Triggers>

<Trigger.EnterActions>

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

Duration="00:00:01"

To="1" />

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

<DoubleAnimation

Storyboard.TargetProperty="Opacity"

Duration="00:00:01"

To="0.25" />

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

</Style.Triggers>

</Style>

</Window.Resources>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Ellipse

Style="{StaticResource EllipseStyleKey}"

Width="250"

Height="250"

Fill="Gold" />

<TextBlock

HorizontalAlignment="Center"

Margin="0 30 0 0"

Text="마우스를 원 위로 이동시켜 주시기 바랍니다." />

</StackPanel>

</Window>

TestProject.zip

[C#/WPF] ImageBrush 엘리먼트 : 배경 애니메이션 만들기

■ ImageBrush 엘리먼트를 사용해 배경 애니메이션을 만드는 방법을 보여준다. ▶ 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"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="AnimatedRectangleStyleKey">
            <Setter Property="Rectangle.Fill">
                <Setter.Value>
                    <ImageBrush
                        TileMode="FlipXY"
                        Opacity="0.25"
                        ImageSource="IMAGE\purpleblock.jpg">
                        <ImageBrush.Transform>
                            <RotateTransform Angle="0" />
                        </ImageBrush.Transform>
                    </ImageBrush>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard SpeedRatio="1.25">
                                <RectAnimation
                                    Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Viewport)"
                                    Duration="00:00:20"
                                    To="0 0 0.5 0.5"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True" />
                                <DoubleAnimation
                                    Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Transform).(RotateTransform.Angle)"
                                    Duration="00:01:00"
                                    To="360"
                                    RepeatBehavior="Forever"
                                    AccelerationRatio="0.5"
                                    DecelerationRatio="0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Rectangle
            Style="{StaticResource AnimatedRectangleStyleKey}"
            Margin="10" />
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="72"
            FontWeight="Bold"
            Text="Background Rotation" />
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Setter.Value>

<ImageBrush

TileMode="FlipXY"

Opacity="0.25"

ImageSource="IMAGE\purpleblock.jpg">

<ImageBrush.Transform>

</ImageBrush.Transform>

</ImageBrush>

</Setter.Value>

</Setter>

<Style.Triggers>

<EventTrigger.Actions>

<RectAnimation

Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Viewport)"

Duration="00:00:20"

To="0 0 0.5 0.5"

RepeatBehavior="Forever"

AutoReverse="True" />

<DoubleAnimation

Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Transform).(RotateTransform.Angle)"

Duration="00:01:00"

To="360"

RepeatBehavior="Forever"

AccelerationRatio="0.5"

DecelerationRatio="0.5" />

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

</Style.Triggers>

</Style>

</Window.Resources>

<Grid>

<Rectangle

Style="{StaticResource AnimatedRectangleStyleKey}"

Margin="10" />

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

FontSize="72"

FontWeight="Bold"

Text="Background Rotation" />

</Grid>

</Window>

TestProject.zip

[C#/WPF] DrawingBrush 엘리먼트 : 배경 애니메이션 만들기

■ DrawingBrush 엘리먼트를 사용해 배경 애니메이션을 만드는 방법을 보여준다. ▶ MainWindow.xaml


<Window Name="window" x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation
                        Storyboard.TargetName="grid"
                        Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[0].(GeometryDrawing.Brush).(SolidColorBrush.Color)"
                        Duration="00:00:50"
                        From="LightGray"
                        To="DarkGray"
                        RepeatBehavior="Forever"
                        AutoReverse="True" />
                    <DoubleAnimation
                        Storyboard.TargetName="grid"
                        Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Transform).(RotateTransform.Angle)"
                        Duration="00:05:00"
                        From="0"
                        To="360"
                        RepeatBehavior="Forever"
                        AutoReverse="True" />
                    <DoubleAnimation
                        Storyboard.TargetName="grid"
                        Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[1].(GeometryDrawing.Geometry).(EllipseGeometry.RadiusX)"
                        Duration="00:00:05"
                        From="0.1"
                        To="0.25"
                        RepeatBehavior="Forever"
                        AutoReverse="True" />
                    <PointAnimation
                        Storyboard.TargetName="grid"
                        Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[2].(GeometryDrawing.Geometry).(EllipseGeometry.Center)"
                        Duration="00:00:10"
                        From="-0.25 -0.25"
                        To="1.25 1.25"
                        RepeatBehavior="Forever"
                        AutoReverse="True" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Grid Name="grid">
        <Grid.Background>
            <DrawingBrush
                ViewportUnits="Absolute"
                Viewport="0 0 100 100"
                TileMode="Tile">
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <DrawingGroup.Children>
                            <GeometryDrawing>
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0 0 1 1" />
                                </GeometryDrawing.Geometry>
                                <GeometryDrawing.Brush>
                                    <SolidColorBrush Color="LightGray" />
                                </GeometryDrawing.Brush>
                                <GeometryDrawing.Pen>
                                    <Pen
                                        Thickness="0.01"
                                        Brush="DarkGray" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="#99cccccc">
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry
                                        Center="0.75 0.5"
                                        RadiusX="0.25"
                                        RadiusY="0.25" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="#66cccccc">
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry
                                        Center="0.25 0.25"
                                        RadiusX="0.1"
                                        RadiusY="0.1" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
                <DrawingBrush.Transform>
                    <RotateTransform
                        CenterX="0.5"
                        CenterY="0.5" />
                </DrawingBrush.Transform>
            </DrawingBrush>
        </Grid.Background>
        <Ellipse
            Width="300"
            Height="300"
            Fill="Gold"
            StrokeThickness="3"
            Stroke="Black" />
    </Grid>
</Window>

100

101

102

103

104

105

106

<Window Name="window" x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Triggers>

<ColorAnimation

Storyboard.TargetName="grid"

Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[0].(GeometryDrawing.Brush).(SolidColorBrush.Color)"

Duration="00:00:50"

From="LightGray"

To="DarkGray"

RepeatBehavior="Forever"

AutoReverse="True" />

<DoubleAnimation

Storyboard.TargetName="grid"

Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Transform).(RotateTransform.Angle)"

Duration="00:05:00"

From="0"

To="360"

RepeatBehavior="Forever"

AutoReverse="True" />

<DoubleAnimation

Storyboard.TargetName="grid"

Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[1].(GeometryDrawing.Geometry).(EllipseGeometry.RadiusX)"

Duration="00:00:05"

From="0.1"

To="0.25"

RepeatBehavior="Forever"

AutoReverse="True" />

<PointAnimation

Storyboard.TargetName="grid"

Storyboard.TargetProperty="(Grid.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[2].(GeometryDrawing.Geometry).(EllipseGeometry.Center)"

Duration="00:00:10"

From="-0.25 -0.25"

To="1.25 1.25"

RepeatBehavior="Forever"

AutoReverse="True" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Window.Triggers>

<Grid.Background>

<DrawingBrush

ViewportUnits="Absolute"

Viewport="0 0 100 100"

TileMode="Tile">

<DrawingBrush.Drawing>

<DrawingGroup.Children>

<GeometryDrawing.Geometry>

</GeometryDrawing.Geometry>

<GeometryDrawing.Brush>

</GeometryDrawing.Brush>

<GeometryDrawing.Pen>

<Pen

Thickness="0.01"

Brush="DarkGray" />

</GeometryDrawing.Pen>

</GeometryDrawing>

<GeometryDrawing.Geometry>

<EllipseGeometry

Center="0.75 0.5"

RadiusX="0.25"

RadiusY="0.25" />

</GeometryDrawing.Geometry>

</GeometryDrawing>

<GeometryDrawing.Geometry>

<EllipseGeometry

Center="0.25 0.25"

RadiusX="0.1"

RadiusY="0.1" />

</GeometryDrawing.Geometry>

</GeometryDrawing>

</DrawingGroup.Children>

</DrawingGroup>

</DrawingBrush.Drawing>

<DrawingBrush.Transform>

<RotateTransform

CenterX="0.5"

CenterY="0.5" />

</DrawingBrush.Transform>

</DrawingBrush>

</Grid.Background>

<Ellipse

Width="300"

Height="300"

Fill="Gold"

StrokeThickness="3"

Stroke="Black" />

</Grid>

</Window>

TestProject.zip

[C#/WPF] DataTrigger/MultiDataTrigger 엘리먼트 : 데이터 트리거 설정하기

■ DataTrigger/MultiDataTrigger 엘리먼트를 사용해 데이터 트리거를 설정하는 방법을 보여준다. ▶ Place.cs


namespace TestProject
{
    /// <summary>
    /// 장소
    /// </summary>
    public class Place
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 명칭 - Name

        /// <summary>
        /// 명칭
        /// </summary>
        public string Name { get; set; }

        #endregion
        #region 주 - State

        /// <summary>
        /// 주
        /// </summary>
        public string State { get; set; }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - Place(name, state)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="name">명칭</param>
        /// <param name="state">주</param>
        public Place(string name, string state)
        {
            Name  = name;
            State = state;
        }

        #endregion
    }
}

namespace TestProject

{

/// <summary>

/// 장소

/// </summary>

public class Place

{

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

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

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; set; }

#endregion

#region 주 - State

/// <summary>

/// 주

/// </summary>

public string State { get; set; }

#endregion

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

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

#region 생성자 - Place(name, state)

/// <summary>

/// 생성자

/// </summary>

/// <param name="name">명칭</param>

/// <param name="state">주</param>

public Place(string name, string state)

{

Name = name;

State = state;

}

#endregion

}

▶ PlaceCollection.cs


using System.Collections.ObjectModel;

namespace TestProject
{
    /// <summary>
    /// 장소 컬렉션
    /// </summary>
    public class PlaceCollection : ObservableCollection<Place>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - PlaceCollection()

        /// <summary>
        /// 생성자
        /// </summary>
        public PlaceCollection()
        {
            Add(new Place("Bellevue"     , "WA"));
            Add(new Place("Gold Beach"   , "OR"));
            Add(new Place("Kirkland"     , "WA"));
            Add(new Place("Los Angeles"  , "CA"));
            Add(new Place("Portland"     , "ME"));
            Add(new Place("Portland"     , "OR"));
            Add(new Place("Redmond"      , "WA"));
            Add(new Place("San Diego"    , "CA"));
            Add(new Place("San Francisco", "CA"));
            Add(new Place("San Jose"     , "CA"));
            Add(new Place("Seattle"      , "WA"));
        }

        #endregion
    }
}

using System.Collections.ObjectModel;

namespace TestProject

{

/// <summary>

/// 장소 컬렉션

/// </summary>

public class PlaceCollection : ObservableCollection<Place>

{

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

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

#region 생성자 - PlaceCollection()

/// <summary>

/// 생성자

/// </summary>

public PlaceCollection()

{

Add(new Place("Bellevue" , "WA"));

Add(new Place("Gold Beach" , "OR"));

Add(new Place("Kirkland" , "WA"));

Add(new Place("Los Angeles" , "CA"));

Add(new Place("Portland" , "ME"));

Add(new Place("Portland" , "OR"));

Add(new Place("Redmond" , "WA"));

Add(new Place("San Diego" , "CA"));

Add(new Place("San Francisco", "CA"));

Add(new Place("San Jose" , "CA"));

Add(new Place("Seattle" , "WA"));

}

#endregion

}

▶ 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">
    <Window.Resources>
        <local:PlaceCollection x:Key="PlaceCollectionKey" />
        <Style TargetType="ListBoxItem">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=State}" Value="WA">
                    <Setter Property="Foreground" Value="Red" />
                </DataTrigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding Path=Name}"  Value="Portland" />
                        <Condition Binding="{Binding Path=State}" Value="OR"       />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="Cyan" />
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
        <DataTemplate DataType="{x:Type local:Place}">
            <Canvas
                Width="160"
                Height="25">
                <TextBlock
                    Width="130"
                    Text="{Binding Path=Name}" />
                <TextBlock Canvas.Left="130"
                    Width="30"
                    Text="{Binding Path=State}" />
            </Canvas>
        </DataTemplate>
    </Window.Resources>
    <StackPanel VerticalAlignment="Center">
        <TextBlock
            HorizontalAlignment="Center"
            Margin="10"
            FontSize="18"
            FontWeight="Bold">
            Data Trigger Sample
        </TextBlock>
        <ListBox
            HorizontalAlignment="Center"
            Width="180"
            Background="Honeydew"
            ItemsSource="{Binding Source={StaticResource PlaceCollectionKey}}" />
    </StackPanel>
</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">

<Window.Resources>

<local:PlaceCollection x:Key="PlaceCollectionKey" />

<Style.Triggers>

</DataTrigger>

<MultiDataTrigger.Conditions>

</MultiDataTrigger.Conditions>

</MultiDataTrigger>

</Style.Triggers>

</Style>

<Canvas

Width="160"

Height="25">

<TextBlock

Width="130"

Text="{Binding Path=Name}" />

<TextBlock Canvas.Left="130"

Width="30"

Text="{Binding Path=State}" />

</Canvas>

</DataTemplate>

</Window.Resources>

<TextBlock

HorizontalAlignment="Center"

Margin="10"

FontSize="18"

FontWeight="Bold">

Data Trigger Sample

</TextBlock>

<ListBox

HorizontalAlignment="Center"

Width="180"

Background="Honeydew"

ItemsSource="{Binding Source={StaticResource PlaceCollectionKey}}" />

</StackPanel>

</Window>

TestProject.zip

[C#/WPF] TextBlock 엘리먼트 : DoubleAnimation 객체를 사용해 텍스트 회전 애니메이션 만들기

■ TextBlock 엘리먼트의 DoubleAnimation 객체를 사용해 텍스트 회전 애니메이션을 만드는 방법을 보여준다. ▶ 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"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Foreground="Teal"
            FontSize="48"
            FontWeight="Bold"
            RenderTransformOrigin="0.5 0.5">
            This is rotating text
            <TextBlock.RenderTransform>
                <RotateTransform x:Name="rotateTransform"
                    Angle="0" />
            </TextBlock.RenderTransform>
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="TextBlock.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="rotateTransform"
                                Storyboard.TargetProperty="(RotateTransform.Angle)"
                                Duration="00:00:10"
                                From="0.0"
                                To="360"
                                RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="Teal"

FontSize="48"

FontWeight="Bold"

RenderTransformOrigin="0.5 0.5">

This is rotating text

<TextBlock.RenderTransform>

<RotateTransform x:Name="rotateTransform"

Angle="0" />

</TextBlock.RenderTransform>

<TextBlock.Triggers>

<DoubleAnimation

Storyboard.TargetName="rotateTransform"

Storyboard.TargetProperty="(RotateTransform.Angle)"

Duration="00:00:10"

From="0.0"

To="360"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

</Grid>

</Window>

TestProject.zip

[C#/WPF] TextBlock 엘리먼트 : ColorAnimation 객체를 사용해 텍스트 색상 변경 애니메이션 만들기

■ TextBlock 엘리먼트에서 ColorAnimation 객체를 사용해 텍스트 색상 변경 애니메이션을 만드는 방법을 보여준다. ▶ 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"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="48"
            FontWeight="Bold">
            This is changing color text
            <TextBlock.Foreground>
                <SolidColorBrush x:Name="solidColorBrush"
                    Color="Maroon" />
            </TextBlock.Foreground>
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="TextBlock.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation
                                Storyboard.TargetName="solidColorBrush"
                                Storyboard.TargetProperty="Color"
                                Duration="00:00:05"
                                From="DarkOrange"
                                To="SteelBlue"
                                AutoReverse="True"
                                RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

FontSize="48"

FontWeight="Bold">

This is changing color text

<TextBlock.Foreground>

<SolidColorBrush x:Name="solidColorBrush"

Color="Maroon" />

</TextBlock.Foreground>

<TextBlock.Triggers>

<ColorAnimation

Storyboard.TargetName="solidColorBrush"

Storyboard.TargetProperty="Color"

Duration="00:00:05"

From="DarkOrange"

To="SteelBlue"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</TextBlock.Triggers>

</TextBlock>

</Grid>

</Window>

TestProject.zip