[C#/WPF] ControlTemplate 엘리먼트 : 투명 회전 글래스 처리 RadioButton 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 투명 회전 글래스 처리된 RadioButton 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip

0.16MB

▶ 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>
        <LinearGradientBrush x:Key="GrayBlueLinearGradientBrushKey"
            StartPoint="0 0"
            EndPoint="1 1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0"   Color="DarkGray" />
                <GradientStop Offset="0.5" Color="#ccccff"  />
                <GradientStop Offset="1"   Color="DarkGray" />
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="GlassLinearGradientBrushKey"
            StartPoint="0 0"
            EndPoint="1 1"
            Opacity="0.75">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.2"  Color="WhiteSmoke"  />
                <GradientStop Offset="0.4"  Color="Transparent" />
                <GradientStop Offset="0.5"  Color="WhiteSmoke"  />
                <GradientStop Offset="0.75" Color="Transparent" />
                <GradientStop Offset="0.9"  Color="WhiteSmoke"  />
                <GradientStop Offset="1"    Color="Transparent" />
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        <Style TargetType="{x:Type RadioButton}">
            <Setter Property="Background" Value="{StaticResource GrayBlueLinearGradientBrushKey}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            ClipToBounds="True">
                            <Rectangle Name="outerRectangle"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                RadiusX="20"
                                RadiusY="20"
                                StrokeThickness="5"
                                Stroke="{TemplateBinding Background}"
                                Fill="Transparent" />
                            <Rectangle Name="innerRectangle"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                RadiusX="20"
                                RadiusY="20"
                                StrokeThickness="20"
                                Stroke="Transparent"
                                Fill="{TemplateBinding Background}" />
                            <Rectangle Name="glassRectangle"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                RadiusX="10"
                                RadiusY="10"
                                StrokeThickness="2"
                                Opacity="0"
                                Fill="{StaticResource GlassLinearGradientBrushKey}"
                                RenderTransformOrigin="0.5 0.5">
                                <Rectangle.Stroke>
                                    <LinearGradientBrush
                                        StartPoint="0.5 0"
                                        EndPoint="0.5 1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0.0" Color="LightBlue" />
                                            <GradientStop Offset="1.0" Color="Gray"      />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform  />
                                        <RotateTransform />
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                                <Rectangle.BitmapEffect>
                                    <BevelBitmapEffect />
                                </Rectangle.BitmapEffect>
                            </Rectangle>
                            <DockPanel>
                                <ContentPresenter Name="contentPresenter"
                                    Margin="20"
                                    TextBlock.Foreground="Black"
                                    Content="{TemplateBinding  Content}" />
                            </DockPanel>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"  />
                                    <Condition Property="IsChecked"   Value="False" />
                                </MultiTrigger.Conditions>
                                <Setter
                                    TargetName="outerRectangle"
                                    Property="Rectangle.Stroke"
                                    Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                <Setter
                                    TargetName="glassRectangle"
                                    Property="Rectangle.Opacity"
                                    Value="1" />
                                <Setter
                                    TargetName="contentPresenter"
                                    Property="ContentPresenter.BitmapEffect">
                                    <Setter.Value>
                                        <BlurBitmapEffect Radius="1" />
                                    </Setter.Value>
                                </Setter>
                            </MultiTrigger>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter
                                    TargetName="glassRectangle"
                                    Property="Rectangle.Opacity"
                                    Value="1" />
                            </Trigger>
                            <Trigger Property="IsFocused" Value="true">
                                <Setter
                                    TargetName="outerRectangle"
                                    Property="Rectangle.Stroke"
                                    Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                <Setter
                                    TargetName="glassRectangle"
                                    Property="Rectangle.Opacity"
                                    Value="1" />
                            </Trigger>
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard Name="mouseEnterBeginStoryboard">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="glassRectangle"
                                                Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                                Duration="00:00:00.5"
                                                By="-0.1" />
                                            <DoubleAnimation
                                                Storyboard.TargetName="glassRectangle"
                                                Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                Duration="00:00:00.5"
                                                By="-0.1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                <EventTrigger.Actions>
                                    <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="RadioButton.Checked">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="glassRectangle"
                                                Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
                                                Duration="00:00:00.5"
                                                By="360" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <RadioButton Margin="10">
            <Image
                Width="50"
                Height="50"
                Source="IMAGE\blueberries.jpg" />
        </RadioButton>
        <RadioButton Margin="10">
            <Image
                Width="50"
                Height="50"
                Source="IMAGE\sunset.jpg" />
        </RadioButton>
        <RadioButton Margin="10">
            <Image
                Width="50"
                Height="50"
                Source="IMAGE\apple.jpg" />
        </RadioButton>
        <RadioButton Margin="10">
            <Image
                Width="50"
                Height="50"
                Source="IMAGE\hummingbird.jpg" />
        </RadioButton>
    </StackPanel>
</Window>

 

▶ MainWindow.xaml.cs

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

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

        #region 생성자 - MainWindow()

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

            Loaded += Window_Loaded;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Methd
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            RadioButton radioButton = (Content as StackPanel).Children[2] as RadioButton;

            radioButton.Focus();

            radioButton.IsChecked = true;
        }

        #endregion
    }
}