스타일

들어가기 앞서, CSS 의 스타일 정의랑 매우 비슷하다고 생각하면 된다.

 

    <Window.Resources>
        <Style x:Key="DefaultStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="Red" />
        </Style>
        <Style x:Key="OtherStyle" TargetType="{x:Type TextBlock}" BasedOn="{StaticResource DefaultStyle}">
            <Setter Property="Background" Value="Gray" />
        </Style>
    </Window.Resources>
    <StackPanel>
        <TextBlock Text="Default Style" Style="{StaticResource DefaultStyle}" />
        <TextBlock Text="Other Style" Style="{StaticResource OtherStyle}" />
    </StackPanel>

 

위와 같이 작성하면

 

상단 Default Style 은 빨간색 글자만 찍히고

 

그 밑에 있는 Other Style 은 OnBase 를 통해 DefaultStyle 스타일을 상속함으로써 빨간색 글씨에 회색 배경으로 출력되게 된다.

 

 

    <Window.Resources>
        <Style x:Key="DefaultStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="Red" />
        </Style>
        <Style x:Key="OtherStyle" TargetType="{x:Type TextBlock}" BasedOn="{StaticResource DefaultStyle}">
            <Setter Property="Background" Value="Gray" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="SkyBlue" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <TextBlock Text="Default Style" Style="{StaticResource DefaultStyle}" />
        <TextBlock Text="Other Style" Style="{StaticResource OtherStyle}" />
    </StackPanel>

 

이번에는 트리거를 추가해보았다.

 

OtherStyle 속성을 가지고 있는 TextBlock 에는 마우스가 올라가면 배경색이 밝은 파란색으로 바뀌게 된다.

(마우스를 밖으로 놓으면 다시 회색으로 변한다.)

 

---

 

스크린샷 보면 둘다 Default Style 텍스트로 해놓았는데 아래가 Other Style 이다.