Part4. Using Style Elements to Better Encapsulate Look and Feel

u  Understand Style

1.     Setter를 통해 속성의 값을 설정할 수 있으며, 이렇게 설정된 속성값들은 하나의 스타일로 묶이게 되며, 여러 컨트롤에 적용이 가능합니다. HTML페이지에 정의한 스타일시트(.CSS) 개념과 유사하다고 보시면 됩니다.

-       스타일 선언은 리소스에 해야 하며, 리소스는 Silverlight의 특정 레이아웃 컨트롤 또는 페이지 단위로 그 적용 범위를 제어 할 수 있습니다.

-       선언된 스타일 리소스가 여러 개의 페이지에 공통으로 적용될 경우는 Application의 리소스를 사용하시면 됩니다.

u  Sample Code

1.     스타일 정의 하지 않고 일반적인 UI (컨트롤에 스타일 정의)

Code

<UserControl x:Class="DemoSample1.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <StackPanel x:Name="LayoutRoot" Background="White"> <Button x:Name="Button1" Width="100" Height="50" Margin="10" Content="버튼1" Background=" Red "></Button>         <Button x:Name="Button2" Width="100" Height="50" Margin="10" Content="버튼2" Background=" Red "></Button>     </StackPanel> </UserControl>

2.     스타일 정의 후, 적용한 UI (레이아웃의 리소스에 스타일 정의)

Code

<UserControl x:Class="DemoSample1.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <StackPanel x:Name="LayoutRoot" Background="White">         <StackPanel.Resources>             <Style TargetType="Button" x:Key="buttonStyle">                 <Setter Property="Width" Value="100"></Setter>                 <Setter Property="Height" Value="50"></Setter>                 <Setter Property="Margin" Value="10"></Setter>                 <Setter Property="Background" Value="Red"></Setter>             </Style>         </StackPanel.Resources>                 <Button x:Name="Button1" Style="{StaticResource buttonStyle}" Content="버튼1"></Button>         <Button x:Name="Button2" Style="{StaticResource buttonStyle}" Content="버튼2"></Button>     </StackPanel> </UserControl>

ð  1번과 2번의 결과 화면은 동일하며, 아래 이미지와 같습니다.

Result

3.     Setter.Value 속성 엘리먼트 사용

-       1번과 2번의 경우는, 컨트롤의 너비나 색과 같이 어트리뷰트 형태로 속성값을 지정하였지만, 그라디언트와 같이 복잡한 형태의 속성값을 지정하기 위해서는 Setter의 Value 속성 엘리먼트를 통해 지정할 수 있습니다.

Code

<UserControl x:Class="DemoSample1.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <StackPanel x:Name="LayoutRoot" Background="White">         <StackPanel.Resources>             <Style TargetType="Button" x:Key="buttonStyle">                 <Setter Property="Width" Value="100"></Setter>                 <Setter Property="Height" Value="50"></Setter>                 <Setter Property="Margin" Value="10"></Setter>                 <Setter Property="Background">                     <Setter.Value>                         <LinearGradientBrush EndPoint="0.5, 1" StartPoint="0.5, 0">                             <GradientStop Color="White" Offset="0"></GradientStop>                             <GradientStop Color="Black" Offset="1"></GradientStop>                         </LinearGradientBrush>                     </Setter.Value>                 </Setter>             </Style>         </StackPanel.Resources>                 <Button x:Name="Button1" Style="{StaticResource buttonStyle}" Content="버튼1"></Button>         <Button x:Name="Button2" Style="{StaticResource buttonStyle}" Content="버튼2"></Button>     </StackPanel> </UserControl>

Result
               

4.     코드 비하인드에서 스타일 정의

Code

public partial class Page : UserControl {     public Page()     {         InitializeComponent();           Style style = new Style(typeof(Button));         style.Setters.Add(new Setter(ForegroundProperty, new SolidColorBrush(Colors.Red)));         style.Setters.Add(new Setter(WidthProperty, 100));         style.Setters.Add(new Setter(HeightProperty, 50));         style.Setters.Add(new Setter(MarginProperty, 10));           this.Button1.Style = style;     } }