WPF ContentPresenter - 모양은 Style이 내용은 내가

티스토리 뷰

카테고리 없음

WPF ContentPresenter - 모양은 Style이 내용은 내가

KyeongRok Kim 2026. 4. 25. 09:24

다시 보면서 하기 위해 Window를 추가 해봅니다.

<Window x:Class="CdsHelper.Main.Themes.Views.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:local="clr-namespace:CdsHelper.Main.Themes.Views"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800">
</Window>

스타일 선언과 바인딩

<Window.Resources>
    <Style x:Key="Button1" TargetType="Button">
        <Setter Property="Background" Value="DodgerBlue"></Setter>
    </Style>
</Window.Resources>
<Grid>
    <Button Content="ClickMe" Style="{StaticResource Button1}"></Button>
</Grid>

버튼에 ControlTemplate을 Border로 교체

<Grid>
    <Button Content="ClickMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10"></Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

여러개의 버튼 넣기

<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10"></Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</StackPanel>

Grid는 전체를 대상으로 하지만 StackPanel은 아닙니다. Grid는 안에 있는 자식 요소를 꽉 채워주지만 StackPanel은 꽉 채우는 개념이 아니기 때문에 Border는 세로 DesiredSize=0이니까 납작해져서 안 보입니다. 그래서 앞에서 했듯이 TextBlock을 넣어주면 TextBlock은 자기 크기의 기본값이 0이 아니기 때문에 표시가 됩니다.

<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10">
                    <TextBlock Text="ClickMe"></TextBlock>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</StackPanel>

여러개의 버튼

ClickMe버튼 아래에 PressMe버튼을 추가 합니다.

<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10">
                    <TextBlock Text="ClickMe"></TextBlock>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
    <Button Content="PressMe" Style="{StaticResource Button1}">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="DarkSlateBlue" CornerRadius="10">
                    <TextBlock Text="PressMe"></TextBlock>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</StackPanel>

버튼 모양 잡기

위에는 버튼같이 안생겼기 때문에 버튼에 속성을 넣어주겠습니다. Width로 가로 길이를 지정 해주고 텍스트의 가운데 정렬을 위해 TextBlock에 HorizontalAlignment와 VerticalAlignment를 Center로 넣어줍니다.

<Button Content="ClickMe" Style="{StaticResource Button1}"
        Width="120">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Brown" CornerRadius="10" Padding="12,6">
                <TextBlock Text="ClickMe" HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

Margin으로 위아래 여백 주기

Margin까지 주면 꽤나 버튼 처럼 보입니다.

<Button Content="ClickMe" Style="{StaticResource Button1}"
        Width="120" Margin="0,4">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="Brown" CornerRadius="10" Padding="12,6">
                <TextBlock Text="ClickMe" HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

버튼 그룹에 적용

HorizontalAlignment

그러면 아까 어색했던 모양을 잡아보겠습니다. TextBlock에 VerticalAlignment="Center" 를 넣으면 되겠네요.

VerticalAlignment를 넣으니 위로 치우쳤던 글자가 가운데로 왔습니다.

TextBlock에 Foreground="White"를 넣어서 글자를 하얗게 만들어 줍니다.

Margin

글자가 버튼 안에 너무 딱 붙어있어서 보기 안좋기 때문에 TextBlock기준으로 Margin을 줍니다.

<TextBlock Text="파일 열기" Foreground="White" Margin="6" VerticalAlignment="Center"></TextBlock>

CornerRadius도 너무 과하기 때문에 3으로 줄여서 네모난 모양을 만들어 줍니다. 동그란 느낌을 유지하고 싶다면 10으로 놔두면 됩니다.

<Button x:Name="PART_BtnOpen" Content="파일 열기" Padding="8,4" Margin="0,0,6,0">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="DodgerBlue" CornerRadius="3">
                <TextBlock Text="파일 열기" Foreground="White" Margin="6" VerticalAlignment="Center"></TextBlock>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

이제는 이 스타일을 다른 버튼들에 적용 해보겠습니다.

스타일 추출 및 적용

다시 Window로 돌아가보겠습니다. 코드가 길어져서 일단 버튼 하나만 남겼습니다. 스타일을 Window.Resources로 뽑아봅니다.

