첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
728x90
반응형
728x170

■ ControlTemplate 엘리먼트를 사용해 Button 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip
0.01MB

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="FocusVisualStyleKey">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Control}">
                        <Grid Margin="3 2">
                            <Rectangle
                                StrokeThickness="1"
                                Stroke="Black"
                                StrokeDashArray="2 2" />
                            <Border Name="border"
                                Width="{TemplateBinding ActualWidth}"
                                Height="{TemplateBinding ActualHeight}"
                                CornerRadius="2"
                                BorderThickness="1" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ShadowStyleKey">
            <Setter Property="Control.Foreground" Value="LightGray" />
        </Style>
        <Style x:Key="ButtonStyleKey" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"    />
            <Setter Property="Margin"                Value="2"       />
            <Setter Property="FontWeight"            Value="Bold"    />
            <Setter Property="FocusVisualStyle"      Value="{StaticResource FocusVisualStyleKey}" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush
                        StartPoint="0 0"
                        EndPoint="0 1">
                        <GradientStop Offset="0.2"  Color="#ffffd190" />
                        <GradientStop Offset="0.85" Color="Orange"    />
                        <GradientStop Offset="1"    Color="#ffffd190" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border"
                            CornerRadius="3"
                            BorderThickness="1"
                            BorderBrush="DarkGray"
                            Padding="4 2"
                            Background="{TemplateBinding Background}">
                            <Grid>
                                <ContentPresenter Name="contentShadow"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Style="{StaticResource ShadowStyleKey}">
                                    <ContentPresenter.RenderTransform>
                                        <TranslateTransform
                                            X="1.0"
                                            Y="1.0" />
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                                <ContentPresenter Name="content"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border"
                                    Property="BorderBrush"
                                    Value="#ff4788c8" />
                                <Setter
                                    Property="Foreground"
                                    Value="#ff4788c8" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush
                                            StartPoint="0 0"
                                            EndPoint="0 1">
                                            <GradientStop Offset="0.35" Color="#ffffd190" />
                                            <GradientStop Offset="0.95" Color="Orange"    />
                                            <GradientStop Offset="1"    Color="#ffffd190" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter
                                    TargetName="content"
                                    Property="RenderTransform">
                                    <Setter.Value>
                                        <TranslateTransform Y="1.0" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsDefaulted" Value="True">
                                <Setter
                                    TargetName="border"
                                    Property="BorderBrush"
                                    Value="#ff282828" />
                            </Trigger>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter
                                    TargetName="border"
                                    Property="BorderBrush"
                                    Value="#ff282828" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter
                                    TargetName="border"
                                    Property="Opacity"
                                    Value="0.7" />
                                <Setter Property="Foreground" Value="Gray" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Button Style="{StaticResource ButtonStyleKey}"
            Content="Hello" />
        <Button
            Style="{StaticResource ButtonStyleKey}"
            Margin="0 10 0 0"
            Content="World" />
        <Button
            Style="{StaticResource ButtonStyleKey}"
            Margin="0 10 0 0"
            FontSize="20"
            Content="Big Button" />
        <Button
            Style="{StaticResource ButtonStyleKey}"
            Margin="0 10 0 0"
            IsDefault="True"
            Content="Default" />
        <Button
            Style="{StaticResource ButtonStyleKey}"
            Margin="0 10 0 0"
            IsEnabled="False"
            Content="Disabled" />
        <Button
            Style="{StaticResource ButtonStyleKey}"
            Margin="0 10 0 0"
            Width="70"
            Height="30"
            Content="70 x 30" />
        <Button
            Style="{StaticResource ButtonStyleKey}"
            Margin="0 10 0 0"
            Width="30"
            Height="30">
            <Path
                Fill="Black"
                Data="M 3 3 l 9 9 l -9 9 Z" />
        </Button>
    </StackPanel>
</Window>
728x90
반응형
그리드형(광고전용)
Posted by icodebroker

댓글을 달아 주세요