[C#/WPF] ButtonChrome 엘리먼트 사용하기

■ ButtonChrome 엘리먼트를 사용하는 방법을 보여준다.

▶ ResourceDictionary.xaml


<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <Style x:Key="ButtonFocusVisualStyleKey">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle
                        Margin="2"
                        StrokeThickness="1"
                        Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                        StrokeDashArray="1 2"
                        SnapsToDevicePixels="true" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="ButtonNormalBackgroundBrushKey"
        StartPoint="0 0"
        EndPoint="0 1">
        <GradientStop Offset="0"   Color="#f3f3f3" />
        <GradientStop Offset="0.5" Color="#ebebeb" />
        <GradientStop Offset="0.5" Color="#dddddd" />
        <GradientStop Offset="1"   Color="#cdcdcd" />
    </LinearGradientBrush>
    <SolidColorBrush x:Key="ButtonNormalBorderBrushKey" Color="#ff707070" />
    <Style x:Key="ChromeButtonStyleKey" TargetType="{x:Type Button}">
        <Setter Property="BorderThickness"            Value="1"                                               />
        <Setter Property="BorderBrush"                Value="{StaticResource ButtonNormalBorderBrushKey}"     />
        <Setter Property="Background"                 Value="{StaticResource ButtonNormalBackgroundBrushKey}" />
        <Setter Property="Foreground"                 Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="Padding"                    Value="1"                                          />
        <Setter Property="FocusVisualStyle"           Value="{StaticResource ButtonFocusVisualStyleKey}" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment"   Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <theme:ButtonChrome Name="buttonChrome"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        RoundCorners="False"
                        Background="{TemplateBinding Background}"
                        SnapsToDevicePixels="true"
                        RenderDefaulted="{TemplateBinding IsDefaulted}"
                        RenderMouseOver="{TemplateBinding IsMouseOver}"
                        RenderPressed="{TemplateBinding IsPressed}">
                        <ContentPresenter
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="{TemplateBinding Padding}"
                            RecognizesAccessKey="True"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </theme:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter
                                TargetName="buttonChrome"
                                Property="RenderDefaulted"
                                Value="true" />
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter
                                TargetName="buttonChrome"
                                Property="RenderPressed"
                                Value="true" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#adadad" />
                        </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:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">

<Setter.Value>

<Rectangle

Margin="2"

StrokeThickness="1"

Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"

StrokeDashArray="1 2"

SnapsToDevicePixels="true" />

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<LinearGradientBrush x:Key="ButtonNormalBackgroundBrushKey"

StartPoint="0 0"

EndPoint="0 1">

</LinearGradientBrush>

<Setter.Value>

<theme:ButtonChrome Name="buttonChrome"

BorderBrush="{TemplateBinding BorderBrush}"

RoundCorners="False"

Background="{TemplateBinding Background}"

SnapsToDevicePixels="true"

RenderDefaulted="{TemplateBinding IsDefaulted}"

RenderMouseOver="{TemplateBinding IsMouseOver}"

RenderPressed="{TemplateBinding IsPressed}">

<ContentPresenter

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Margin="{TemplateBinding Padding}"

RecognizesAccessKey="True"

SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

</theme:ButtonChrome>

<ControlTemplate.Triggers>

<Setter

TargetName="buttonChrome"

Property="RenderDefaulted"

Value="true" />

</Trigger>

<Setter

TargetName="buttonChrome"

Property="RenderPressed"

Value="true" />

</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"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ResourceDictionary.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

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

StartupUri="MainWindow.xaml">

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<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="ButtonChrome 엘리먼트 사용하기"
    Background="LightGray"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Button
                Width="200"
                Height="30"
                BorderBrush="Transparent"
                Background="Transparent"
                Content="일반 버튼" />
            <Button
                Style="{DynamicResource ChromeButtonStyleKey}"
                Margin="0 10 0 0"
                Width="200"
                Height="30"
                BorderBrush="Transparent"
                Background="Transparent"
                Content="크롬 버튼" />
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="ButtonChrome 엘리먼트 사용하기"

Background="LightGray"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Button

Width="200"

Height="30"

BorderBrush="Transparent"

Background="Transparent"

Content="일반 버튼" />

<Button

Style="{DynamicResource ChromeButtonStyleKey}"

Margin="0 10 0 0"

Width="200"

Height="30"

BorderBrush="Transparent"

Background="Transparent"

Content="크롬 버튼" />

</StackPanel>

</Grid>

</Window>

TestProject.zip