WPF 스타일(Style) 이란?

WPF 스타일(Style) 이란?

​

n XAML의 Resource절은 객체를 참조할 때도 사용되지만 Style 객체를 정의하는데도 이용된다. Style은 Element에 적용되는 스타일 프로퍼티의 집합이다.

n XAML 안에서 프로그래밍 언어처럼 반복문을 사용할 수 없으므로 동일한 프로퍼티를 가지는 여러 요소들을 생성할 때 사용하면 좋다.

n 페이지에 버튼이 많다고 가정할 때 Margin, Font 등의 속성은 비슷하게 이용되므로 Resource절 내에 Style로 정의하면 공용으로 사용할 수 있다.

n 웹페이지에 적용되는 Style과 비교했을 때 WPF의 Style은 다른 프로퍼티의 변화 또는 이벤트로부터 유발되는 프로퍼티의 변화를 제어할 수 있기에 더욱 강력하다.

n Object를 상속받은 Style은 System.Window에 정의되어 있는데 중요한 프로퍼티는 Setter로 SetterBase 객체(Setter와 EventSetter가 상속받음)의 컬렉션인 SetterBaseCollection 타입의 프로퍼티로 이를 통해 프로퍼티나 이벤트 핸들러를 설정할 수 있다.

n Setter는 Style의 컨텐트 프로퍼티(ContentProperty)로 Setter와 EventSetter는 Style 요소의 자식이며 일반적으로 Setter가 더 많이 사용된다.

n Setter는 특정 프로퍼티와 값을 연결시키며 프로퍼티 타입(DependencyProperty 타입)과 Value 타입(object 타입) 2개의 프로퍼티가 있다.

<Style…> <Setter Property=”Control.FontSize” Value=”12”/> <EventSetter …/> <Setter Property=”Control.FontSize” Value=”{x:Null}”/> </Style>

n Property의 값은 항상 의존프로퍼티(DependencyProperty)를 참조하며 보통 속성앞에 정의했거나 상속한 클래스의 이름을 명시한다. 만약 null 값을 Value 속성에 대입하려면 x:Null을 사용한다.

n 아래 예문처럼 로컬요소를 위한 Style 요소를 정의하는 것도 가능하다. FrameworkElement는 Style 이라는 속성을 가지고 있는데 버튼이 이를 상속 받았으므로 Style 요소를 내부에 정의할 수 있다. 버튼의 전경색을 Button 요소, Setter를 이용하여 두번 정의했는데 Button 요소에서 정의한 것이 우선적으로 적용된다.

<Window x:Class="WpfApp6.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" xmlns:local="clr-namespace:WpfApp6" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <Button HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Blue"> <Button.Style> <Style> <Setter Property="Button.FontSize" Value="16pt" /> <Setter Property="Button.FontWeight" Value="Bold" /> <Setter Property="Button.FontFamily" Value="Constantia" /> <Setter Property="Control.Foreground" Value="Red" /> </Style> </Button.Style> Button Test </Button> </Grid> </Window>

n 대부분 여러 개의 요소와 컨트롤들이 공유 가능하도록 Style을 Resource절에 사용하고 있으며 Application 객체의 Resource절에서 사용한 Style은 전체 응용프로그램에서 공용으로 사용 가능하다.

n 아래 예문은 Button과 TextBlock에서 Style을 공유했다.

​

<Window x:Class="WpfApp6.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" xmlns:local="clr-namespace:WpfApp6" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <StackPanel> <StackPanel.Resources> <Style x:Key="normal"> <Setter Property="Control.FontSize" Value="22" /> <Setter Property="Control.Foreground" Value="Red" /> <Setter Property="Control.HorizontalAlignment" Value="Center" /> <Setter Property="Control.Margin" Value="30" /> <Setter Property="Control.Padding" Value="20, 10, 20, 10" /> </Style> </StackPanel.Resources> <Button Style="{StaticResource normal}"> 버튼 테스트1 </Button> <TextBlock Style="{StaticResource normal}"> 텍스트 블록 테스트 </TextBlock> <Button Style="{StaticResource normal}"> 버튼 테스트2 </Button> </StackPanel> </Window>

n 다른 리소스와 같이 여러 Resource절에서 동일한 key로 Style을 정의할 수 있는데 요소에 적용되는 Style은 비주얼 트리를 타고 올라가다 최초로 만나는 Style이 적용된다.

n 3개의 버튼을 가진 StackPanel을 담고 있는 Grid가 있다. Grid에는 FontSize가 12이고 Foreground가 “Red”인 Style을 “mystyle”이라는 이름으로 정의하고 StackPanel의 Resource 절에도 “mystyle” 이라는 이름으로 Foreground가 “Bule”인 Style을 정의했다. 버튼은 StackPanel에 정의한 Style을 사용하므로 Foreground는 Blue가 되고 FontSize는 상위 Style에 정의된 크기가 아닌 기본크기로 설정된다.

​

<Window x:Class="WpfApp6.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" xmlns:local="clr-namespace:WpfApp6" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.Resources> <Style TargetType="{x:Type Button}" x:Key="mystyle"> <Setter Property="Control.FontSize" Value="12" /> <Setter Property="Control.Foreground" Value="Red" /> </Style> </Grid.Resources> <StackPanel> <StackPanel.Resources> <Style TargetType="{x:Type Button}" x:Key="mystyle"> <Setter Property="Control.Foreground" Value="Blue" /> </Style> </StackPanel.Resources> <Button Style="{StaticResource mystyle}"> Button 1 </Button> <Button Style="{StaticResource mystyle}"> Button 2 </Button> <Button Style="{StaticResource mystyle}"> Button 3 </Button> </StackPanel> </Grid> </Window>

#WPF스타일, #WPFSTYLE, #데이터바인딩, #WPF데이터바인딩, #DataBinding, #WPF, #WPF강좌, #WPF교육, #WPF강의, #시샵, #닷넷, #Csharp, #XAML,