WPF Style - 버튼 두개 보이고 스타일 여러버튼에 적용하기

 

이전 글에서 이어지는 포스트 입니다.

 

사라진 ClickMe

ClickMe가 사라졌죠? 처음에는 PressMe가 안나오는 줄 알았습니다.

<Grid>
    <Button Content="ClickMe" Margin="20">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Black"></Setter>
            </Style>
        </Button.Style>
    </Button>
    <Button Content="PressMe" Margin="15">

    </Button>
</Grid>

 

문제는 Grid가 문제였구요 Grid에서 뒤에 나온게 앞에 나온 것을 덮어버린 것이죠.

 

<Grid>를 <StakePanel>로 바꾸니까 둘다 나오기 시작 했습니다.

<StackPanel>
    <Button Content="ClickMe" Margin="20">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Black"></Setter>
            </Style>
        </Button.Style>
    </Button>
    <Button Content="PressMe" Margin="15">

    </Button>
</StackPanel>

 

버튼 두개에 같은 스타일 적용하기

그러면 지금 버튼 두개인데 버튼마다 스타일을 주기 불편하죠 스타일 하나 정해서 쓰고 싶다는거죠. 다음과 같이 버튼의 배경을 Black, Blue로 주는 경우는 그냥 주면 되는데 스타일 하나 주는데 7줄씩 들어갑니다. 나중에 디테일하게 들어가면 감당이 안되죠

 

<StackPanel>
    <Button Content="ClickMe" Margin="20">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Black"></Setter>
            </Style>
        </Button.Style>
    </Button>
    <Button Content="PressMe" Margin="15">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Blue"></Setter>
            </Style>
        </Button.Style>
    </Button>
</StackPanel>

 

 

 

x:Key로 명명 후 StaticResource로 참조

x:Key는 Resource의 이름이라고 할 수 있습니다. 아래에서는 UserControl.Resources를 이용해 리소스를 선언을 하는데요 여기에서 그 이름이 x:Key 되겠습니다. ButtonBackground라는 이름으로 x:Key를 지정 했습니다. 그리고 Button의 Style속성에 StaticResource에 지정을 해줍니다.

<UserControl.Resources>
    <Style x:Key="ButtonBackground">
        <Setter Property="Background" Value="Pink"></Setter>
    </Style>
</UserControl.Resources>

<StackPanel>
    <Button Content="ClickMe" Margin="20" Style="{StaticResource ButtonBackground}">
    </Button>
    <Button Content="PressMe" Margin="15">
    </Button>
</StackPanel>

 

 

Pink색이 적용이 되어야 하는데 안되고있죠?

 

 

TargetType

TargetType을 안줘서 그렇습니다. TargetType="Button" 이걸 빼먹어서요.

<Style x:Key="ButtonBackground" TargetType="Button">
    <Setter Property="Background" Value="Pink"></Setter>
</Style>

 

Html, Css였으면 그냥 됐을 수도 있는데 WPF는 꽤 정교해서 그런거 없습니다.

 

 

이 때문에 다음과 같이 TextBlock이 하나 있는데 여기에 배경을 또한 Pink로 넣고 싶을 때 앞에서 선언한 ButtonBackground를 못 쓰겠죠? 왜냐하면 TargetType이 Button이니까요. 이것은 입문에는 단점일 수 있지만 앱이 고도화 되면 장점 입니다.

<Button Content="ClickMe" Margin="20" Style="{StaticResource ButtonBackground}">
</Button>
<Button Content="PressMe" Margin="15">
</Button>
<TextBlock Text="Bye"></TextBlock>

 

 

 

 

 

같은 속성을 다른 TargetType으로

다음 코드에서는 UserControl.Resource에 Background라는 스타일을 추가 했습니다. 이름이 Background인데 옆에 TargetType이 있으니까 이름을 꽤 단순하게 정해도 정확한 위치에 넣을 수 있습니다.

<UserControl.Resources>
    <Style x:Key="ButtonBackground" TargetType="Button">
        <Setter Property="Background" Value="Pink"></Setter>
    </Style>
    <Style x:Key="Background" TargetType="TextBlock">
        <Setter Property="Background" Value="Pink"></Setter>
    </Style>
</UserControl.Resources>

<StackPanel>
    <Button Content="ClickMe" Margin="20" Style="{StaticResource ButtonBackground}">
    </Button>
    <Button Content="PressMe" Margin="15">
    </Button>
    <TextBlock Text="Bye" Style="{StaticResource Background}"></TextBlock>
</StackPanel>

 

 

 

x:Key 중복은 불허한다

다음과 같이 TargetType이 다르면 중복이 될 것 같지만 안됩니다. 불가합니다.

<Style x:Key="Background" TargetType="Button">
    <Setter Property="Background" Value="Pink"></Setter>
</Style>
<Style x:Key="Background" TargetType="TextBlock">
    <Setter Property="Background" Value="Pink"></Setter>
</Style>

 

 

TargetType이 안맞는 것도 불허 합니다. ButtonBackground는 TargetType이 Button이기 때문에 TextBlock에는 바인딩이 안되는바입니다.

<Button Content="ClickMe" Margin="20" Style="{StaticResource ButtonBackground}">
</Button>
<Button Content="PressMe" Margin="15">
</Button>
<TextBlock Text="Bye" Style="{StaticResource ButtonBackground}"></TextBlock>