WPF 기초 - Style 사용하기

WPF 기초 - Style 사용하기

 

Style 은 컨트롤의 요소들의 값을 미리 정의해 놓고 쓰기위한 것이라고 보면됩니다.

컨트롤.Resources 안에서 정의합니다.

 아래 코드와 같이 같은 크기의 색이 다른 원을 그린다고 할 때

크기를 미리 정의해 놓고 쓰게되면 색만 바꿔처리하면 되므로 코딩이 간결해집니다.

 

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Canvas>
        <Canvas.Resources>
            <Style
                TargetType="{x:Type Ellipse}">
                <Setter
                     Property="Width"
                     Value="96" />
                <Setter
                     Property="Height"
                     Value="96" />
            </Style>
        </Canvas.Resources>
        <Ellipse Canvas.Left="100" Canvas.Top="50" Fill="Blue" />
        <Ellipse Canvas.Left="150" Canvas.Top="100" Fill="Red" />
        <Ellipse Canvas.Left="200" Canvas.Top="150" Fill="Green" />
    </Canvas>
</Window>

결과

 

 또한 BaseOn 을 사용해 미리 정의한 style 을 기본베이스로 하여 특정속성을 바꿔 style 을 재정의 할 수 있습니다.

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Canvas>
        <Canvas.Resources>
            <Style
                TargetType="{x:Type Ellipse}">
                <Setter
                     Property="Width"
                     Value="96" />
                <Setter
                     Property="Height"
                     Value="96" />
            </Style>
            <Style
                x:Key="otherEllipse"
                TargetType="{x:Type Ellipse}"
                BasedOn ="{StaticResource {x:Type Ellipse}}">
                <Setter
                     Property="Width"
                     Value="150" />
                <Setter
                     Property="Height"
                     Value="150" />
            </Style>
        </Canvas.Resources>
        <Ellipse Canvas.Left="100" Canvas.Top="50" Fill="Blue" />
        <Ellipse Canvas.Left="150" Canvas.Top="100" Fill="Red" />
        <Ellipse Canvas.Left="200" Canvas.Top="150" Fill="Green" Style="{StaticResource otherEllipse}" />
    </Canvas>
</Window>

결과