728x90
반응형
728x170
■ RadioButton 엘리먼트에서 글래스 효과를 제공하는 라디오 버튼을 만드는 방법을 보여준다.
▶ 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>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="FontFamily" Value="Verdana" />
</Style>
<LinearGradientBrush x:Key="GlassLinearGradientBrushKey"
StartPoint="0 0"
EndPoint="1 1"
Opacity="0.75">
<LinearGradientBrush.GradientStops>
<GradientStop Color="WhiteSmoke" Offset="0.2" />
<GradientStop Color="Transparent" Offset="0.4" />
<GradientStop Color="WhiteSmoke" Offset="0.5" />
<GradientStop Color="Transparent" Offset="0.75" />
<GradientStop Color="WhiteSmoke" Offset="0.9" />
<GradientStop Color="Transparent" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="SelectorRadioButtonStyleKey" TargetType="{x:Type RadioButton}">
<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"
RenderTransformOrigin="0.5 0.5"
Opacity="0"
Fill="{StaticResource GlassLinearGradientBrushKey}">
<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>
<DockPanel>
<ContentPresenter Name="contentPresenter"
Margin="15"
TextBlock.Foreground="Black"
Content="{TemplateBinding Content}" />
</DockPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter
TargetName="glassRectangle"
Property="Rectangle.Opacity"
Value="1" />
<Setter
TargetName="innerRectangle"
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"
From="1"
To="0.9" />
<DoubleAnimation
Storyboard.TargetName="glassRectangle"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Duration="00:00:00.5"
From="1"
To="0.9" />
<DoubleAnimation
Storyboard.TargetName="outerRectangle"
Storyboard.TargetProperty="(Rectangle.RadiusX)"
Duration="00:00:00.5"
From="20"
To="0" />
<DoubleAnimation
Storyboard.TargetName="outerRectangle"
Storyboard.TargetProperty="(Rectangle.RadiusY)"
Duration="00:00:00.5"
From="20"
To="0" />
<DoubleAnimation
Storyboard.TargetName="glassRectangle"
Storyboard.TargetProperty="(Rectangle.Opacity)"
Duration="00:00:00.1"
From="0"
To="1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="outerRectangle"
Storyboard.TargetProperty="(Rectangle.RadiusX)"
Duration="00:00:00.5"
From="0"
To="20" />
<DoubleAnimation
Storyboard.TargetName="outerRectangle"
Storyboard.TargetProperty="(Rectangle.RadiusY)"
Duration="00:00:00.5"
From="0"
To="20" />
<DoubleAnimation
Storyboard.TargetName="glassRectangle"
Storyboard.TargetProperty="(Rectangle.Opacity)"
Duration="00:00:00.1"
From="1"
To="0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="RadioButton.Checked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="glassRectangle"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
Duration="00:00:00.1"
To="0.1"
AutoReverse="True" />
<DoubleAnimation
Storyboard.TargetName="glassRectangle"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
Duration="00:00:00.1"
To="0.1"
AutoReverse="True" />
<DoubleAnimation
Storyboard.TargetName="innerRectangle"
Storyboard.TargetProperty="(Rectangle.Opacity)"
Duration="00:00:00.5"
To="0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="RadioButton.Unchecked">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="innerRectangle"
Storyboard.TargetProperty="(Rectangle.Opacity)"
Duration="00:00:00.5"
To="1.0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="White" />
</Style>
</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="TestProject"
Background="LightGray"
FontFamily="나눔고딕코딩"
FontSize="16">
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center">
<RadioButton
Style="{StaticResource SelectorRadioButtonStyleKey}"
Margin="10">
Using DrawingBrush Example
</RadioButton>
<RadioButton
Style="{StaticResource SelectorRadioButtonStyleKey}"
Margin="10">
Transform Example
</RadioButton>
<RadioButton
Style="{StaticResource SelectorRadioButtonStyleKey}"
Margin="10">
ImageDrawing Example
</RadioButton>
<RadioButton
Style="{StaticResource SelectorRadioButtonStyleKey}"
Margin="10">
Animate GeometryDrawing Example
</RadioButton>
</StackPanel>
</Window>728x90
반응형
그리드형(광고전용)
'C# > WPF' 카테고리의 다른 글
| [C#/WPF] ImageBrush 엘리먼트 : Stretch 속성 사용하기 (0) | 2023.03.21 |
|---|---|
| [C#/WPF] ImageBrush 엘리먼트 사용하기 (0) | 2023.03.21 |
| [C#/WPF] ImageBrush 엘리먼트 : AlignmentX/AlignmentY 속성을 사용해 이미지 정렬하기 (0) | 2023.03.21 |
| [C#/WPF] GradientStop 클래스 : Color/Offset 속성 애니메이션 설정하기 (0) | 2023.03.20 |
| [C#/WPF] SolidColorBrush 클래스 : Color/Opacity 속성 애니메이션 설정하기 (0) | 2023.03.18 |
| [C#/WPF] DrawingBrush 엘리먼트 : 드로잉 브러시 애니메이션 만들기 (0) | 2023.03.18 |
| [C#/WPF] ImageDrawing 엘리먼트 사용하기 (0) | 2023.03.18 |
| [C#/WPF] DrawingBrush 엘리먼트 : Transform/RelativeTransform 속성 사용하기 (0) | 2023.03.18 |
| [C#/WPF] DrawingBrush 엘리먼트 사용하기 (0) | 2023.03.17 |
| [C#/WPF] VisualBrush 엘리먼트 : 반사 효과 만들기 (0) | 2023.03.17 |
댓글을 달아 주세요