XAML or HTML

008. 스타일 파생(Derive Style)

XAML 뽀개기

1
2
3
4
5
6
7
8
9
10
11
<Style x:Key="Style_ControlBase">
    <Setter Property="Control.Width" Value="60"/>
    <Setter Property="Control.Height" Value="30"/>
</Style>
            
<SolidColorBrush x:Key="Color_Background_ReadOnlyTextBox" Color="LightGray"/>
<Style x:Key="Style_ReadOnlyTextBox" TargetType="TextBox" 
       BasedOn="{StaticResource Style_ControlBase}">
    <Setter Property="TextBox.IsReadOnly" Value="True"/>
    <Setter Property="TextBox.Background" Value="{StaticResource Color_Background_ReadOnlyTextBox}"/>
</Style>
cs


Style의 BasedOn 속성을 이용해 이전 Style_ControlBase 스타일을 상속 받아 새로운 스타일을 정의합니다. TargetType을 TextBox로 제한하고 Setter 정의시 Class명과 함께 정의한다면 더욱 견고히 스타일을 정의할 수 있습니다.


1
2
3
4
5
<TextBox Grid.Column="0" Style="{StaticResource Style_ControlBase}"
         Text="TextBox"/>
 
<TextBox Grid.Column="1" Style="{StaticResource Style_ReadOnlyTextBox}"
         Text="ReadOnlyTextBox" Width="100"/>
cs


 

Style_ControlBase 스타일은 Control Class에만 국한되고 Style_ReadOnlyTextBox 스타일은 TextBox Class에만 국한되어 깔끔히 분리되어 재사용될 수 있습니다.

 

1
2
3
4
5
6
<Style x:Key="Style_ReadOnlyTextBox" TargetType="TextBox" 
       BasedOn="{StaticResource Style_ControlBase}">
    <Setter Property="IsReadOnly" Value="True"/>
    <Setter Property="Background" Value="{StaticResource Color_Background_ReadOnlyTextBox}"/>
    <Setter Property="Width" Value="100"/>
</Style>
cs

 

TargetType을 TextBox로 제한한 상태에서는 TextBox Class명을 생략해도 됩니다. 상속 받은 Setter의 속성도 다시 정의할 수 있습니다.

 

1
2
3
4
5
6
<Style TargetType="TextBox" 
       BasedOn="{StaticResource Style_ControlBase}">
    <Setter Property="IsReadOnly" Value="True"/>
    <Setter Property="Background" Value="{StaticResource Color_Background_ReadOnlyTextBox}"/>
    <Setter Property="Width" Value="100"/>
</Style>
cs

 

스타일의 Key 이름을 정의하지 않으면 TargetType에 정의된 모든 Class에 일괄로 스타일을 적용할 수 있습니다.

 

1
2
<TextBox Grid.Column="2" 
         Text="ReadOnlyTextBox"/>
cs

 

 

1
2
3
4
5
6
7
8
Style Style_ReadOnlyTextBox = new Style();
Style_ReadOnlyTextBox.TargetType = typeof(TextBox);
Style_ReadOnlyTextBox.BasedOn = (Style)this.grdTest.FindResource("Style_ControlBase");
Setter setterIsReadOnly = new Setter(TextBox.IsReadOnlyProperty, true);
Setter setterBackgroundS = new Setter(TextBox.BackgroundProperty, Brushes.LightGray);
Style_ReadOnlyTextBox.Setters.Add(setterIsReadOnly);
Style_ReadOnlyTextBox.Setters.Add(setterBackgroundS);
this.txbTest.Style = Style_ReadOnlyTextBox;
cs

 

2번의 스타일 관련 포스트에서 살펴본 XAML 코드는 비하인드 코드에서 동일하게 작성할 수 있습니다.

 

1
this.txbTest.Style = (Style)this.grdTest.FindResource("Style_ReadOnlyTextBox");
cs

 

XAML 코드에서 이미 정의된 스타일을 적용할 수도 있습니다. 하지만 특수한 경우를 제외하고 여러모로 비효율적이고 선호하지도 권장하지도 않습니다.




샘플 코드 : https://github.com/CharlesKwon/XamlSimplified

저작자표시비영리변경금지

'XAML 뽀개기' 카테고리의 다른 글

010. 데이타트리거(DataTrigger)  (0) 2018.01.18
009. 4가지 트리거(Triggers)  (0) 2018.01.16
008. 스타일 파생(Derive Style)  (0) 2018.01.16
007. 스타일 정의(Override Style)  (0) 2018.01.16
006. 클래스와 데이타템플릿(Class & DataTemplate)  (0) 2018.01.16
005. System 네임스페이스(System namespace)  (0) 2018.01.16
, , , , , , , ,
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

비밀글