Resource에서 Style을 범용적으로 사용

Element 의 Style을 지정하는 방법을 알아 봤지만, 모든 Element에 Style을 지정 해 Element의 형태를 지정하는 것은 비효율적이며 손이 많이 가는게 사실입니다. 또한, 유지보수 차원에서도 여간 쉬운 일이 아닙니다. (일례로, Page내 TextBox 스타일이 일률적으로 변경 된다거 등의 작업을 처리하기 위해서는 Page내 TextBox의 Style을 수정해야 하기 때문이죠)

예를 들어, 다음과 같은 사용자 로그인 페이지를 구현한다고 하면,

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
<Grid.RowDefinitions>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
    <RowDefinition Height="50"/>
    <RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="150"/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>

<TextBlock Text="Login ID : " Grid.Column="0" Grid.Row="0"
           FontFamily="Comic Sans MS"
           FontSize="15"
           Foreground="Blue"
           HorizontalAlignment="Right"/>
<TextBox x:Name="TextBoxLogin" Grid.Column="1" Grid.Row="0"
         HorizontalAlignment="Left"
         VerticalAlignment="Top"
         FontFamily="Verdana"
         FontSize="12"
         Foreground="Black"
         Width="200" Height="30"/>

<TextBlock Text="E-Mail Address: " Grid.Column="0" Grid.Row="1"
           FontFamily="Comic Sans MS"
           FontSize="15"
           Foreground="Blue"
           HorizontalAlignment="Right"/>
<TextBox x:Name="TextBoxEMail" Grid.Column="1" Grid.Row="1"
         HorizontalAlignment="Left"
         VerticalAlignment="Top"
         FontFamily="Verdana"
         FontSize="12"
         Foreground="Black"
         Width="200" Height="30"/>

<TextBlock Text="Phone Number : " Grid.Column="0" Grid.Row="2"
           FontFamily="Comic Sans MS"
           FontSize="15"
           Foreground="Blue"
           HorizontalAlignment="Right"/>
<TextBox x:Name="TextBoxPhoneNum" Grid.Column="1" Grid.Row="2"
         HorizontalAlignment="Left"
         VerticalAlignment="Top"
         FontFamily="Verdana"
         FontSize="12"
         Foreground="Black"
         Width="200" Height="30"/>

<TextBlock Text="Memo : " Grid.Column="0" Grid.Row="3"
           FontFamily="Comic Sans MS"
           FontSize="15"
           Foreground="Blue"
           HorizontalAlignment="Right"/>
<TextBox x:Name="TextBoxMemo" Grid.Column="1" Grid.Row="3"
         HorizontalAlignment="Left"
         VerticalAlignment="Top"
         FontFamily="Verdana"
         FontSize="12"
         Foreground="Black"
         TextWrapping="Wrap" Width="200" Height="150"/>
</Grid>

위 코드에서 처럼, Login ID, E-Mail Address, Phone Number, Memo TextBlock이 Style이 모두 같기 때문에 4개의 TextBlock 모두 같은 코드를 반복해서 타이핑 할 수 밖에 없습니다. 마찬가지로, TextBox 입력 부분도, HorizontalAlignment, VerticalAlignment, FontSize, FontFamily등이 중복되서 타이핑 되 있죠.

만약 이 상황에서, 모든 TextBlock의 FontFamily를 바꿔야 한다거나, FontSize를 바꿔야 한다고 하면, 일일이 모든 TextBlock의 FontFamily와 FontSize property를 찾아서 Value 값을 변경 해 줘야 합니다. (혹은 Ctrl+C, Ctrl+V)
정말 비효율적이고 생산성이 떨어지겠죠.

그래서, Silverlight 에서는 Style을 Resource에 선언한 뒤에 선언 된 Style 을 필요로 하는 Element에서 공유 할 수 있도록 지원합니다. Resource에 선언 한 뒤 Style을 Element에서 사용하기 위해서는

Style="{StaticResource 스타일객체키}"

위와 같이 Resource에서 지정 된 Style의 Key(String)를 지정하면 됩니다.

처음 로그인 페이지를 Resource에서 추가 된 Style을 사용하여 구현한다면,

<Grid.Resources>
    <Style x:Key="TextBlockTitle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="Foreground" Value="Blue"/>
        <Setter Property="HorizontalAlignment" Value="Right"/>
    </Style>
    <Style x:Key="TextBoxContent" TargetType="TextBox">
        <Setter Property="FontFamily" Value="Verdana"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Width" Value="200"/>
        <Setter Property="Height" Value="30"/>
    </Style>
</Grid.Resources>
<Grid.RowDefinitions> ...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions> ...
</Grid.ColumnDefinitions>

<TextBlock Text="Login ID : " Grid.Column="0" Grid.Row="0"
           Style="{StaticResource TextBlockTitle}"/>
<TextBox x:Name="TextBoxLogin" Grid.Column="1" Grid.Row="0"
         Style="{StaticResource TextBoxContent}"/>

<TextBlock Text="E-Mail Address: " Grid.Column="0" Grid.Row="1"
           Style="{StaticResource TextBlockTitle}"/>
<TextBox x:Name="TextBoxEMail" Grid.Column="1" Grid.Row="1"
         Style="{StaticResource TextBoxContent}"/>

<TextBlock Text="Phone Number : " Grid.Column="0" Grid.Row="2"
           Style="{StaticResource TextBlockTitle}"/>
<TextBox x:Name="TextBoxPhoneNum" Grid.Column="1" Grid.Row="2"
         Style="{StaticResource TextBoxContent}"/>

<TextBlock Text="Memo : " Grid.Column="0" Grid.Row="3"
           Style="{StaticResource TextBlockTitle}"/>
<TextBox x:Name="TextBoxMemo" Grid.Column="1" Grid.Row="3"
         Style="{StaticResource TextBoxContent}"/>

중복 되는 Style을 Resouce에서 지정 하고, Style을 공유 할 Element에서 Style Resouce를 Binding 해서 쓰면 됩니다. 그런데, 위 코드를 실행하게 되면

Memo 의 입력 부분이, 다른 입력 부분과 동일한 Style이 적용 되 있는 것을 확인 할 수 있습니다.

이 땐, Memo의 입력 부분인 TextBox에서 Height라던가, TextWrapping 속성을 추가로 지정 해 주면 됩니다.

<TextBox x:Name="TextBoxMemo" Grid.Column="1" Grid.Row="3"
         TextWrapping="Wrap"
         Height="150"
         Style="{StaticResource TextBoxContent}"/>

UIElement의 Style을 지정하고, 디자인(XAML)에서 속성 값을 할당 하면, 중복되는 경우, 항상 디자인(XAML)에서 할당 된 속성값을 갖게 됩니다.