첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
본 블로그는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 블로그 콘텐츠 향상을 위해 쓰여집니다.

728x90
반응형
728x170

TestProject.zip
다운로드

▶ 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 TargetType="{x:Type Button}">
            <Setter Property="MinWidth"   Value="120"       />
            <Setter Property="Background" Value="#330033ff" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <StackPanel Background="Transparent">
                            <Grid x:Name="mainGrid"
                                RenderTransformOrigin="0.5 0.5">
                                <Grid.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform />
                                        <RotateTransform />
                                    </TransformGroup>
                                </Grid.RenderTransform>
                                <Grid x:Name="decorativeGrid"
                                    Background="Transparent"
                                    VerticalAlignment="Stretch"
                                    RenderTransformOrigin="0.5 0.5">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="5" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="5" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*"    />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Rectangle x:Name="backgroundRectangle" Grid.Row="0" Grid.Column="0"
                                        Grid.ColumnSpan="3" Grid.RowSpan="3"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        RadiusX="5"
                                        RadiusY="5"
                                        Fill="White" />
                                    <Rectangle x:Name="userBackgroundRectangle" Grid.Row="0" Grid.Column="0"
                                        Grid.ColumnSpan="3" Grid.RowSpan="3"
                                        HorizontalAlignment="Stretch" 
                                        VerticalAlignment="Stretch"
                                        RadiusX="5"
                                        RadiusY="5"
                                        Fill="{TemplateBinding Background}" />
                                    <Rectangle Grid.Row="0" Grid.Column="0" Grid.RowSpan="3"
                                        HorizontalAlignment="Left"
                                        Width="5"
                                        RadiusX="5"
                                        RadiusY="5">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush
                                                StartPoint="0 0.5"
                                                EndPoint="1 0.5">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Offset="0.0" Color="Gray"        />
                                                    <GradientStop Offset="1.0" Color="Transparent" />
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Rectangle Grid.Row="0" Grid.Column="2" Grid.RowSpan="3"
                                        HorizontalAlignment="Right"
                                        Width="5"
                                        RadiusX="5"
                                        RadiusY="5">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush
                                                StartPoint="0 0.5"
                                                EndPoint="1 0.5">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Offset="0.0" Color="Transparent" />
                                                    <GradientStop Offset="1.0" Color="Gray"        />
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Rectangle x:Name="glassRectangle" Grid.Row="0" Grid.Column="0"
                                        Grid.ColumnSpan="3" Grid.RowSpan="3"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        RadiusX="5"
                                        RadiusY="5"
                                        Stroke="Gray"
                                        StrokeThickness="1">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush
                                                StartPoint="0.5 0"
                                                EndPoint="0.5 1"
                                                Opacity="0.5">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Offset="0.0"  Color="White"       />
                                                    <GradientStop Offset="0.45" Color="Transparent" />
                                                    <GradientStop Offset="0.51" Color="#99000000"   />
                                                    <GradientStop Offset="0.9"  Color="#99ffffff"   />
                                                    <GradientStop Offset="1"    Color="#ffffffff"   />
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                        <Rectangle.OpacityMask>
                                            <RadialGradientBrush>
                                                <RadialGradientBrush.GradientStops>
                                                    <GradientStop Offset="0.0" Color="Transparent" />
                                                    <GradientStop Offset="1.0" Color="Black"       />
                                                </RadialGradientBrush.GradientStops>
                                            </RadialGradientBrush>
                                        </Rectangle.OpacityMask>
                                    </Rectangle>
                                    <Rectangle Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Top"
                                        Height="10"
                                        Margin="3" 
                                        RadiusX="5"
                                        RadiusY="5">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush
                                                StartPoint="0.5 0"
                                                EndPoint="0.5 1">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Offset="0.0" Color="#99ffffff"   />
                                                    <GradientStop Offset="1.0" Color="Transparent" />
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Grid.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform />
                                            <RotateTransform />
                                        </TransformGroup>
                                    </Grid.RenderTransform>
                                </Grid>
                                <ContentPresenter x:Name="myContentPresenter" Grid.Row="1" Grid.Column="1"
                                    HorizontalAlignment="Center" 
                                    VerticalAlignment="Center"
                                    Margin="10"
                                    Content="{TemplateBinding Content}" />
                            </Grid>
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard Name="mouseEnterBeginStoryboard"
                                        HandoffBehavior="Compose">
                                        <Storyboard FillBehavior="Stop">
                                            <DoubleAnimation
                                                Storyboard.TargetName="userBackgroundRectangle" 
                                                Storyboard.TargetProperty="(Rectangle.Fill).(Brush.Opacity)"
                                                FillBehavior="HoldEnd"
                                                To="0"
                                                Duration="0:0:0.1" />
                                            <DoubleAnimation
                                                Storyboard.TargetName="userBackgroundRectangle" 
                                                Storyboard.TargetProperty="(Rectangle.Fill).(Brush.Opacity)"
                                                RepeatBehavior="Forever"
                                                AutoReverse="True" 
                                                To="0.5"
                                                BeginTime="0:0:0.1"
                                                Duration="0:0:1" />
                                            <DoubleAnimation
                                                Storyboard.TargetName="decorativeGrid" 
                                                Storyboard.TargetProperty="(Grid.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                                RepeatBehavior="Forever"
                                                AutoReverse="True" 
                                                By="-0.05"
                                                Duration="0:0:0.5" />
                                            <DoubleAnimation
                                                Storyboard.TargetName="decorativeGrid" 
                                                Storyboard.TargetProperty="(Grid.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                RepeatBehavior="Forever"
                                                AutoReverse="True" 
                                                By="-0.05"
                                                Duration="0:0:0.5" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                <EventTrigger.Actions>
                                    <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="ButtonBase.Click">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation
                                                Storyboard.TargetName="backgroundRectangle" 
                                                Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                                RepeatBehavior="3x"
                                                AutoReverse="True"
                                                To="Lime"
                                                Duration="0:0:0.05" />
                                            <DoubleAnimation
                                                Storyboard.TargetName="mainGrid" 
                                                Storyboard.TargetProperty="(Grid.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
                                                From="0"
                                                To="360"
                                                Duration="0:0:0.5" />
                                            <DoubleAnimation
                                                Storyboard.TargetName="mainGrid" 
                                                Storyboard.TargetProperty="(Grid.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                                AutoReverse="True"
                                                From="1"
                                                To="0.25"
                                                Duration="0:0:0.25" />
                                            <DoubleAnimation
                                                Storyboard.TargetName="mainGrid" 
                                                Storyboard.TargetProperty="(Grid.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                AutoReverse="True"
                                                From="1"
                                                To="0.25"
                                                Duration="0:0:0.25" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Margin="10">
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Button
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Margin="10"
                Content="버튼 1" />
            <Button
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Margin="10"
                Content="버튼 2" />
            <Button
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Margin="10"
                Content="버튼 3" />
        </StackPanel>
    </Grid>
</Window>
728x90
반응형
그리드형(광고전용)
Posted by icodebroker
TAG , ,

댓글을 달아 주세요