-
[WPF Tip] Control의 Style을 별도로 관리하고 손쉽게 불러오기Microsoft .NET/WPF Tip 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>
결과물 - Mouse Over 스타일이 변경되는 버튼 'Microsoft .NET > WPF Tip' 카테고리의 다른 글
[WPF Tip] 쿼리 표현식을 이용한 검색(A query expression) (0) 2019.07.15 [WPF Tip] Canvas를 PNG로 저장하기 (0) 2019.04.30 [WPF Tip] ObservableCollection (0) 2019.03.07 [WPF Tip] xaml에서 상수 등록하기 (0) 2019.03.07