본문 바로가기

silverlight

Style 정의하기

UIElement 의 Style 정의
UIElement의 모양을 변경하기 위해 Style Class를 정의하여 UIElement의 Style속성에 설정합니다.
(FrameworkElement 를 상속 받은 모든 Element는 Style 속성을 가지고 있기 때문)

Style Class는 SetterBaseCollection 형의 Setter property를 가지고 있습니다.
SetterBaseCollection내 각각의 Setter class 는 Style의 속성에 값을 부여하는 Class로, 적용 될 Property를 지정하는 Property property와 지정된 property의 값을 설정하는 Value property가 있습니다.
Style Class 는 Property와 Value가 지정 된 Setter class를 배열로 가지고 있고, Style Class 의 TargetType property로 Style을 적용할 Element의 형식을 설정하여 각 Setter가 지정하고 있는 Element의 Property 에 Value 값을 설정 합니다.
- Rectangle 객체의 Style을 지정-

<Rectangle x:Name="myRectangle">
    <Rectangle.Style>
        <Style TargetType="Rectangle" x:Name="myStyle">
            <Setter Property="Width" Value="50"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Fill">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Blue" Offset="1"/>
                        <GradientStop Color="Red" Offset="0"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Rectangle.Style>
</Rectangle>


Style객체를 생성해서 Rectangle 의 Style Property에 설정합니다.
(Rectangle 은 FrameworkElement를 상속 받아 Style property를 가지고 있어, Style 객체를 생성해서 설정할 수 있습니다.)
생성 된 Style 객체는 TargetType 으로 Rectangle 이 지정 되 있고 Style 객체 내 Setter에서는 Width 속성의 값을 50으로, Height 값을 50으로, Fill 값을 Setter.Value를 지정하여 여러 가지 속성을 가진 LinearGradientBrush를 값으로 사용하였습니다.



위 코드에서 처럼 Style 객체 내 Setter class 는 Value 값을 Int32나 String처럼 기본 자료형인 Property에 지정 할 수도 있지만, Rectangle 내 Fill property 에 여러 속성을 가지는 LinearGradientBrush를 값으로 지정 할 수도 있습니다.

'silverlight' 카테고리의 다른 글

Behavior 만들기  (0) 2009.06.18
Element to Element Binding  (0) 2009.06.17
Data Binding  (0) 2009.06.17
ControlTemplate 정의하기  (0) 2009.06.16
Resource에서 Style을 범용적으로 사용  (0) 2009.06.16
Style 정의하기  (0) 2009.06.16
VisualStateManager  (0) 2009.06.15
Storyboard (Animation in Silverlight)  (0) 2009.06.15
Layout Panel #5 (WrapPanel)  (0) 2009.06.12
Layout Panel #4 (DockPanel)  (0) 2009.06.12
Layout Panel #3 (StackPanel)  (0) 2009.06.12