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

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="ControlTemplate 엘리먼트 : 원형 Button 엘리먼트 정의하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="FocusVisualStyleKey">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Control}">
                        <Grid Margin="8">
                            <Ellipse Name="r1"
                                StrokeThickness="1"
                                Stroke="Black"
                                StrokeDashArray="2 2" />
                            <Border Name="border"
                                Width="{TemplateBinding ActualWidth}"
                                Height="{TemplateBinding ActualHeight}"
                                BorderThickness="1"
                                CornerRadius="2" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="CircleButtonStyleKey" TargetType="Button">
            <Setter Property="FocusVisualStyle"      Value="{StaticResource FocusVisualStyleKey}" />
            <Setter Property="Margin"                Value="2"         />
            <Setter Property="Background"            Value="#ff6db4ef" />
            <Setter Property="OverridesDefaultStyle" Value="True"      />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Fill="{TemplateBinding Background}" />
                            <Ellipse>
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Offset="0"    Color="#00000000" />
                                        <GradientStop Offset="0.88" Color="#00000000" />
                                        <GradientStop Offset="1"    Color="#80000000" />
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse Name="highlightEllipse"
                                Margin="10">
                                <Ellipse.Fill >
                                    <LinearGradientBrush >
                                        <GradientStop Offset="0"   Color="#50ffffff" />
                                        <GradientStop Offset="0.5" Color="#00ffffff" />
                                        <GradientStop Offset="1"   Color="#50ffffff" />
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter Name="contentPresenter"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter
                                    TargetName="highlightEllipse"
                                    Property="Fill">
                                    <Setter.Value>
                                        <LinearGradientBrush
                                            StartPoint="0.3 0"
                                            EndPoint="0.7 1">
                                            <GradientStop Offset="0"   Color="#50ffffff" />
                                            <GradientStop Offset="0.5" Color="#00ffffff" />
                                            <GradientStop Offset="1"   Color="#50ffffff" />
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter
                                    TargetName="contentPresenter"
                                    Property="RenderTransform">
                                    <Setter.Value>
                                        <TranslateTransform X="0.5" Y="0.5" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <WrapPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Button
            Style="{StaticResource CircleButtonStyleKey}"
            Width="100"
            Height="100">
            버튼 1
        </Button>
        <Button
            Style="{StaticResource CircleButtonStyleKey}"
            Width="80"
            Height="80"
            Background="#ff9f1014">
            버튼 2
        </Button>
        <Button
            Style="{StaticResource CircleButtonStyleKey}"
            Width="80"
            Height="80"
            Background="#ffd8c618">
            버튼 3
        </Button>      
        <Button
            Style="{StaticResource CircleButtonStyleKey}"
            Width="80"
            Height="80"
            Background="#ff499e1e">
            버튼 4
        </Button>
        <Button
            Style="{StaticResource CircleButtonStyleKey}"
            Width="80"
            Height="80"
            Background="Orange">
            버튼 5
        </Button>
        <Button
            Style="{StaticResource CircleButtonStyleKey}"
            Width="80"
            Height="80"
            Background="#ff7c7c7c">
            버튼 6
        </Button>
        <Button
            Style="{StaticResource CircleButtonStyleKey}"
            Width="80"
            Height="80"
            Background="Purple"
            Foreground="White">
            버튼 7
        </Button>
        <Button
            Style="{StaticResource CircleButtonStyleKey}"
            Width="100"
            Height="100"
            Background="#ff3120d4"
            Foreground="White">
            버튼 8
        </Button>
    </WrapPanel>
</Window>
728x90
반응형
그리드형(광고전용)
Posted by icodebroker

댓글을 달아 주세요