Microsoft .NET/WPF Tip
[WPF Tip] Control의 Style을 별도로 관리하고 손쉽게 불러오기
전자기린
2019. 5. 29. 14:17
WPF에서 사용하는 Control는 Button, ListView, Grid 등... 다양합니다.
이러한 다양한 Control들을 Xaml에 입력하여 하나의 화면을 구성하게 되면 상당한 길이가 됩니다.
이에 스타일 지정을 별도로 하나하나 지정한다면 Xaml 코드는 원하는 내용을 찾아바꾸기도 힘들 정도가 될 것입니다.
이를 해결하기 위한 방법은 'ResourceDictionary'를 별도의 파일로 관리하고 사용하고자 하는 Xaml에서 불러와서 사용하는 방법입니다.
우선 아래와 같은 'ResourceDictionary'를 생성합시다.
File은 C# -> 리소스 사전으로 생성하면됩니다.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--color-->
<Color x:Key="black0Color">#252526</Color>
<Color x:Key="gray0Color">#3F3F46</Color>
<Color x:Key="green0Color">#00C28C</Color>
<Color x:Key="text0Color">#C5C5C5</Color>
<Color x:Key="ControlHintTextColor">#999999</Color>
<!--brush-->
<SolidColorBrush
x:Key="black0Brush"
Color="{StaticResource black0Color}"/>
<SolidColorBrush
x:Key="gray0Brush"
Color="{StaticResource gray0Color}"/>
<SolidColorBrush
x:Key="green0Brush"
Color="{StaticResource green0Color}"/>
<SolidColorBrush
x:Key="text0Brush"
Color="{StaticResource text0Color}"/>
<SolidColorBrush
x:Key="ControlHintTextBrush"
Color="{StaticResource ControlHintTextColor}"/>
<!--모서리가 둥근 버튼-->
<Style x:Key="RadiusButton" TargetType="Button">
<!--커서 모양-->
<Setter Property="Cursor"
Value="Hand"/>
<!--Content 가로 정렬-->
<Setter Property="HorizontalContentAlignment"
Value="Left"/>
<!--Content 세로 정렬-->
<Setter Property="VerticalContentAlignment"
Value="Center"/>
<!--Content Font 색상-->
<Setter Property="Foreground"
Value="{StaticResource text0Brush}"/>
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<!--버튼 테두리 변경-->
<Border
TextBlock.Foreground="{TemplateBinding Foreground}"
x:Name="Border"
BorderThickness="1"
CornerRadius="10"
Padding="17,0">
<Border.BorderBrush>
<LinearGradientBrush
StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop
Color="{StaticResource gray0Color}"
Offset="0.0" />
<GradientStop
Color="{StaticResource gray0Color}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop
Color="{StaticResource black0Color}"
Offset="0" />
<GradientStop
Color="{DynamicResource black0Color}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
<VisualTransition
GeneratedDuration="0"
To="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<!--마우스가 버튼 위로 올라갔을 경우 효과-->
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame
KeyTime="1"
Value="{StaticResource text0Color}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!--버튼 누를때 효과-->
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame
KeyTime="0"
Value="{StaticResource ControlHintTextColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame
KeyTime="0"
Value="{StaticResource ControlHintTextColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlHintTextColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlHintTextColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlHintTextColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame
KeyTime="0"
Value="{StaticResource ControlHintTextColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger
Property="IsDefault"
Value="true">
<Setter
TargetName="Border"
Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush
StartPoint="0,0"
EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop
Color="{DynamicResource DefaultBorderBrushLightBrush}"
Offset="0.0" />
<GradientStop
Color="{DynamicResource DefaultBorderBrushDarkColor}"
Offset="1.0" />
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>Button의 자세한 Style 설정방법은 MS Button Style Template 참고.
https://docs.microsoft.com/ko-kr/dotnet/framework/wpf/controls/button-styles-and-templates
Button 스타일 및 템플릿
Button 스타일 및 템플릿Button Styles and Templates 이 문서의 내용 --> 이 항목에서는 스타일 및 템플릿에 대해 설명 합니다 Button 제어 합니다.This topic describes the styles and templates for the Button control. 기본값을 수정할 수 있습니다 ControlTemplate 고유한 모양을 제어할 수 있습니다.You can modify the default ControlT
docs.microsoft.com
앞에서 생성한 ResourceDictionary를 내가 사용하고자하는 Xaml로 불러옵니다.
(Window Control의 경우 "<Window.Resources>" UserControl의 경우 <UserControl.Resources>로 입력하면 됩니다.)
<Window.Resources>
<ResourceDictionary Source="MyResourcesDictionary.xaml"/>
</Window.Resources>
불러온 "MyResourcesDictionary.xaml"의 RadiusButton Style을 내가 생성한 Button의 Style로 설정합니다.
<Window x:Class="WPF_ResourceDicSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="RadiusButton" Height="150" Width="250">
<Window.Resources>
<ResourceDictionary Source="MyResourcesDictionary.xaml"/>
</Window.Resources>
<Grid>
<Button
x:Name="btnTest"
Width="150" Height="30"
Content="RadiusButton"
Style="{StaticResource RadiusButton}"/>
</Grid>
</Window>
