STYLE 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] Control 클래스 : 라운드 이미지 컨트롤 만들기

■ Control 클래스를 사용해 라운드 이미지 컨트롤을 만드는 방법을 보여준다. ▶ 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: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>
</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"

BorderThickness="{TemplateBinding BorderThickness}"

BorderBrush="{TemplateBinding BorderBrush}"

CornerRadius="{TemplateBinding CornerRadius}"

Background="{TemplateBinding Background}">

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

▶ RoundImage.cs


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

namespace TestProject;

/// <summary>
/// 라운드 이미지
/// </summary>
public class RoundImage : Control
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 코너 반경 속성 - CornerRadiusProperty

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

    #endregion
    #region 스트레치 속성 - StretchProperty

    /// <summary>
    /// 스트레치 속성
    /// </summary>
    public static readonly DependencyProperty StretchProperty = DependencyProperty.Register
    (
        "Stretch",
        typeof(Stretch),
        typeof(RoundImage),
        new PropertyMetadata(Stretch.UniformToFill, StretchPropertyChangedCallback)
    );

    #endregion
    #region 이미지 소스 속성 - ImageSourceProperty

    /// <summary>
    /// 이미지 소스 속성
    /// </summary>
    public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register
    (
        "ImageSource",
        typeof(ImageSource),
        typeof(RoundImage),
        new PropertyMetadata(null, ImageSourcePropertyChangedCallback)
    );

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 루트 테두리
    /// </summary>
    private Border rootBorder = null;

    #endregion

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

    #region 코너 반경 - CornerRadius

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

    #endregion
    #region 스트레치 - Stretch

    /// <summary>
    /// 스트레치
    /// </summary>
    public Stretch Stretch
    {
        get => (Stretch)GetValue(StretchProperty);
        set => SetValue(StretchProperty, value);
    }

    #endregion
    #region 이미지 소스 - ImageSource

    /// <summary>
    /// 이미지 소스
    /// </summary>
    public ImageSource ImageSource
    {
        get => (ImageSource)GetValue(ImageSourceProperty);
        set => SetValue(ImageSourceProperty, value);
    }

    #endregion

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

    #region 생성자 - RoundImage()

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

    #endregion

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

    #region 생성자 - RoundImage()

    /// <summary>
    /// 생성자
    /// </summary>
    public RoundImage()
    {
        Loaded += Control_Loaded;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static

    #region 스트레치 속성 변경시 콜백 처리하기 - StretchPropertyChangedCallback(d, e)

    /// <summary>
    /// 스트레치 속성 변경시 콜백 처리하기
    /// </summary>
    /// <param name="d">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private static void StretchPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if(d is RoundImage roundImage)
        {
            roundImage.UpdateBackground();
        }
    }

    #endregion
    #region 이미지 소스 속성 변경시 콜백 처리하기 - ImageSourcePropertyChangedCallback(d, e)

    /// <summary>
    /// 이미지 소스 속성 변경시 콜백 처리하기
    /// </summary>
    /// <param name="d">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private static void ImageSourcePropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if(d is RoundImage roundImage)
        {
            roundImage.UpdateBackground();
        }
    }

    #endregion

    ////////////////////////////////////////////////////////////////////////////////////////// Instance
    //////////////////////////////////////////////////////////////////////////////// Public
    ////////////////////////////////////////////////////////////////////// Function

    #region 템플리트 적용시 처리하기 - OnApplyTemplate()

    /// <summary>
    /// 템플리트 적용시 처리하기
    /// </summary>
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        this.rootBorder = GetTemplateChild("PART_RootBorder") as Border;
    }

    #endregion

    ////////////////////////////////////////////////////////////////////////////////////////// Private
    //////////////////////////////////////////////////////////////////////////////// Event

    #region 컨트롤 로드시 처리하기 - Control_Loaded(sender, e)

    /// <summary>
    /// 컨트롤 로드시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void Control_Loaded(object sender, RoutedEventArgs e)
    {
        UpdateBackground();
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////// Function

    #region 배경 업데이트하기 - UpdateBackground()

    /// <summary>
    /// 배경 업데이트하기
    /// </summary>
    private void UpdateBackground()
    {
        if(this.rootBorder == null)
        {
            return;
        }

        if(ImageSource != null)
        {
            this.rootBorder.Background = new ImageBrush
            {
                ImageSource = this.ImageSource,
                Stretch = this.Stretch
            };
        }
        else
        {
            this.rootBorder.Background = null;
        }
    }

    #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

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

namespace TestProject;

/// <summary>

/// 라운드 이미지

/// </summary>

public class RoundImage : Control

{

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

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

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

#region 코너 반경 속성 - CornerRadiusProperty

/// <summary>

/// 코너 반경 속성

/// </summary>

public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register

(

"CornerRadius",

typeof(CornerRadius),

typeof(RoundImage),

new PropertyMetadata(new CornerRadius(10))

);

#endregion

#region 스트레치 속성 - StretchProperty

/// <summary>

/// 스트레치 속성

/// </summary>

public static readonly DependencyProperty StretchProperty = DependencyProperty.Register

(

"Stretch",

typeof(Stretch),

typeof(RoundImage),

new PropertyMetadata(Stretch.UniformToFill, StretchPropertyChangedCallback)

);

#endregion

#region 이미지 소스 속성 - ImageSourceProperty

/// <summary>

/// 이미지 소스 속성

/// </summary>

public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register

(

"ImageSource",

typeof(ImageSource),

typeof(RoundImage),

new PropertyMetadata(null, ImageSourcePropertyChangedCallback)

);

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// 루트 테두리

/// </summary>

private Border rootBorder = null;

#endregion

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

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

#region 코너 반경 - CornerRadius

/// <summary>

/// 코너 반경

/// </summary>

public CornerRadius CornerRadius

{

get => (CornerRadius)GetValue(CornerRadiusProperty);

set => SetValue(CornerRadiusProperty, value);

}

#endregion

#region 스트레치 - Stretch

/// <summary>

/// 스트레치

/// </summary>

public Stretch Stretch

{

get => (Stretch)GetValue(StretchProperty);

set => SetValue(StretchProperty, value);

}

#endregion

#region 이미지 소스 - ImageSource

/// <summary>

/// 이미지 소스

/// </summary>

public ImageSource ImageSource

{

get => (ImageSource)GetValue(ImageSourceProperty);

set => SetValue(ImageSourceProperty, value);

}

#endregion

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

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

#region 생성자 - RoundImage()

/// <summary>

/// 생성자

/// </summary>

static RoundImage()

{

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

}

#endregion

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

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

#region 생성자 - RoundImage()

/// <summary>

/// 생성자

/// </summary>

public RoundImage()

{

Loaded += Control_Loaded;

}

#endregion

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

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

#region 스트레치 속성 변경시 콜백 처리하기 - StretchPropertyChangedCallback(d, e)

/// <summary>

/// 스트레치 속성 변경시 콜백 처리하기

/// </summary>

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

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

private static void StretchPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

if(d is RoundImage roundImage)

{

roundImage.UpdateBackground();

}

#endregion

#region 이미지 소스 속성 변경시 콜백 처리하기 - ImageSourcePropertyChangedCallback(d, e)

/// <summary>

/// 이미지 소스 속성 변경시 콜백 처리하기

/// </summary>

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

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

private static void ImageSourcePropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

if(d is RoundImage roundImage)

{

roundImage.UpdateBackground();

}

#endregion

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

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

////////////////////////////////////////////////////////////////////// Function

#region 템플리트 적용시 처리하기 - OnApplyTemplate()

/// <summary>

/// 템플리트 적용시 처리하기

/// </summary>

public override void OnApplyTemplate()

{

base.OnApplyTemplate();

this.rootBorder = GetTemplateChild("PART_RootBorder") as Border;

}

#endregion

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 컨트롤 로드시 처리하기 - Control_Loaded(sender, e)

/// <summary>

/// 컨트롤 로드시 처리하기

/// </summary>

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

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

private void Control_Loaded(object sender, RoutedEventArgs e)

{

UpdateBackground();

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 배경 업데이트하기 - UpdateBackground()

/// <summary>

/// 배경 업데이트하기

/// </summary>

private void UpdateBackground()

{

if(this.rootBorder == null)

{

return;

}

if(ImageSource != null)

{

this.rootBorder.Background = new ImageBrush

{

ImageSource = this.ImageSource,

Stretch = this.Stretch

};

}

else

{

this.rootBorder.Background = null;

}

#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"
    xmlns:local="clr-namespace:TestProject"
    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"

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:RoundImage x:Name="roundImage1"
            BorderThickness="3"
            BorderBrush="DarkGray"
            Width="300"
            Height="200"
            CornerRadius="20"
            ImageSource="IMAGE/image1.jpg">
        </local:RoundImage>
        <local:RoundImage x:Name="roundImage2"
            Margin="0 10 0 0"
            BorderThickness="3"
            BorderBrush="DarkGray"
            Width="300"
            Height="200"
            CornerRadius="20">
        </local:RoundImage>
    </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:RoundImage x:Name="roundImage1"

BorderThickness="3"

BorderBrush="DarkGray"

Width="300"

Height="200"

CornerRadius="20"

ImageSource="IMAGE/image1.jpg">

</local:RoundImage>

<local:RoundImage x:Name="roundImage2"

Margin="0 10 0 0"

BorderThickness="3"

BorderBrush="DarkGray"

Width="300"

Height="200"

CornerRadius="20">

</local:RoundImage>

</StackPanel>

</Window>

[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] ListBox 엘리먼트 : Style 속성을 사용해 글래스 효과 설정하기

■ ListBox 엘리먼트의 Style 속성을 사용해의 리스트 박스에 글래스 효과를 설정하는 방법을 보여준다. ▶ 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"
    Background="#2d2d2d"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="GlassListBoxItemStyleKey" TargetType="ListBoxItem">
            <Setter Property="BorderThickness"            Value="1"           />
            <Setter Property="BorderBrush"                Value="Transparent" />
            <Setter Property="Padding"                    Value="4 1"         />
            <Setter Property="Background"                 Value="Transparent" />
            <Setter Property="SnapsToDevicePixels"        Value="True"        />
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment"   Value="{Binding VerticalContentAlignment  , RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border Name="border"
                            Margin="2"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Padding="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}"
                            SnapsToDevicePixels="true">
                            <ContentPresenter
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter
                                    TargetName="border"
                                    Property="Background" >
                                    <Setter.Value>
                                        <LinearGradientBrush
                                            StartPoint="0 0"
                                            EndPoint="0 1">
                                            <GradientStop Offset="0" Color="#20ffffff" />
                                            <GradientStop Offset="1" Color="#10ffffff" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter
                                    TargetName="border"
                                    Property="BorderBrush"
                                    Value="#50ffffff" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter
                                    TargetName="border"
                                    Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush
                                            StartPoint="0 0"
                                            EndPoint="0 1">
                                            <GradientStop Offset="0" Color="#40ffffff" />
                                            <GradientStop Offset="1" Color="#20ffffff" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter
                                    TargetName="border"
                                    Property="BorderBrush"
                                    Value="#80ffffff" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="GlassListBoxStyleKey" TargetType="ListBox">
            <Setter Property="ItemContainerStyle"                         Value="{StaticResource GlassListBoxItemStyleKey}"/>
            <Setter Property="BorderThickness"                            Value="1"           />
            <Setter Property="BorderBrush"                                Value="#20ffffff"   />
            <Setter Property="Background"                                 Value="Transparent" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"    />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility"   Value="Auto"        />
        </Style>
    </Window.Resources>
    <ListBox
        Style="{StaticResource GlassListBoxStyleKey}"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="300"
        Height="300"
        Foreground="White">
        <ListBoxItem>항목 01</ListBoxItem>
        <ListBoxItem>항목 02</ListBoxItem>
        <ListBoxItem>항목 03</ListBoxItem>
        <ListBoxItem>항목 04</ListBoxItem>
        <ListBoxItem>항목 05</ListBoxItem>
        <ListBoxItem>항목 06</ListBoxItem>
        <ListBoxItem>항목 07</ListBoxItem>
        <ListBoxItem>항목 08</ListBoxItem>
        <ListBoxItem>항목 09</ListBoxItem>
        <ListBoxItem>항목 10</ListBoxItem>
    </ListBox>
</Window>

100

101

102

103

104

105

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

Background="#2d2d2d"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Setter.Value>

<Border Name="border"

Margin="2"

BorderThickness="{TemplateBinding BorderThickness}"

BorderBrush="{TemplateBinding BorderBrush}"

Padding="{TemplateBinding Padding}"

Background="{TemplateBinding Background}"

SnapsToDevicePixels="true">

<ContentPresenter

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

</Border>

<ControlTemplate.Triggers>

<Setter

TargetName="border"

Property="Background" >

<Setter.Value>

<LinearGradientBrush

StartPoint="0 0"

EndPoint="0 1">

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter

TargetName="border"

Property="BorderBrush"

Value="#50ffffff" />

</Trigger>

<Setter

TargetName="border"

Property="Background">

<Setter.Value>

<LinearGradientBrush

StartPoint="0 0"

EndPoint="0 1">

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter

TargetName="border"

Property="BorderBrush"

Value="#80ffffff" />

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Style>

</Window.Resources>

<ListBox

Style="{StaticResource GlassListBoxStyleKey}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="300"

Height="300"

Foreground="White">

</ListBox>

</Window>

TestProject.zip

[C#/WINUI3/.NET8] Flyout 엘리먼트 : FlyoutPresenterStyle 속성을 사용해 플라이아웃 프리젠터 스타일 설정하기

■ Flyout 엘리먼트의 FlyoutPresenterStyle 속성을 사용해 플라이아웃 프리젠터 스타일을 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서

[C#/WINUI3/.NET8] Flyout 엘리먼트 : FlyoutPresenterStyle 속성을 사용해 그림자 표시 비활성화하기

■ Flyout 엘리먼트의 FlyoutPresenterStyle 속성을 사용해 그림자 표시를 비활성화하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType

[C#/WINUI3/.NET8] WinUI 3의 generic.xaml 파일에서 컨트롤별 스타일 키

■ WinUI 3의 generic.xaml 파일에서 정의된 컨트롤별 스타일 키를 보여준다. ▶ 표


==============================================================================================
TargetType                   x:Key
===========================  =================================================================
AppBarButton                 AppBarButtonOverflowStyle
AppBarButton                 AppBarButtonRevealLabelsOnRightStyle
AppBarButton                 AppBarButtonRevealOverflowStyle
AppBarButton                 AppBarButtonRevealStyle
AppBarButton                 CommandBarFlyoutAppBarButtonStyle
AppBarButton                 CommandBarFlyoutAppBarButtonStyleBase
AppBarButton                 DefaultAppBarButtonStyle
AppBarButton                 SwipeItemStyle
===========================  =================================================================
AppBarSeparator              DefaultAppBarSeparatorStyle
===========================  =================================================================
AppBarToggleButton           AppBarToggleButtonOverflowStyle
AppBarToggleButton           AppBarToggleButtonRevealLabelsOnRightStyle
AppBarToggleButton           AppBarToggleButtonRevealOverflowStyle
AppBarToggleButton           AppBarToggleButtonRevealStyle
AppBarToggleButton           CommandBarFlyoutAppBarToggleButtonStyle
AppBarToggleButton           CommandBarFlyoutAppBarToggleButtonStyleBase
AppBarToggleButton           DefaultAppBarToggleButtonStyle
===========================  =================================================================
AutoSuggestBox               DefaultAutoSuggestBoxStyle
===========================  =================================================================
BreadcrumbBarItem            DefaultBreadcrumbBarItemStyle
===========================  =================================================================
Button                       AccentButtonStyle
Button                       AlternateCloseButtonStyle
Button                       ButtonRevealStyle
Button                       CommandBarFlyoutEllipsisButtonStyle
Button                       DefaultButtonStyle
Button                       EllipsisButton
Button                       EllipsisButtonRevealStyle
Button                       InfoBarCloseButtonStyle
Button                       NavigationBackButtonNormalStyle
Button                       NavigationBackButtonSmallStyle
Button                       NavigationViewOverflowButtonNoLabelStyleWhenPaneOnTop
Button                       NavigationViewOverflowButtonStyleWhenPaneOnTop
Button                       NavigationViewPaneSearchButtonStyle
Button                       PagerControlNumberPanelButtonStyle
Button                       PagerControlPageNavigationButtonStyle
Button                       PaneToggleButtonStyle
Button                       PipsPagerButtonBaseStyle
Button                       PipsPagerNavigationButtonBaseStyle
Button                       PipsPagerNextPageButtonStyle
Button                       PipsPagerNormalPipButtonStyle
Button                       PipsPagerPreviousPageButtonStyle
Button                       PipsPagerSelectedPipButtonStyle
Button                       TabViewButtonStyle
Button                       TabViewCloseButtonStyle
Button                       WindowCaptionButton
===========================  =================================================================
ButtonBase                   DateTimePickerFlyoutButtonStyle
ButtonBase                   DateTimePickerFlyoutLoopingSelectorNavigationButtonStyle
ButtonBase                   TextBlockButtonStyle
===========================  =================================================================
CalendarDatePicker           DefaultCalendarDatePicker
===========================  =================================================================
CalendarView                 CalendarViewRevealStyle
CalendarView                 DefaultCalendarViewStyle
===========================  =================================================================
CalendarViewDayItem          CalendarViewDayItemRevealStyle
===========================  =================================================================
CheckBox                     DefaultCheckBoxStyle
CheckBox                     ItemContainerSelectionCheckboxStyle
===========================  =================================================================
ColorPicker                  DefaultColorPickerStyle
===========================  =================================================================
ColorPickerSlider            ColorPickerSliderStyle
===========================  =================================================================
ComboBox                     DefaultComboBoxStyle
===========================  =================================================================
ComboBoxItem                 ComboBoxItemRevealStyle
ComboBoxItem                 DefaultComboBoxItemStyle
===========================  =================================================================
CommandBar                   CommandBarRevealStyle
CommandBar                   CommandBarWithoutRevealStyle
CommandBar                   DefaultCommandBarStyle
===========================  =================================================================
CommandBarFlyoutCommandBar   DefaultCommandBarFlyoutCommandBarStyle
===========================  =================================================================
CommandBarOverflowPresenter  CommandBarFlyoutCommandBarOverflowPresenterStyle
CommandBarOverflowPresenter  DefaultCommandBarOverflowPresenterStyle
===========================  =================================================================
ContentControl               NavigationViewTitleHeaderContentControlTextStyle
ContentControl               PivotTitleContentControlStyle
ContentControl               WindowChromeStyle
===========================  =================================================================
ContentDialog                DefaultContentDialogStyle
===========================  =================================================================
ContentPresenter             FlyoutPickerListViewItemContentPresenterStyle
===========================  =================================================================
DatePicker                   DefaultDatePickerStyle
===========================  =================================================================
DatePickerFlyoutPresenter    DefaultDatePickerFlyoutPresenterStyle
===========================  =================================================================
DropDownButton               DefaultDropDownButtonStyle
DropDownButton               DropDownButtonRevealStyle
===========================  =================================================================
Expander                     DefaultExpanderStyle
===========================  =================================================================
FlipView                     DefaultFlipViewStyle
===========================  =================================================================
FlipViewItem                 DefaultFlipViewItemStyle
===========================  =================================================================
FlyoutPresenter              DefaultFlyoutPresenterStyle
===========================  =================================================================
GridViewItem                 DefaultGridViewItemStyle
GridViewItem                 GridViewItemExpanded
GridViewItem                 GridViewItemRevealBackgroundShowsAboveContentStyle
GridViewItem                 GridViewItemRevealStyle
===========================  =================================================================
HyperlinkButton              DefaultHyperlinkButtonStyle
===========================  =================================================================
InfoBadge                    AttentionDotInfoBadgeStyle
InfoBadge                    AttentionIconInfoBadgeStyle
InfoBadge                    AttentionValueInfoBadgeStyle
InfoBadge                    CautionDotInfoBadgeStyle
InfoBadge                    CautionIconInfoBadgeStyle
InfoBadge                    CautionValueInfoBadgeStyle
InfoBadge                    CriticalDotInfoBadgeStyle
InfoBadge                    CriticalIconInfoBadgeStyle
InfoBadge                    CriticalValueInfoBadgeStyle
InfoBadge                    DefaultInfoBadgeStyle
InfoBadge                    InformationalDotInfoBadgeStyle
InfoBadge                    InformationalIconInfoBadgeStyle
InfoBadge                    InformationalValueInfoBadgeStyle
InfoBadge                    SuccessDotInfoBadgeStyle
InfoBadge                    SuccessIconInfoBadgeStyle
InfoBadge                    SuccessValueInfoBadgeStyle
===========================  =================================================================
ItemsView                    DefaultItemsViewStyle
===========================  =================================================================
ListBox                      DefaultListBoxStyle
===========================  =================================================================
ListBoxItem                  DefaultListBoxItemStyle
===========================  =================================================================
ListViewItem                 DefaultListViewItemStyle
ListViewItem                 ListPickerFlyoutPresenterItemStyle
ListViewItem                 ListViewItemExpanded
ListViewItem                 ListViewItemRevealBackgroundShowsAboveContentStyle
ListViewItem                 ListViewItemRevealStyle
ListViewItem                 RadioButtonsItemStyle
===========================  =================================================================
LoopingSelector              DefaultLoopingSelectorStyle
===========================  =================================================================
MediaTransportControls       DefaultMediaTransportControlsStyle
===========================  =================================================================
MenuBar                      DefaultMenuBarStyle
===========================  =================================================================
MenuFlyoutItem               DefaultMenuFlyoutItemStyle
MenuFlyoutItem               LanguageSwitcherMenuFlyoutItemStyle
MenuFlyoutItem               LanguageSwitcherMenuFlyoutSettingsRowStyle
MenuFlyoutItem               MenuFlyoutItemRevealStyle
===========================  =================================================================
MenuFlyoutPresenter          DefaultMenuFlyoutPresenterStyle
===========================  =================================================================
MenuFlyoutSubItem            DefaultMenuFlyoutSubItemStyle
MenuFlyoutSubItem            MenuFlyoutSubItemRevealStyle
MenuFlyoutSubItem            RadioMenuFlyoutSubItemStyle
NavigationViewItem           MUX_NavigationViewSettingsItemStyleWhenOnTopPane
===========================  =================================================================
NavigationViewItemPresenter  MUX_NavigationViewItemPresenterStyleWhenOnLeftPane
NavigationViewItemPresenter  MUX_NavigationViewItemPresenterStyleWhenOnLeftPaneWithRevealFocus
NavigationViewItemPresenter  MUX_NavigationViewItemPresenterStyleWhenOnTopPane
NavigationViewItemPresenter  MUX_NavigationViewItemPresenterStyleWhenOnTopPaneOverflow
NavigationViewItemPresenter  MUX_NavigationViewItemPresenterStyleWhenOnTopPaneWithRevealFocus
===========================  =================================================================
PasswordBox                  DefaultPasswordBoxStyle
===========================  =================================================================
PersonPicture                DefaultPersonPictureStyle
===========================  =================================================================
Pivot                        DefaultPivotStyle
===========================  =================================================================
PivotHeaderItem              DefaultPivotHeaderItemStyle
===========================  =================================================================
PivotItem                    DefaultPivotItemStyle
===========================  =================================================================
ProgressBar                  DefaultProgressBarStyle
===========================  =================================================================
RadioButton                  DefaultRadioButtonStyle
===========================  =================================================================
RadioButtons                 DefaultRadioButtonsStyle
===========================  =================================================================
RadioMenuFlyoutItem          DefaultRadioMenuFlyoutItemStyle
===========================  =================================================================
Rectangle                    ComboBoxItemPill
Rectangle                    SelectorBarItemPill
===========================  =================================================================
RefreshContainer             DefaultRefreshContainerStyle
===========================  =================================================================
RepeatButton                 DefaultRepeatButtonStyle
RepeatButton                 NumberBoxPopupSpinButtonStyle
RepeatButton                 NumberBoxSpinButtonStyle
RepeatButton                 RepeatButtonRevealStyle
RepeatButton                 ScrollButtonStyle
RepeatButton                 TabViewScrollButtonStyle
===========================  =================================================================
RichEditBox                  DefaultRichEditBoxStyle
===========================  =================================================================
RichTextBlock                BaseRichTextBlockStyle
RichTextBlock                BodyRichTextBlockStyle
===========================  =================================================================
ScrollBar                    DefaultScrollBarStyle
===========================  =================================================================
ScrollView                   DefaultScrollViewStyle
===========================  =================================================================
ScrollViewer                 DefaultScrollViewerStyle
ScrollViewer                 TabScrollViewerStyle
===========================  =================================================================
SelectorBar                  DefaultSelectorBarStyle
===========================  =================================================================
SelectorBarItem              DefaultSelectorBarItemStyle
===========================  =================================================================
SemanticZoom                 SemanticZoomRevealStyle
===========================  =================================================================
Shape                        ColorPickerBorderStyle
===========================  =================================================================
Slider                       DefaultSliderStyle
===========================  =================================================================
SplitButton                  SplitButtonCommandBarStyle
SplitButton                  SplitButtonRevealStyle
SplitButton                  SplitButtonStyle
===========================  =================================================================
SplitView                    DefaultSplitViewStyle
===========================  =================================================================
SwipeControl                 DefaultSwipeControlStyle
===========================  =================================================================
TabView                      DefaultTabViewStyle
===========================  =================================================================
TeachingTip                  DefaultTeachingTipStyle
===========================  =================================================================
TextBlock                    BaseTextBlockStyle
TextBlock                    BodyStrongTextBlockStyle
TextBlock                    BodyTextBlockStyle
TextBlock                    CaptionTextBlockStyle
TextBlock                    DisplayTextBlockStyle
TextBlock                    FlyoutPickerTitleTextBlockStyle
TextBlock                    HeaderTextBlockStyle
TextBlock                    NavigationViewItemHeaderTextStyle
TextBlock                    SubheaderTextBlockStyle
TextBlock                    SubtitleTextBlockStyle
TextBlock                    TitleLargeTextBlockStyle
TextBlock                    TitleTextBlockStyle
===========================  =================================================================
TextBox                      AutoSuggestBoxTextBoxStyle
TextBox                      ComboBoxTextBoxStyle
TextBox                      DefaultTextBoxStyle
TextBox                      NumberBoxTextBoxStyle
===========================  =================================================================
ToggleButton                 DefaultToggleButtonStyle
ToggleButton                 ExpanderHeaderDownStyle
ToggleButton                 ExpanderHeaderUpStyle
ToggleButton                 ToggleButtonRevealStyle
===========================  =================================================================
ToggleMenuFlyoutItem         DefaultToggleMenuFlyoutItemStyle
ToggleMenuFlyoutItem         ToggleMenuFlyoutItemRevealStyle
===========================  =================================================================
ToggleSplitButton            SplitButtonStyle
===========================  =================================================================
ToggleSwitch                 DefaultToggleSwitchStyle
===========================  =================================================================
ToolTip                      DefaultToolTipStyle
===========================  =================================================================
TreeView                     DefaultTreeViewStyle
===========================  =================================================================
TreeViewItem                 DefaultListViewItemStyle
TreeViewItem                 MUX_TreeViewItemStyle
===========================  =================================================================
TwoPaneView                  DefaultTwoPaneViewStyle
==============================================================================================

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

==============================================================================================

TargetType x:Key

=========================== =================================================================

AppBarButton AppBarButtonOverflowStyle

AppBarButton AppBarButtonRevealLabelsOnRightStyle

AppBarButton AppBarButtonRevealOverflowStyle

AppBarButton AppBarButtonRevealStyle

AppBarButton CommandBarFlyoutAppBarButtonStyle

AppBarButton CommandBarFlyoutAppBarButtonStyleBase

AppBarButton DefaultAppBarButtonStyle

AppBarButton SwipeItemStyle

=========================== =================================================================

AppBarSeparator DefaultAppBarSeparatorStyle

=========================== =================================================================

AppBarToggleButton AppBarToggleButtonOverflowStyle

AppBarToggleButton AppBarToggleButtonRevealLabelsOnRightStyle

AppBarToggleButton AppBarToggleButtonRevealOverflowStyle

AppBarToggleButton AppBarToggleButtonRevealStyle

AppBarToggleButton CommandBarFlyoutAppBarToggleButtonStyle

AppBarToggleButton CommandBarFlyoutAppBarToggleButtonStyleBase

AppBarToggleButton DefaultAppBarToggleButtonStyle

=========================== =================================================================

AutoSuggestBox DefaultAutoSuggestBoxStyle

=========================== =================================================================

BreadcrumbBarItem DefaultBreadcrumbBarItemStyle

=========================== =================================================================

Button AccentButtonStyle

Button AlternateCloseButtonStyle

Button ButtonRevealStyle

Button CommandBarFlyoutEllipsisButtonStyle

Button DefaultButtonStyle

Button EllipsisButton

Button EllipsisButtonRevealStyle

Button InfoBarCloseButtonStyle

Button NavigationBackButtonNormalStyle

Button NavigationBackButtonSmallStyle

Button NavigationViewOverflowButtonNoLabelStyleWhenPaneOnTop

Button NavigationViewOverflowButtonStyleWhenPaneOnTop

Button NavigationViewPaneSearchButtonStyle

Button PagerControlNumberPanelButtonStyle

Button PagerControlPageNavigationButtonStyle

Button PaneToggleButtonStyle

Button PipsPagerButtonBaseStyle

Button PipsPagerNavigationButtonBaseStyle

Button PipsPagerNextPageButtonStyle

Button PipsPagerNormalPipButtonStyle

Button PipsPagerPreviousPageButtonStyle

Button PipsPagerSelectedPipButtonStyle

Button TabViewButtonStyle

Button TabViewCloseButtonStyle

Button WindowCaptionButton

=========================== =================================================================

ButtonBase DateTimePickerFlyoutButtonStyle

ButtonBase DateTimePickerFlyoutLoopingSelectorNavigationButtonStyle

ButtonBase TextBlockButtonStyle

=========================== =================================================================

CalendarDatePicker DefaultCalendarDatePicker

=========================== =================================================================

CalendarView CalendarViewRevealStyle

CalendarView DefaultCalendarViewStyle

=========================== =================================================================

CalendarViewDayItem CalendarViewDayItemRevealStyle

=========================== =================================================================

CheckBox DefaultCheckBoxStyle

CheckBox ItemContainerSelectionCheckboxStyle

=========================== =================================================================

ColorPicker DefaultColorPickerStyle

=========================== =================================================================

ColorPickerSlider ColorPickerSliderStyle

=========================== =================================================================

ComboBox DefaultComboBoxStyle

=========================== =================================================================

ComboBoxItem ComboBoxItemRevealStyle

ComboBoxItem DefaultComboBoxItemStyle

=========================== =================================================================

CommandBar CommandBarRevealStyle

CommandBar CommandBarWithoutRevealStyle

CommandBar DefaultCommandBarStyle

=========================== =================================================================

CommandBarFlyoutCommandBar DefaultCommandBarFlyoutCommandBarStyle

=========================== =================================================================

CommandBarOverflowPresenter CommandBarFlyoutCommandBarOverflowPresenterStyle

CommandBarOverflowPresenter DefaultCommandBarOverflowPresenterStyle

=========================== =================================================================

ContentControl NavigationViewTitleHeaderContentControlTextStyle

ContentControl PivotTitleContentControlStyle

ContentControl WindowChromeStyle

=========================== =================================================================

ContentDialog DefaultContentDialogStyle

=========================== =================================================================

ContentPresenter FlyoutPickerListViewItemContentPresenterStyle

=========================== =================================================================

DatePicker DefaultDatePickerStyle

=========================== =================================================================

DatePickerFlyoutPresenter DefaultDatePickerFlyoutPresenterStyle

=========================== =================================================================

DropDownButton DefaultDropDownButtonStyle

DropDownButton DropDownButtonRevealStyle

=========================== =================================================================

Expander DefaultExpanderStyle

=========================== =================================================================

FlipView DefaultFlipViewStyle

=========================== =================================================================

FlipViewItem DefaultFlipViewItemStyle

=========================== =================================================================

FlyoutPresenter DefaultFlyoutPresenterStyle

=========================== =================================================================

GridViewItem DefaultGridViewItemStyle

GridViewItem GridViewItemExpanded

GridViewItem GridViewItemRevealBackgroundShowsAboveContentStyle

GridViewItem GridViewItemRevealStyle

=========================== =================================================================

HyperlinkButton DefaultHyperlinkButtonStyle

=========================== =================================================================

InfoBadge AttentionDotInfoBadgeStyle

InfoBadge AttentionIconInfoBadgeStyle

InfoBadge AttentionValueInfoBadgeStyle

InfoBadge CautionDotInfoBadgeStyle

InfoBadge CautionIconInfoBadgeStyle

InfoBadge CautionValueInfoBadgeStyle

InfoBadge CriticalDotInfoBadgeStyle

InfoBadge CriticalIconInfoBadgeStyle

InfoBadge CriticalValueInfoBadgeStyle

InfoBadge DefaultInfoBadgeStyle

InfoBadge InformationalDotInfoBadgeStyle

InfoBadge InformationalIconInfoBadgeStyle

InfoBadge InformationalValueInfoBadgeStyle

InfoBadge SuccessDotInfoBadgeStyle

InfoBadge SuccessIconInfoBadgeStyle

InfoBadge SuccessValueInfoBadgeStyle

=========================== =================================================================

ItemsView DefaultItemsViewStyle

=========================== =================================================================

ListBox DefaultListBoxStyle

=========================== =================================================================

ListBoxItem DefaultListBoxItemStyle

=========================== =================================================================

ListViewItem DefaultListViewItemStyle

ListViewItem ListPickerFlyoutPresenterItemStyle

ListViewItem ListViewItemExpanded

ListViewItem ListViewItemRevealBackgroundShowsAboveContentStyle

ListViewItem ListViewItemRevealStyle

ListViewItem RadioButtonsItemStyle

=========================== =================================================================

LoopingSelector DefaultLoopingSelectorStyle

=========================== =================================================================

MediaTransportControls DefaultMediaTransportControlsStyle

=========================== =================================================================

MenuBar DefaultMenuBarStyle

=========================== =================================================================

MenuFlyoutItem DefaultMenuFlyoutItemStyle

MenuFlyoutItem LanguageSwitcherMenuFlyoutItemStyle

MenuFlyoutItem LanguageSwitcherMenuFlyoutSettingsRowStyle

MenuFlyoutItem MenuFlyoutItemRevealStyle

=========================== =================================================================

MenuFlyoutPresenter DefaultMenuFlyoutPresenterStyle

=========================== =================================================================

MenuFlyoutSubItem DefaultMenuFlyoutSubItemStyle

MenuFlyoutSubItem MenuFlyoutSubItemRevealStyle

MenuFlyoutSubItem RadioMenuFlyoutSubItemStyle

NavigationViewItem MUX_NavigationViewSettingsItemStyleWhenOnTopPane

=========================== =================================================================

NavigationViewItemPresenter MUX_NavigationViewItemPresenterStyleWhenOnLeftPane

NavigationViewItemPresenter MUX_NavigationViewItemPresenterStyleWhenOnLeftPaneWithRevealFocus

NavigationViewItemPresenter MUX_NavigationViewItemPresenterStyleWhenOnTopPane

NavigationViewItemPresenter MUX_NavigationViewItemPresenterStyleWhenOnTopPaneOverflow

NavigationViewItemPresenter MUX_NavigationViewItemPresenterStyleWhenOnTopPaneWithRevealFocus

=========================== =================================================================

PasswordBox DefaultPasswordBoxStyle

=========================== =================================================================

PersonPicture DefaultPersonPictureStyle

=========================== =================================================================

Pivot DefaultPivotStyle

=========================== =================================================================

PivotHeaderItem DefaultPivotHeaderItemStyle

=========================== =================================================================

PivotItem DefaultPivotItemStyle

=========================== =================================================================

ProgressBar DefaultProgressBarStyle

=========================== =================================================================

RadioButton DefaultRadioButtonStyle

=========================== =================================================================

RadioButtons DefaultRadioButtonsStyle

=========================== =================================================================

RadioMenuFlyoutItem DefaultRadioMenuFlyoutItemStyle

=========================== =================================================================

Rectangle ComboBoxItemPill

Rectangle SelectorBarItemPill

=========================== =================================================================

RefreshContainer DefaultRefreshContainerStyle

=========================== =================================================================

RepeatButton DefaultRepeatButtonStyle

RepeatButton NumberBoxPopupSpinButtonStyle

RepeatButton NumberBoxSpinButtonStyle

RepeatButton RepeatButtonRevealStyle

RepeatButton ScrollButtonStyle

RepeatButton TabViewScrollButtonStyle

=========================== =================================================================

RichEditBox DefaultRichEditBoxStyle

=========================== =================================================================

RichTextBlock BaseRichTextBlockStyle

RichTextBlock BodyRichTextBlockStyle

=========================== =================================================================

ScrollBar DefaultScrollBarStyle

=========================== =================================================================

ScrollView DefaultScrollViewStyle

=========================== =================================================================

ScrollViewer DefaultScrollViewerStyle

ScrollViewer TabScrollViewerStyle

=========================== =================================================================

SelectorBar DefaultSelectorBarStyle

=========================== =================================================================

SelectorBarItem DefaultSelectorBarItemStyle

=========================== =================================================================

SemanticZoom SemanticZoomRevealStyle

=========================== =================================================================

Shape ColorPickerBorderStyle

=========================== =================================================================

Slider DefaultSliderStyle

=========================== =================================================================

SplitButton SplitButtonCommandBarStyle

SplitButton SplitButtonRevealStyle

SplitButton SplitButtonStyle

=========================== =================================================================

SplitView DefaultSplitViewStyle

=========================== =================================================================

SwipeControl DefaultSwipeControlStyle

=========================== =================================================================

TabView DefaultTabViewStyle

=========================== =================================================================

TeachingTip DefaultTeachingTipStyle

=========================== =================================================================

TextBlock BaseTextBlockStyle

TextBlock BodyStrongTextBlockStyle

TextBlock BodyTextBlockStyle

TextBlock CaptionTextBlockStyle

TextBlock DisplayTextBlockStyle

TextBlock FlyoutPickerTitleTextBlockStyle

TextBlock HeaderTextBlockStyle

TextBlock NavigationViewItemHeaderTextStyle

TextBlock SubheaderTextBlockStyle

TextBlock SubtitleTextBlockStyle

TextBlock TitleLargeTextBlockStyle

TextBlock TitleTextBlockStyle

=========================== =================================================================

TextBox AutoSuggestBoxTextBoxStyle

TextBox ComboBoxTextBoxStyle

TextBox DefaultTextBoxStyle

TextBox NumberBoxTextBoxStyle

=========================== =================================================================

ToggleButton DefaultToggleButtonStyle

ToggleButton ExpanderHeaderDownStyle

ToggleButton ExpanderHeaderUpStyle

ToggleButton ToggleButtonRevealStyle

=========================== =================================================================

ToggleMenuFlyoutItem DefaultToggleMenuFlyoutItemStyle

ToggleMenuFlyoutItem ToggleMenuFlyoutItemRevealStyle

=========================== =================================================================

ToggleSplitButton SplitButtonStyle

=========================== =================================================================

ToggleSwitch DefaultToggleSwitchStyle

=========================== =================================================================

ToolTip DefaultToolTipStyle

=========================== =================================================================

TreeView DefaultTreeViewStyle

=========================== =================================================================

TreeViewItem DefaultListViewItemStyle

TreeViewItem MUX_TreeViewItemStyle

=========================== =================================================================

TwoPaneView DefaultTwoPaneViewStyle

==============================================================================================

[C#/WINUI3/.NET8] Button 엘리먼트 : Style 속성을 사용해 버튼 스타일 설정하기

■ Button 엘리먼트의 Style 속성을 사용해 버튼 스타일을 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType

[CSS/CSS3] 기본 구조에 CSS 디자인 적용하기

■ 기본 구조에 CSS 디자인을 적용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            body
            {
                background-color : #5b5c58;
                font-family      : Calibri, Verdana, Arial, sans-serif;
                font-size        : 14px;
            }
            header, footer, nav, article, section, aside
            {
                width         : 100%;
                margin-top    : 2px;
                margin-bottom : 2px;
                display       : inline-block;
            }
            header
            {
                background        : url(sunset.jpg);
                background-repeat : no-repeat;
                background-size   : 100% 100%;
            }
            header, footer
            {
                -moz-border-radius    : 12px;
                -webkit-border-radius : 12px;
                border-radius         : 12px;
                background-color      : #d2ffda;
            }
            nav
            {
                background-color : #f0f8ff;
            }
            aside
            {
                height           : 130px;
                background-color : #7b7c78;
            }
            section
            {
                background-color : white;
            }
            section p
            {
                margin : 0px 20px 0px;
            }
            footer
            {
                height     : 30px;
                text-align : center;
            }
            #menu
            {
                font : 13pt Arial;
            }
            #navigation_bar li
            {
                list-style : none;
                float      : left;
            }
            #navigation_bar li a
            {
                padding         : 3px 8px;
                text-decoration : none;
                display         : block;
            }
            #navigation_bar li:hover .submenu
            {
                position : absolute;
                margin   : 0;
                padding  : 0;
                display  : block;
            }
            #navigation_bar li:hover li
            {
                float            : none;
                background-color : #ffff99;
            }
            .submenu
            {
                display : none;
            }
            .submenu a:hover
            {
                background-color : #ccff99;
            }
            #gallery ul li
            {
                list-style : none;
                display    : inline-table;
                padding    : 10px;
            }
            #gallery ul li .big_image
            {
                position           : absolute;
                width              : 0px;
                opacity            : 0;
                -o-transition      : all 0.6s linear;
                -webkit-transition : all 0.6s linear;
            }
            #gallery ul li:hover .big_image
            {
                position : absolute;
                width    : 320px;
                opacity  : 1;
                float    : right;
            }
        </style>
    </head>
    <body>
        <header>
            <hgroup>
                <h1 style="margin:5px;">헤더 1</h1>
                <h2 style="margin:5px; color:white;">서브 헤더 2</h2>
            </hgroup>
        </header>
        <nav>
            <div id="menu">
                <ul id="navigation_bar">
                    <li>
                        <a href="#">메뉴 1</a>
                        <ul class="submenu">
                           <li><a href="#">메뉴 1-1</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴 2</a>
                        <ul class="submenu">
                           <li><a href="#">메뉴 2-1</a></li>
                           <li><a href="#">메뉴 2-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">메뉴 3</a></li>
                </ul>
            </div>
        </nav>
        <aside>
            <div id="gallery">
                <ul>
                    <li>
                        <img class="big_image" src="apple.jpg" />
                        <img class="small_image" width="80" height="100" src="apple.jpg" />
                    </li>
                    <li>
                        <img class="big_image" src="rocks.jpg" />
                        <img class="small_image" width="80" height="100" src="rocks.jpg" />
                    </li>
                </ul>
            </div>
        </aside>
        <section>
            <h1>섹션 1</h1>
            <article>
                <p>
신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.
새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.
3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.
같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.
그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.
소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.
소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.
잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.
그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.
                </p>
            </article>
        </section>
        <section>
            <h1>섹션 2</h1>
            <article>
                <p>
신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.
새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.
3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.
같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.
그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.
소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.
소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.
잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.
그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.
                </p>
            </article>
        </section>
        <footer>
            대표전화 : 02-1234-5678 | 팩스 02-1234-5678 | 이메일 : abc@abcd.com
        </footer>
    </body>
</html>

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

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-color : #5b5c58;

font-family : Calibri, Verdana, Arial, sans-serif;

font-size : 14px;

}

header, footer, nav, article, section, aside

{

width : 100%;

margin-top : 2px;

margin-bottom : 2px;

display : inline-block;

}

header

{

background : url(sunset.jpg);

background-repeat : no-repeat;

background-size : 100% 100%;

}

header, footer

{

-moz-border-radius : 12px;

-webkit-border-radius : 12px;

border-radius : 12px;

background-color : #d2ffda;

}

nav

{

background-color : #f0f8ff;

}

aside

{

height : 130px;

background-color : #7b7c78;

}

section

{

background-color : white;

}

section p

{

margin : 0px 20px 0px;

}

footer

{

height : 30px;

text-align : center;

}

#menu

{

font : 13pt Arial;

}

#navigation_bar li

{

list-style : none;

float : left;

}

#navigation_bar li a

{

padding : 3px 8px;

text-decoration : none;

display : block;

}

#navigation_bar li:hover .submenu

{

position : absolute;

margin : 0;

padding : 0;

display : block;

}

#navigation_bar li:hover li

{

float : none;

background-color : #ffff99;

}

.submenu

{

display : none;

}

.submenu a:hover

{

background-color : #ccff99;

}

#gallery ul li

{

list-style : none;

display : inline-table;

padding : 10px;

}

#gallery ul li .big_image

{

position : absolute;

width : 0px;

opacity : 0;

-o-transition : all 0.6s linear;

-webkit-transition : all 0.6s linear;

}

#gallery ul li:hover .big_image

{

position : absolute;

width : 320px;

opacity : 1;

float : right;

}

</style>

</head>

<body>

</hgroup>

</header>

<nav>

<li>

</ul>

</li>

<li>

</ul>

</li>

</ul>

</div>

</nav>

<aside>

<ul>

<li>

</li>

<li>

</li>

</ul>

</div>

</aside>

<p>

신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.

새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.

3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.

같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.

그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.

소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.

소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.

잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.

그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.

</p>

</article>

</section>

<p>

신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.

새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.

3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.

같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.

그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.

소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.

소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.

잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.

그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.

</p>

</article>

</section>

대표전화 : 02-1234-5678 | 팩스 02-1234-5678 | 이메일 : abc@abcd.com

</footer>

</body>

</html>

apple.jpg rocks.jpg sunset.jpg

[CSS/CSS3] CSS 이행(transition) 속성 사용하기

■ CSS 이행(transition) 속성을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #image1
            {
                -webkit-transition : all 1s ease;
                -o-transition      : all 1s ease;
            }
            #image1:hover
            {
                transform         : rotate(30deg);
                -webkit-transform : rotate(30deg);
                -moz-transform    : rotate(30deg);
                -o-transform      : rotate(30deg);
            }
            #image2
            {
                width              : 120px;
                height             : 200px;
                -webkit-transition : all 1s linear;
                -o-transition      : all 1s linear;
            }
            #image2:hover
            {
                width  : 240px;
                height : 400px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 이행 속성</h1>
        </header>
        <div>
            <img id="image1" src="apple.jpg"  />
            <img id="image2" src="rocks.jpg"  />
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#image1

{

-webkit-transition : all 1s ease;

-o-transition : all 1s ease;

}

#image1:hover

{

transform : rotate(30deg);

-webkit-transform : rotate(30deg);

-moz-transform : rotate(30deg);

-o-transform : rotate(30deg);

}

#image2

{

width : 120px;

height : 200px;

-webkit-transition : all 1s linear;

-o-transition : all 1s linear;

}

#image2:hover

{

width : 240px;

height : 400px;

}

</style>

</head>

<body>

</header>

<div>

</div>

</body>

</html>

apple.jpg rocks.jpg

[CSS/CSS3] CSS 변환(transform) 속성 사용하기

■ CSS 변환 속성(transform)을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #image1
            {
                position          : absolute;
                left              : 30px;
                top               : 30px;
                transform         : translate(200px, 100px);
                -webkit-transform : translate(200px, 100px);
                -moz-transform    : translate(200px, 100px);
                -o-transform      : translate(200px, 100px);
                opacity           : 0.5;
            }
            #image2
            {
                transform         : rotate(30deg) scale(0.5, 0.5);
                -webkit-transform : rotate(30deg) scale(0.5, 0.5);
                -moz-transform    : rotate(30deg) scale(0.5, 0.5);
                -o-transform      : rotate(30deg) scale(0.5, 0.5);
            }
            #image3
            {
                transform         : skew(10deg, 10deg);
                -webkit-transform : skew(10deg, 10deg);
                -moz-transform    : skew(10deg, 10deg);
                -o-transform      : skew(10deg, 10deg);
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 변환 속성</h1>
        </header>
        <div>
            <img id="image1" src="apple.jpg"  />
            <img id="image2" src="rocks.jpg"  />
            <img id="image3" src="sunset.jpg" />
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#image1

{

position : absolute;

left : 30px;

top : 30px;

transform : translate(200px, 100px);

-webkit-transform : translate(200px, 100px);

-moz-transform : translate(200px, 100px);

-o-transform : translate(200px, 100px);

opacity : 0.5;

}

#image2

{

transform : rotate(30deg) scale(0.5, 0.5);

-webkit-transform : rotate(30deg) scale(0.5, 0.5);

-moz-transform : rotate(30deg) scale(0.5, 0.5);

-o-transform : rotate(30deg) scale(0.5, 0.5);

}

#image3

{

transform : skew(10deg, 10deg);

-webkit-transform : skew(10deg, 10deg);

-moz-transform : skew(10deg, 10deg);

-o-transform : skew(10deg, 10deg);

}

</style>

</head>

<body>

</header>

<div>

</div>

</body>

</html>

apple.jpg rocks.jpg sunset.jpg

[CSS/CSS3] CSS 멀티 컬럼 속성 사용하기

■ CSS 멀티 컬럼 속성을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div
            {
                margin  : 20px;
                display : inline-block;
            }
            #multi
            {
                -webkit-column-count : 3;
                -webkit-column-gap   : 20px;
                -webkit-column-rule  : 1px dashed black;
                -moz-column-count    : 3;
                -moz-column-gap      : 20px;
                -moz-column-rule     : 1px dashed black;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 멀티 컬럼 속성</h1>
        </header>
        <div>
신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.
새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.
3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.
같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.
그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.
소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.
소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.
잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.
그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.
        </div>
        <div id="multi">
신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.
새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.
3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.
같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.
그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.
소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.
소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.
잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.
그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div

{

margin : 20px;

display : inline-block;

}

#multi

{

-webkit-column-count : 3;

-webkit-column-gap : 20px;

-webkit-column-rule : 1px dashed black;

-moz-column-count : 3;

-moz-column-gap : 20px;

-moz-column-rule : 1px dashed black;

}

</style>

</head>

<body>

</header>

<div>

신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.

새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.

3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.

같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.

그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.

소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.

소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.

잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.

그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.

</div>

신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다.

새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다.

3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다.

같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다.

그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다.

소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다.

소녀의 말에 너틀은 이 집에 방문한 것을 후회했다.

잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다.

그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다.

</div>

</body>

</html>

※ 크롬과 파이어폭스는 지원하나 오페라와 인터넷 익스플로러는 지원하지 않는다.

[CSS/CSS3] CSS 테두리(border) 속성 사용하기

■ CSS 테두리 속성(border)을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div
            {
                margin           : 20px;
                width            : 300px;
                height           : 20px;
                border           : thin double #cccc99;
                padding          : 20px;
                background-color : #ffff99;
            }
            #div1
            {
                -webkit-border-radius : 30px;
                -moz-border-radius    : 30px;
                border-radius         : 30px;
            }
            #div2
            {
                -webkit-border-top-left-radius  : 30px;
                -webkit-border-top-right-radius : 30px;
                -moz-border-radius-topleft      : 30px;
                -moz-border-radius-topright     : 30px;
                border-top-left-radius          : 30px;
                border-top-right-radius         : 30px;
            }
            #div3
            {
                -webkit-border-bottom-left-radius  : 30px;
                -webkit-border-bottom-right-radius : 30px;
                -moz-border-radius-bottomleft      : 30px;
                -moz-border-radius-bottomright     : 30px;
                border-bottom-left-radius          : 30px;
                border-bottom-right-radius         : 30px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 테두리 속성</h1>
        </header>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div

{

margin : 20px;

width : 300px;

height : 20px;

border : thin double #cccc99;

padding : 20px;

background-color : #ffff99;

}

#div1

{

-webkit-border-radius : 30px;

-moz-border-radius : 30px;

border-radius : 30px;

}

#div2

{

-webkit-border-top-left-radius : 30px;

-webkit-border-top-right-radius : 30px;

-moz-border-radius-topleft : 30px;

-moz-border-radius-topright : 30px;

border-top-left-radius : 30px;

border-top-right-radius : 30px;

}

#div3

{

-webkit-border-bottom-left-radius : 30px;

-webkit-border-bottom-right-radius : 30px;

-moz-border-radius-bottomleft : 30px;

-moz-border-radius-bottomright : 30px;

border-bottom-left-radius : 30px;

border-bottom-right-radius : 30px;

}

</style>

</head>

<body>

</header>

</body>

</html>

[CSS/CSS3] CSS 배경 속성 사용하기

■ CSS 배경 속성을 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #div1
            {
                float             : left;
                margin            : 20px;
                width             : 100px;
                height            : 250px;
                border            : 10px dotted;
                background        : url(sunset.jpg);
                background-repeat : no-repeat;
                background-size   : 80% 80%;
                background-origin : border-box;
                background-clip   : border-box;
                padding           : 20px;
                display           : block;
            }
            #div2
            {
                float             : left;
                margin            : 20px;
                width             : 100px;
                height            : 250px;
                border            : 10px dotted;
                background        : url(sunset.jpg);
                background-repeat : no-repeat;
                background-size   : 80% 80%;
                background-origin : border-box;
                background-clip   : padding-box;
                padding           : 20px;
                display           : block;
            }
            #div3
            {
                float             : left;
                margin            : 20px;
                width             : 100px;
                height            : 250px;
                border            : 10px dotted;
                background        : url(sunset.jpg);
                background-repeat : no-repeat;
                background-size   : 80% 80%;
                background-origin : border-box;
                background-clip   : content-box;
                padding           : 20px;
                display           : block;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 배경 속성</h1>
        </header>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#div1

{

float : left;

margin : 20px;

width : 100px;

height : 250px;

border : 10px dotted;

background : url(sunset.jpg);

background-repeat : no-repeat;

background-size : 80% 80%;

background-origin : border-box;

background-clip : border-box;

padding : 20px;

display : block;

}

#div2

{

float : left;

margin : 20px;

width : 100px;

height : 250px;

border : 10px dotted;

background : url(sunset.jpg);

background-repeat : no-repeat;

background-size : 80% 80%;

background-origin : border-box;

background-clip : padding-box;

padding : 20px;

display : block;

}

#div3

{

float : left;

margin : 20px;

width : 100px;

height : 250px;

border : 10px dotted;

background : url(sunset.jpg);

background-repeat : no-repeat;

background-size : 80% 80%;

background-origin : border-box;

background-clip : content-box;

padding : 20px;

display : block;

}

</style>

</head>

<body>

</header>

</body>

</html>

sunset.jpg

[CSS/CSS3] CSS 스타일 설정하기

■ CSS 스타일을 설정하는 방법을 보여준다. 1. 인라인 스타일을 설정한다. ▶ 예제 코드 (HTML)


<p style="background-color:blue;">

2. <style> 태그를 사용해 페이지 스타일을 설정한다.

[CSS/CSS3] 구조적 가상 선택자 사용하기

■ 구조적 가상 선택자를 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:nth-of-type(2)
            {
                margin : 10px;
                border : 2px solid red;
            }
            p:nth-child(odd)
            {
                background-color : #aaaaaa;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 구조적 가상 선택자</h1>
        </header>
        <div class="selectortest">
            성명 : <input id="name" type="text" /><br />
            아이디 : <input id="id" type="text" /><br />
            전화번호 : <input id="phone" type="text" /><br />
        </div>
        <p>구조적 가상 클래스 선택자는 다양한 방식으로 구조화된 페이지에서 특정 요소를 선택할 수 있다.</p>
        <p>이 중 :nth-of-type(n)는 동일 유형 중 n번째 요소를 선택하는 의미이다.</p>
        <p>2n, 2n+1과 같이 수식으로 짝홀수를 선택하도록 할 수 있다.</p>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

input:nth-of-type(2)

{

margin : 10px;

border : 2px solid red;

}

p:nth-child(odd)

{

background-color : #aaaaaa;

}

</style>

</head>

<body>

</header>

성명 : <input id="name" type="text" /><br />

아이디 : <input id="id" type="text" /><br />

전화번호 : <input id="phone" type="text" /><br />

</div>

<p>구조적 가상 클래스 선택자는 다양한 방식으로 구조화된 페이지에서 특정 요소를 선택할 수 있다.</p>

<p>2n, 2n+1과 같이 수식으로 짝홀수를 선택하도록 할 수 있다.</p>

</body>

</html>

[CSS/CSS3] 가상 선택자 사용하기

■ 가상 선택자를 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            input:hover
            {
                background-color : #ffff00;
            }
            a:visited
            {
                color : #00ffff;
            }
            p:first-line
            {
                font : 20pt Arial;
            }
            #paragraph1:first-line
            {
                color : blue;
            }
            #paragraph2:active
            {
                background-color : #dddddd;
                font-size        : 150%;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 가상 선택자</h1>
        </header>
        <div class="selectortest">
            <ul>
                <li><a href="#test1">test1</a></li>
                <li><a href="#test2">test2</a></li>
            </ul>
            <p id="paragraph1">
                pseudo class select에 대해 테스트를 하고 있습니다.<br />
                :first-line 선택자를 이용하면 문단의 첫번째 문장을 선택할 수 있습니다.
            </p>
            <p id="paragraph2">
                이곳을 클릭하면 배경색상과 폰트가 변경됩니다.
            </p>
            <input type="text"></input>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

input:hover

{

background-color : #ffff00;

}

a:visited

{

color : #00ffff;

}

p:first-line

{

font : 20pt Arial;

}

#paragraph1:first-line

{

color : blue;

}

#paragraph2:active

{

background-color : #dddddd;

font-size : 150%;

}

</style>

</head>

<body>

</header>

<ul>

</ul>

pseudo class select에 대해 테스트를 하고 있습니다.<br />

:first-line 선택자를 이용하면 문단의 첫번째 문장을 선택할 수 있습니다.

</p>

이곳을 클릭하면 배경색상과 폰트가 변경됩니다.

</p>

</div>

</body>

</html>

[CSS/CSS3] 속성 선택자 사용하기

■ 속성 선택자를 사용하는 방법을 보여준다. ▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            a[href^="http://"]
            {
                color : red;
            }

            p[id$="hello"]
            {
                color : green;
            }

            div[class*="test"]
            {
                color : blue;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>CSS3 속성 선택자</h1>
        </header>
        <div class="selectortest">
            CSS3 속성 선택자를 테스트합니다. <a href="https://www.google.com">구글</a>
            <p id="id1_hello">p 태그 1</p>
            <p id="id2_hello">p 태그 2</p>
            <p id="id3_hello">p 태그 3</p>
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

a[href^="http://"]

{

color : red;

}

p[id$="hello"]

{

color : green;

}

div[class*="test"]

{

color : blue;

}

</style>

</head>

<body>

</header>

CSS3 속성 선택자를 테스트합니다. <a href="https://www.google.com">구글</a>

</div>

</body>

</html>

[C#/WPF] Style 엘리먼트 : Triggers 속성을 사용해 인라인 속성 트리거 만들기

■ Style 엘리먼트의 Triggers 속성을 사용해 인라인 속성 트리거를 만드는 방법을 보여준다. ▶ 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">
    <Button
        Width="200"
        Height="50"
        FontSize="24">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="Blue" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
        <Bold>확인</Bold>
    </Button>
</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">

<Button

Width="200"

Height="50"

FontSize="24">

<Button.Style>

<Style.Triggers>

</Trigger>

</Style.Triggers>

</Style>

</Button.Style>

</Button>

</Window>

TestProject.zip

[C#/WPF] Binding 엘리먼트 : Source/Path/UpdateSourceTrigger 속성을 사용해 단순 바인딩 설정하기

■ Binding 엘리먼트의 Source/Path/UpdateSourceTrigger 속성을 사용해 단순 바인딩을 설정하는 방법을 보여준다. ▶ Person.cs


using System.ComponentModel;

namespace TestProject
{
    /// <summary>
    /// 사람
    /// </summary>
    public class Person : INotifyPropertyChanged
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 속성 변경시 - PropertyChanged

        /// <summary>
        /// 속성 변경시
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 이름
        /// </summary>
        private string name;

        #endregion

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

        #region 이름 - PersonName

        /// <summary>
        /// 이름
        /// </summary>
        public string PersonName
        {
            get
            {
                return this.name;
            }
            set
            {
                this.name = value;

                FirePropertyChangedEvent("PersonName");
            }
        }

        #endregion

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

        #region 생성자 - Person()

        /// <summary>
        /// 생성자
        /// </summary>
        public Person()
        {
        }

        #endregion
        #region 생성자 - Person(name)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="name">이름</param>
        public Person(string name)
        {
            this.name = name;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(name)

        /// <summary>
        /// 속성 변경시 이벤트 발생시키기
        /// </summary>
        /// <param name="name">이름</param>
        protected void FirePropertyChangedEvent(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;

            handler?.Invoke(this, new PropertyChangedEventArgs(name));
        }

        #endregion
    }
}

100

101

102

103

104

using System.ComponentModel;

namespace TestProject

{

/// <summary>

/// 사람

/// </summary>

public class Person : INotifyPropertyChanged

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Event

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

#region 속성 변경시 - PropertyChanged

/// <summary>

/// 속성 변경시

/// </summary>

public event PropertyChangedEventHandler PropertyChanged;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// 이름

/// </summary>

private string name;

#endregion

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

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

#region 이름 - PersonName

/// <summary>

/// 이름

/// </summary>

public string PersonName

{

get

{

return this.name;

}

set

{

this.name = value;

FirePropertyChangedEvent("PersonName");

}

#endregion

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

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

#region 생성자 - Person()

/// <summary>

/// 생성자

/// </summary>

public Person()

{

}

#endregion

#region 생성자 - Person(name)

/// <summary>

/// 생성자

/// </summary>

/// <param name="name">이름</param>

public Person(string name)

{

this.name = name;

}

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(name)

/// <summary>

/// 속성 변경시 이벤트 발생시키기

/// </summary>

/// <param name="name">이름</param>

protected void FirePropertyChangedEvent(string name)

{

PropertyChangedEventHandler handler = PropertyChanged;

handler?.Invoke(this, new PropertyChangedEventArgs(name));

}

#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:Person x:Key="PersonKey"
            PersonName="Joe" />
        <Style TargetType="{x:Type Label}">
            <Setter Property="DockPanel.Dock" Value="Top" />
        </Style>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="DockPanel.Dock"           Value="Top"    />
            <Setter Property="Width"                    Value="100"    />
            <Setter Property="Height"                   Value="25"     />
            <Setter Property="VerticalContentAlignment" Value="Center" />
        </Style>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="DockPanel.Dock" Value="Top" />
            <Setter Property="Width"          Value="100" />
            <Setter Property="Height"         Value="25"  />
        </Style>
    </Window.Resources>
    <Border
        Margin="10"
        CornerRadius="5"
        BorderThickness="5"
        BorderBrush="RoyalBlue"
        Padding="10">
        <DockPanel
            Width="300"
            Height="110">
            <Label>이름을 입력해 주시기 바랍니다 :</Label>
            <TextBox>
                <TextBox.Text>
                    <Binding
                        Source="{StaticResource PersonKey}"
                        Path="PersonName"
                        UpdateSourceTrigger="PropertyChanged" />
                </TextBox.Text>
            </TextBox>
            <Label Margin="0 10 0 0">입력한 이름은 아래와 같습니다 :</Label>
            <TextBlock
                Margin="5 0 0 0"
                Text="{Binding Source={StaticResource PersonKey}, Path=PersonName}" />
        </DockPanel>
    </Border>
</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:Person x:Key="PersonKey"

PersonName="Joe" />

</Style>

</Style>

</Style>

</Window.Resources>

<Border

Margin="10"

CornerRadius="5"

BorderThickness="5"

BorderBrush="RoyalBlue"

Padding="10">

<DockPanel

Width="300"

Height="110">

<TextBox.Text>

<Binding

Source="{StaticResource PersonKey}"

Path="PersonName"

UpdateSourceTrigger="PropertyChanged" />

</TextBox.Text>

</TextBox>

<TextBlock

Margin="5 0 0 0"

Text="{Binding Source={StaticResource PersonKey}, Path=PersonName}" />

</DockPanel>

</Border>

</Window>

TestProject.zip

[C#/WPF] ItemsControl 엘리먼트 : ItemsPanel/ItemTemplate/ItemContainerStyle/Template 속성을 사용해 스타일 및 템플리트 설정하기

■ ItemsControl 엘리먼트 : ItemsPanel/ItemTemplate/ItemContainerStyle/Template 속성을 사용해 스타일 및 템플리트를 설정하는 방법을 보여준다. ▶ TaskType.cs


namespace TestProject
{
    /// <summary>
    /// 작업 타입
    /// </summary>
    public enum TaskType
    {
        /// <summary>
        /// 홈
        /// </summary>
        Home,

        /// <summary>
        /// 작업
        /// </summary>
        Work
    }
}

namespace TestProject

{

/// <summary>

/// 작업 타입

/// </summary>

public enum TaskType

{

/// <summary>

/// 홈

/// </summary>

Home,

/// <summary>

/// 작업

/// </summary>

Work

}

▶ Task.cs


using System.ComponentModel;

namespace TestProject
{
    /// <summary>
    /// 작업
    /// </summary>
    public class Task : INotifyPropertyChanged
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 속성 변경시 - PropertyChanged

        /// <summary>
        /// 속성 변경시
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 명칭
        /// </summary>
        private string name;

        /// <summary>
        /// 설명
        /// </summary>
        private string description;

        /// <summary>
        /// 우선 순위
        /// </summary>
        private int priority;

        /// <summary>
        /// 작업 타입
        /// </summary>
        private TaskType type;

        #endregion

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

        #region 명칭 - Name

        /// <summary>
        /// 명칭
        /// </summary>
        public string Name
        {
            get
            {
                return this.name;
            }
            set
            {
                this.name = value;

                FirePropertyChangedEvent("Name");
            }
        }

        #endregion
        #region 설명 - Description

        /// <summary>
        /// 설명
        /// </summary>
        public string Description
        {
            get
            {
                return this.description;
            }
            set
            {
                this.description = value;

                FirePropertyChangedEvent("Description");
            }
        }

        #endregion
        #region 우선 순위 - Priority

        /// <summary>
        /// 우선 순위
        /// </summary>
        public int Priority
        {
            get
            {
                return this.priority;
            }
            set
            {
                this.priority = value;

                FirePropertyChangedEvent("Priority");
            }
        }

        #endregion
        #region 작업 타입 - Type

        /// <summary>
        /// 작업 타입
        /// </summary>
        public TaskType Type
        {
            get
            {
                return this.type;
            }
            set
            {
                this.type = value;

                FirePropertyChangedEvent("Type");
            }
        }

        #endregion

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

        #region 생성자 - Task()

        /// <summary>
        /// 생성자
        /// </summary>
        public Task()
        {
        }

        #endregion
        #region 생성자 - Task(name, description, priority, type)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="name">명칭</param>
        /// <param name="description">설명</param>
        /// <param name="priority">우선 순위</param>
        /// <param name="type">작업 타입</param>
        public Task(string name, string description, int priority, TaskType type)
        {
            this.name        = name;
            this.description = description;
            this.priority    = priority;
            this.type        = type;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 문자열 구하기 - ToString()

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns>문자열</returns>
        public override string ToString() => this.name;

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName)

        /// <summary>
        /// 속성 변경시 이벤트 발생시키기
        /// </summary>
        /// <param name="propertyName">속성명</param>
        protected void FirePropertyChangedEvent(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;

            handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        #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.ComponentModel;

namespace TestProject

{

/// <summary>

/// 작업

/// </summary>

public class Task : INotifyPropertyChanged

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Event

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

#region 속성 변경시 - PropertyChanged

/// <summary>

/// 속성 변경시

/// </summary>

public event PropertyChangedEventHandler PropertyChanged;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// 명칭

/// </summary>

private string name;

/// <summary>

/// 설명

/// </summary>

private string description;

/// <summary>

/// 우선 순위

/// </summary>

private int priority;

/// <summary>

/// 작업 타입

/// </summary>

private TaskType type;

#endregion

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

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

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name

{

get

{

return this.name;

}

set

{

this.name = value;

FirePropertyChangedEvent("Name");

}

#endregion

#region 설명 - Description

/// <summary>

/// 설명

/// </summary>

public string Description

{

get

{

return this.description;

}

set

{

this.description = value;

FirePropertyChangedEvent("Description");

}

#endregion

#region 우선 순위 - Priority

/// <summary>

/// 우선 순위

/// </summary>

public int Priority

{

get

{

return this.priority;

}

set

{

this.priority = value;

FirePropertyChangedEvent("Priority");

}

#endregion

#region 작업 타입 - Type

/// <summary>

/// 작업 타입

/// </summary>

public TaskType Type

{

get

{

return this.type;

}

set

{

this.type = value;

FirePropertyChangedEvent("Type");

}

#endregion

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

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

#region 생성자 - Task()

/// <summary>

/// 생성자

/// </summary>

public Task()

{

}

#endregion

#region 생성자 - Task(name, description, priority, type)

/// <summary>

/// 생성자

/// </summary>

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

/// <param name="description">설명</param>

/// <param name="priority">우선 순위</param>

/// <param name="type">작업 타입</param>

public Task(string name, string description, int priority, TaskType type)

{

this.name = name;

this.description = description;

this.priority = priority;

this.type = type;

}

#endregion

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

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

#region 문자열 구하기 - ToString()

/// <summary>

/// 문자열 구하기

/// </summary>

/// <returns>문자열</returns>

public override string ToString() => this.name;

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName)

/// <summary>

/// 속성 변경시 이벤트 발생시키기

/// </summary>

/// <param name="propertyName">속성명</param>

protected void FirePropertyChangedEvent(string propertyName)

{

PropertyChangedEventHandler handler = PropertyChanged;

handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));

}

#endregion

}

▶ TaskCollection.cs


using System.Collections.ObjectModel;

namespace TestProject
{
    /// <summary>
    /// 작업 컬렉션
    /// </summary>
    public class TaskCollection : ObservableCollection<Task>
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - TaskCollection()

        /// <summary>
        /// 생성자
        /// </summary>
        public TaskCollection()
        {
            Add(new Task("Groceries", "Pick up Groceries and Detergent", 2, TaskType.Home));
            Add(new Task("Laundry"  , "Do my Laundry"                  , 2, TaskType.Home));
            Add(new Task("Email"    , "Email clients"                  , 1, TaskType.Work));
            Add(new Task("Clean"    , "Clean my office"                , 3, TaskType.Work));
            Add(new Task("Dinner"   , "Get ready for family reunion"   , 1, TaskType.Home));
            Add(new Task("Proposals", "Review new budget proposals"    , 2, TaskType.Work));
        }

        #endregion
    }
}

using System.Collections.ObjectModel;

namespace TestProject

{

/// <summary>

/// 작업 컬렉션

/// </summary>

public class TaskCollection : ObservableCollection<Task>

{

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

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

#region 생성자 - TaskCollection()

/// <summary>

/// 생성자

/// </summary>

public TaskCollection()

{

Add(new Task("Groceries", "Pick up Groceries and Detergent", 2, TaskType.Home));

Add(new Task("Laundry" , "Do my Laundry" , 2, TaskType.Home));

Add(new Task("Email" , "Email clients" , 1, TaskType.Work));

Add(new Task("Clean" , "Clean my office" , 3, TaskType.Work));

Add(new Task("Dinner" , "Get ready for family reunion" , 1, TaskType.Home));

Add(new Task("Proposals", "Review new budget proposals" , 2, TaskType.Work));

}

#endregion

}

[C#/WPF] Menu 엘리먼트 : 메뉴 스타일 설정하기

■ Menu 엘리먼트에서 MenuItem 엘리먼트의 스타일을 정의해서 메뉴 스타일을 설정하는 방법을 보여준다. ▶ 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 TargetType="{x:Type MenuItem}">
            <Setter Property="Height"     Value="{DynamicResource {x:Static SystemParameters.CaptionHeightKey}}"  />
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.MenuHighlightBrushKey}}" />
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"      />
            <Style.Triggers>
                <Trigger Property="MenuItem.IsMouseOver" Value="true">
                    <Setter Property="Foreground" Value="Red"    />
                    <Setter Property="FontSize"   Value="16"     />
                    <Setter Property="FontStyle"  Value="Italic" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_Edit">
                <MenuItem Command="ApplicationCommands.Copy"  InputGestureText="Ctrl+C" />
                <MenuItem Command="ApplicationCommands.Cut"   InputGestureText="Ctrl+X" />
                <MenuItem Command="ApplicationCommands.Paste" InputGestureText="Ctrl+V" />
            </MenuItem>
            <MenuItem Header="_Font">
                <MenuItem
                    Header="_Bold"
                    IsCheckable="True"
                    Checked="boldMenuItem_Checked"
                    Unchecked="boldMenuItem_Unchecked" />
                <MenuItem
                    Header="_Italic"
                    IsCheckable="True"
                    Checked="italicMenuItem_Checked"
                    Unchecked="italicMenuItem_Unchecked" />
                <Separator />
                <MenuItem
                    Header="I_ncrease Font Size"
                    Click="increaseFontMenuItem_Click" />
                <MenuItem
                    Header="_Decrease Font Size"
                    Click="decreaseFontMenuItem_Click" />
            </MenuItem>
        </Menu>
        <TextBox Name="textBox"
            Margin="2"
            TextWrapping="Wrap">
            The quick brown fox jumps over the lazy dog.
        </TextBox>
    </DockPanel>
</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>

</Style.Triggers>

</Style>

</Window.Resources>

</MenuItem>

<MenuItem

Header="_Bold"

IsCheckable="True"

Checked="boldMenuItem_Checked"

Unchecked="boldMenuItem_Unchecked" />

<MenuItem

Header="_Italic"

IsCheckable="True"

Checked="italicMenuItem_Checked"

Unchecked="italicMenuItem_Unchecked" />

<MenuItem

Header="I_ncrease Font Size"

Click="increaseFontMenuItem_Click" />

<MenuItem

Header="_Decrease Font Size"

Click="decreaseFontMenuItem_Click" />

</MenuItem>

</Menu>

<TextBox Name="textBox"

Margin="2"

TextWrapping="Wrap">

The quick brown fox jumps over the lazy dog.

</TextBox>

</DockPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Bold 메뉴 항목 체크시 처리하기 - boldMenuItem_Checked(sender, e)

        /// <summary>
        /// Bold 메뉴 항목 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void boldMenuItem_Checked(object sender, RoutedEventArgs e)
        {
            this.textBox.FontWeight = FontWeights.Bold;
        }

        #endregion
        #region Bold 메뉴 항목 체크 취소시 처리하기 - boldMenuItem_Unchecked(sender, e)

        /// <summary>
        /// Bold 메뉴 항목 체크 취소시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void boldMenuItem_Unchecked(object sender, RoutedEventArgs e)
        {
            this.textBox.FontWeight = FontWeights.Normal;
        }

        #endregion
        #region Italic 메뉴 항목 체크시 처리하기 - italicMenuItem_Checked(sender, e)

        /// <summary>
        /// Italic 메뉴 항목 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void italicMenuItem_Checked(object sender, RoutedEventArgs e)
        {
            this.textBox.FontStyle = FontStyles.Italic;
        }

        #endregion
        #region Italic 메뉴 항목 체크 취소시 처리하기 - italicMenuItem_Unchecked(sender, e)

        /// <summary>
        /// Italic 메뉴 항목 체크 취소시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void italicMenuItem_Unchecked(object sender, RoutedEventArgs e)
        {
            this.textBox.FontStyle = FontStyles.Normal;
        }

        #endregion
        #region Increse Font 메뉴 항목 클릭시 처리하기 - increaseFontMenuItem_Click(sender, e)

        /// <summary>
        /// Increse Font 메뉴 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void increaseFontMenuItem_Click(object sender, RoutedEventArgs e)
        {
            if(this.textBox.FontSize < 24)
            {
                this.textBox.FontSize += 2;
            }
        }

        #endregion
        #region Decrese Font 메뉴 항목 클릭시 처리하기 - decreaseFontMenuItem_Click(sender, e)

        /// <summary>
        /// Decrese Font 메뉴 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void decreaseFontMenuItem_Click(object sender, RoutedEventArgs e)
        {
            if(this.textBox.FontSize > 10)
            {
                this.textBox.FontSize -= 2;
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

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

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

#region Bold 메뉴 항목 체크시 처리하기 - boldMenuItem_Checked(sender, e)

/// <summary>

/// Bold 메뉴 항목 체크시 처리하기

/// </summary>

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

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

private void boldMenuItem_Checked(object sender, RoutedEventArgs e)

{

this.textBox.FontWeight = FontWeights.Bold;

}

#endregion

#region Bold 메뉴 항목 체크 취소시 처리하기 - boldMenuItem_Unchecked(sender, e)

/// <summary>

/// Bold 메뉴 항목 체크 취소시 처리하기

/// </summary>

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

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

private void boldMenuItem_Unchecked(object sender, RoutedEventArgs e)

{

this.textBox.FontWeight = FontWeights.Normal;

}

#endregion

#region Italic 메뉴 항목 체크시 처리하기 - italicMenuItem_Checked(sender, e)

/// <summary>

/// Italic 메뉴 항목 체크시 처리하기

/// </summary>

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

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

private void italicMenuItem_Checked(object sender, RoutedEventArgs e)

{

this.textBox.FontStyle = FontStyles.Italic;

}

#endregion

#region Italic 메뉴 항목 체크 취소시 처리하기 - italicMenuItem_Unchecked(sender, e)

/// <summary>

/// Italic 메뉴 항목 체크 취소시 처리하기

/// </summary>

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

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

private void italicMenuItem_Unchecked(object sender, RoutedEventArgs e)

{

this.textBox.FontStyle = FontStyles.Normal;

}

#endregion

#region Increse Font 메뉴 항목 클릭시 처리하기 - increaseFontMenuItem_Click(sender, e)

/// <summary>

/// Increse Font 메뉴 항목 클릭시 처리하기

/// </summary>

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

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

private void increaseFontMenuItem_Click(object sender, RoutedEventArgs e)

{

if(this.textBox.FontSize < 24)

{

this.textBox.FontSize += 2;

}

#endregion

#region Decrese Font 메뉴 항목 클릭시 처리하기 - decreaseFontMenuItem_Click(sender, e)

/// <summary>

/// Decrese Font 메뉴 항목 클릭시 처리하기

/// </summary>

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

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

private void decreaseFontMenuItem_Click(object sender, RoutedEventArgs e)

{

if(this.textBox.FontSize > 10)

{

this.textBox.FontSize -= 2;

}

#endregion

}

TestProject.zip