<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}"
            Width="120" Margin="0,4">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10" Padding="12,6">
                    <TextBlock Text="ClickMe" HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</StackPanel>

Template지정

Background의 경우는 한줄로 Value="Brown"주면 됩니다. 하지만 Template은 값 하나가 아니고 덩어리 입니다.

<Window.Resources>
    <Style x:Key="Button1" TargetType="Button">
        <Setter Property="Background" Value="Brown"/>
        <Setter Property="Template" Value="{ControlTemplate TargetType=Button}">
        </Setter>
    </Style>
</Window.Resources>

이만큼 인데 Value="" 이 한줄로 넣기가 어려운 상황입니다. 이럴 때 <Setter.Value></Setter.Value>로 감싸 주는 것입니다.

Before

<Button.Template>
    <ControlTemplate TargetType="Button">
        <Border Background="Brown" CornerRadius="10" Padding="12,6">
            <TextBlock Text="ClickMe" HorizontalAlignment="Center"
                              VerticalAlignment="Center"/>
        </Border>
    </ControlTemplate>
</Button.Template>

After

Value=""를 <Setter.Value></Setter.Value>로 위아래로 넓게 쓸 수 있게 공간이 확보 되었고 그 안쪽으로 ControlTemplate을 넣어주었습니다. 잘 들어갑니다.

<Style x:Key="Button1" TargetType="Button">
    <Setter Property="Background" Value="Brown"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Brown" CornerRadius="10" Padding="12,6">
                    <TextBlock Text="PressMe" HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

버튼에 스타일 적용

버튼에 있던 속성을 싹 지우고 스타일을 바인딩 해줍니다.

<Window.Resources>
    <Style x:Key="Button1" TargetType="Button">
        <Setter Property="Background" Value="Brown"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="Brown" CornerRadius="10" Padding="12,6">
                        <TextBlock Text="PushMe" HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Content="ClickMe" Style="{StaticResource Button1}"
            Width="120" Margin="0,4" />
    <Button Content="PressMe" Style="{StaticResource Button1}"
            Width="120" Margin="0,4" />
</StackPanel>

버튼을 하나 추가를 했습니다. <Button Content="ClickMe"/>와 <Button Content="PushMe"/> 이렇게 두개의 버튼에 스타일이 잘 적용된 것을 볼 수 있습니다.

하지만 자세히 보시면 몇 가지 정리가 안된 부분이 있습니다. Background="Brown"이 많이 들어있습니다. Button.Background의 색을 DarkSlateBlue로 바꿔보면 안바뀝니다. 이 속성이 적용되고 있지 않은것입니다. 어디를 바꿔야 하냐면 Border쪽입니다. 그래서 Button쪽은 지우고 Border쪽을 바꿔줍니다.

<Setter Property="Background" Value="DarkSlateBlue"/>

Border Background변경

잘 바뀐 것을 볼 수 있습니다. 하지만 문제는 또 있죠. Content입니다. 버튼 Text가 둘 다 PushMe로 보이고 있습니다. 이유는 Style쪽 TextBlock에 PushMe가 두 버튼에 적용되고 있어서 그렇습니다.

<ControlTemplate TargetType="Button">
    <Border Background="DarkSlateBlue" CornerRadius="10" Padding="12,6">
        <TextBlock Text="PushMe" HorizontalAlignment="Center"
                          VerticalAlignment="Center"/>
    </Border>
</ControlTemplate>

ContentPresenter

<TextBlock Text="PushMe" HorizontalAlignment="Center" VerticalAlignment="Center"/>에 하드코딩 되어 있던 것을 <ContentPresenter>로 바꿔줍니다. <Button Content="ClickMe" 그러면 Style은 Style태그에 있는 스타일이 적용 되면서 출력되는 값은 버튼쪽에 선언된 Content가 출력 됩니다.

<Style x:Key="Button1" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="DarkSlateBlue" CornerRadius="10" Padding="12,6">
                    <ContentPresenter></ContentPresenter>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

정렬과 색상을 지정 해주면 됩니다.

<ContentPresenter TextElement.Foreground="White"
	HorizontalAlignment="Center"
    VerticalAlignment="Center"></ContentPresenter>

저작자표시 (새창열림)

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

글 보관함

뷰티풀 프로그래밍

티스토리 뷰