반응형
C# WPF 3D Button 효과
UI에 조금 변화를 주고 싶어서 버튼에 그라데이션을 넣어 3D효과를 주었습니다.
일단 리소스에 스타일을 지정하여 통일되게 사용하게 되어 있으며
그라데이션 시작값과 끝값은 각 버튼마다 넣어주시면 됩니다.
버튼 진입시와 나올때는 스토리보드를 이용하여 불투명 효과를 주었습니다.
버튼내에 상부 1/3부분의 그라데이션을 조금더 수정하면 3D 효과를 더욱 극대화 할 수 있습니다.
이런식으로 변화되는데 저는 버튼이 너무 튀는 느낌이 싫어서 약간 연하게 쓰고 있습니다.
버튼들에 좌측으로 이미지나 해당 버튼을 나타내 주는 아이콘등을 넣어주면 더욱 좋습니다.
좌측에 아이콘 넣었을때 이미지
WPF xaml 부분
<Window x:Class="WpfApp4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp4"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="400"
>
<Window.Resources>
<Style x:Key="StandardButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border" BorderThickness="0" BorderBrush="Black">
<Grid Width="auto" Height="auto" >
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.RowSpan="2" CornerRadius="4 4 4 4" Background="{TemplateBinding Background}">
<Border CornerRadius="4 4 4 4" >
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:ColorExtensions.ColorFront)}" Offset="0" />
<GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(local:ColorExtensions.ColorBack) }" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Rectangle Grid.Row="0" Margin="1,1" RadiusX="3" RadiusY="3">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#80999999" Offset="0" />
<GradientStop Color="#00999999" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Grid.RowSpan="2" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Transparent" />
<Setter TargetName="border" Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="2" BlurRadius="6" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Opacity)" From="1.0" To="0.95" Duration="0:0:0.1" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Opacity)" To="1" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Border CornerRadius="1 1 1 1 " Margin="5" Background="{Binding Source={StaticResource GroupBox_Header}}" >
<Border.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="8"/>
</Border.Effect>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="285*"/>
<ColumnDefinition Width="97*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1.2*"/>
<RowDefinition Height="9*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.ColumnSpan="2" >
<StackPanel.Effect>
<DropShadowEffect Color="Black" Direction="270"/>
</StackPanel.Effect>
<TextBlock HorizontalAlignment="Center" TextAlignment="Center" VerticalAlignment="Center" Margin="15 0 0 0" Text="{StaticResource Operation_Operation}" FontSize="20" Foreground="{Binding Source={StaticResource GroupBox_Font}}" />
</StackPanel>
<Grid Grid.Row="1" Grid.ColumnSpan="2" >
<Border Margin="0" CornerRadius="0,0,5,5" Padding="0" Background="{Binding Source={StaticResource GroupBox_Background}}" >
<Border.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="0"/>
</Border.Effect>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.05*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.05*"/>
</Grid.RowDefinitions>
<Button x:Name="btStart" Grid.Row="1" Margin="5 3" Height="auto" Style="{DynamicResource StandardButton}" local:ColorExtensions.ColorFront="DarkGreen" local:ColorExtensions.ColorBack="DarkGreen" >
<Button.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="4"/>
</Button.Effect>
<StackPanel Grid.RowSpan="2" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Margin="0,0,0,0" Text="{StaticResource Operation_Start}" Foreground="White" FontSize="25"/>
</StackPanel>
</Button>
<Button x:Name="btStop" Grid.Row="2" Grid.ColumnSpan="2" Margin="5 3" Height="auto" local:ColorExtensions.ColorFront="DarkRed" local:ColorExtensions.ColorBack="DarkRed" BorderThickness="0" Style="{DynamicResource StandardButton}" >
<Button.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="4"/>
</Button.Effect>
<StackPanel Orientation="Horizontal" >
<TextBlock Margin="0,0,0,0" Text="{StaticResource Operation_Stop}" Foreground="White" FontSize="25"/>
</StackPanel>
</Button>
<Button x:Name="btReset" Grid.Row="3" Margin="5 3" Height="auto" Style="{DynamicResource StandardButton}" local:ColorExtensions.ColorFront="DarkGoldenrod" local:ColorExtensions.ColorBack="DarkGoldenrod" >
<Button.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="4"/>
</Button.Effect>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,0,0" Text="{StaticResource Operation_Reset}" Foreground="White" FontSize="25"/>
</StackPanel>
</Button>
<Button x:Name="btHome" Grid.Row="4" Margin="5 3" Height="auto" Style="{DynamicResource StandardButton}" local:ColorExtensions.ColorFront="DarkCyan" local:ColorExtensions.ColorBack="DarkCyan" >
<!--Style="{StaticResource MaterialDesignRaisedButton}" materialDesign:ButtonProgressAssist.IsIndeterminate="{Binding HomeProgress}" materialDesign:ButtonProgressAssist.IsIndicatorVisible="True" materialDesign:ButtonProgressAssist.Value="-1" -->
<Button.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="4"/>
</Button.Effect>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="tbHome" Margin="0,0,0,0" Text="{StaticResource Operation_Home}" Foreground="White" FontSize="25" />
</StackPanel>
</Button>
<!--
<Button x:Name="btHome" Grid.Row="4" Grid.ColumnSpan="2" Margin="2" Height="Auto" VerticalAlignment="Stretch" Background="LightSeaGreen" Click="BtHome_Click" BorderThickness="0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Home" Height="32" Width="32" VerticalAlignment="Center" Margin="0 0 10 0" />
<TextBlock x:Name="tbHome" Margin="0,0,0,0" VerticalAlignment="Center" Text="{StaticResource Operation_Home}" Foreground="White" FontSize="20"/>
</StackPanel>
</Button>
-->
<Button x:Name="btLogIn" Grid.Row="5" Margin="5 3" Height="auto" BorderThickness="0" Style="{DynamicResource StandardButton}" local:ColorExtensions.ColorFront="DarkKhaki" local:ColorExtensions.ColorBack="DarkKhaki" >
<Button.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="4"/>
</Button.Effect>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="tbLogIn" Margin="0,0,0,0" Text="LOG IN" Foreground="White" FontSize="25"/>
</StackPanel>
</Button>
</Grid>
</Border>
</Grid>
</Grid>
</Border>
</Window>
App.xaml Resources 부분
이부분은 기존에 언어 변환용으로 쓰고 있던 부분이 있어서 함께 넣게 됫습니다.
<Application x:Class="WpfApp4.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp4"
StartupUri="MainWindow.xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib">
<Application.Resources>
<SolidColorBrush x:Key="UI_Background" Color="#404040"/>
<SolidColorBrush x:Key="GroupBox_Background" Color="#424242"/>
<SolidColorBrush x:Key="GroupBox_Header" Color="#303030"/>
<SolidColorBrush x:Key="GroupBox_Font" Color="#CCE8E8"/>
<!--Operation-->
<system:String x:Key="Operation_Main" >Main</system:String>
<system:String x:Key="Operation_Data" >Data</system:String>
<system:String x:Key="Operation_Information">Information</system:String>
<system:String x:Key="Operation_Manual" >Manual</system:String>
<system:String x:Key="Operation_Operation" >OPERATION</system:String>
<system:String x:Key="Operation_Start" >START</system:String>
<system:String x:Key="Operation_Stop" >STOP</system:String>
<system:String x:Key="Operation_Reset" >RESET</system:String>
<system:String x:Key="Operation_Home" >HOME</system:String>
</Application.Resources>
</Application>코드부분
컬러 확장하여 그라데이션 색을 넣기 위한 부분
ColorExtensions.ColorFront, ColorExtensions.ColorBack
public class ColorExtensions
{
public static readonly DependencyProperty ColorFrontProperty = DependencyProperty.RegisterAttached(
"ColorFront",
typeof(Color),
typeof(ColorExtensions),
new UIPropertyMetadata(Colors.White));
public static Color GetColorFront(DependencyObject target)
{
return (Color)target.GetValue(ColorFrontProperty);
}
public static void SetColorFront(DependencyObject target, Color value)
{
target.SetValue(ColorFrontProperty, value);
}
public static readonly DependencyProperty ColorBackProperty = DependencyProperty.RegisterAttached(
"ColorBack",
typeof(Color),
typeof(ColorExtensions),
new UIPropertyMetadata(Colors.Black));
public static Color GetColorBack(DependencyObject target)
{
return (Color)target.GetValue(ColorBackProperty);
}
public static void SetColorBack(DependencyObject target, Color value)
{
target.SetValue(ColorBackProperty, value);
}
}
사용된 소스파일
반응형
'C# > WPF' 카테고리의 다른 글
| 런타임중에 XAML 로드하기 (Loading XAML at runtime) (0) | 2021.12.15 |
|---|---|
| C# WPF Ripple Effect (원형으로 퍼져 나가는 효과) (0) | 2021.11.25 |