[WPF 기본 문법] WPF TextBlock, Button 컨트롤 Style 사용하기

소개

안녕하세요. 오늘은 WPF 기본 문법에 대해서 알려 드리려고 합니다.

그 중에서 Style 사용하는 방법에 대해서 학습해 보려고 해요.

Style 문법을 사용할 줄 알면, 다양한 컨트롤에 본인 원하는대로 Custom 컨트롤을 만들 수 있습니다.

예제로 TextBlock, Button 컨트롤 Style 입히는 방법에 대해서 알아보겠습니다.

WPF 프로젝트 생성

• 기본으로 WPF 프로젝트 하나를 생성합니다.
• 저는 Visual Studio 2019 환경에서 작업을 하였고, .NET Framework 4.8 버전으로 프로젝트 생성하였습니다.

App.xaml에 Style 작성하기

• 앞서 WPF 기본 프로젝트를 생성 완료 하였다면, App.xaml 에 몇가지 기본 Style을 작성합니다.

Style 작성 방법

<Style>
    <Setter Property="속성" Value="값">
</Style>

• Style은 위와 같은 형태로 작성하면 됩니다.

<Application x:Class="StyleWpfTest.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:StyleWpfTest"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="StyleTextBlock" TargetType="TextBlock">
            <!--FontSize="24" Foreground="#00ff00"-->
            <Setter Property="FontSize" Value="25"/>
            <Setter Property="Foreground" Value="Chartreuse"/>
        </Style>

        <Style x:Key="StyleButtonOk" TargetType="Button" >
            <Setter Property="Foreground" Value="Blue"/>
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>

        <Style x:Key="StyleButtonCancel" TargetType="Button" >
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </Application.Resources>
</Application>

• 위와 같이 App.xaml 파일에 몇가지 Style을 작성하였습니다.
• 간단히 설명 드리자면, Target 컨트롤로 각각 TextBlock, Button 컨트롤을 설정하고 각 속성의 몇개를 미리 Style로 지정하였습니다.
• 이제 실제 해당 Style을 적용해 보도록 하겠습니다.

Style 적용하기

• Style 적용하는 부분은 MainWindow.xaml 에 직접 xaml에 적용하도록 하겠습니다.

<Window x:Class="StyleWpfTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StyleWpfTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="500">
    <Window.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Foreground" Value="Red"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <StackPanel Margin="4">
            <TextBlock FontWeight="Bold" FontSize="24" Text="안녕하세요. 지금 Style 테스트 합니다."/>
            <TextBlock Text="안녕하세요. 지금 Style 테스트 합니다." Style="{StaticResource StyleTextBlock}"/>
            <TextBlock Foreground="#0000ff" Text="안녕하세요. 지금 Style 테스트 합니다."/>
        </StackPanel>

        <Button Content="확인" Style="{StaticResource StyleButtonOk}"/>
        <Button Content="취소" Style="{StaticResource StyleButtonCancel}"/>
    </StackPanel>
</Window>

실행 결과

• 실행 결과, 아래와 같이 각각 TextBlock, Button 컨트롤에 Style이 정상적으로 적용된 것을 확인할 수 있습니다.