[C#/WPF] ControlTemplate 엘리먼트 : GroupBox 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 GroupBox 엘리먼트를 정의하는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="ContentAreaLightColorKey">#ffc5cbf9</Color>
        <Color x:Key="ContentAreaDarkColorKey">#ff7381f9</Color>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="BorderLightColorKey">#ffcccccc</Color>
        <Color x:Key="BorderMediumColorKey">#ff888888</Color>
        <Color x:Key="BorderDarkColorKey">#ff444444</Color>
        <Style TargetType="GroupBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GroupBox">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*"    />
                            </Grid.RowDefinitions>
                            <Border Grid.Row="0"
                                CornerRadius="2 2 0 0"
                                BorderThickness="1">
                                <Border.BorderBrush>
                                    <LinearGradientBrush
                                        StartPoint="0 0"
                                        EndPoint="0 1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Offset="0.0" Color="{DynamicResource BorderLightColorKey}" />
                                                <GradientStop Offset="1.0" Color="{DynamicResource BorderDarkColorKey }" />
                                            </GradientStopCollection>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush
                                        StartPoint="0 0"
                                        EndPoint="0 1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Offset="0.0" Color="{DynamicResource ControlLightColorKey }" />
                                                <GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
                                            </GradientStopCollection>
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <ContentPresenter
                                    Margin="4"
                                    ContentSource="Header"
                                    RecognizesAccessKey="True" />
                            </Border>
                            <Border Grid.Row="1"
                                CornerRadius="0 0 2 2"
                                BorderThickness="1 0 1 1">
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="{StaticResource BorderMediumColorKey}" />
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush
                                        StartPoint="0.5 0"
                                        EndPoint="0.5 1"
                                        MappingMode="RelativeToBoundingBox">
                                        <GradientStop Offset="0" Color="{DynamicResource ContentAreaLightColorKey}" />
                                        <GradientStop Offset="1" Color="{DynamicResource ContentAreaDarkColorKey }" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <ContentPresenter Margin="4" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <GroupBox
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="300"
        Height="300"
        Header="테스트">
        <Ellipse
            Fill="Yellow" />
    </GroupBox>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<Color x:Key="ControlLightColorKey">White</Color>

<Color x:Key="BorderLightColorKey">#ffcccccc</Color>

<Setter.Value>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Border Grid.Row="0"

CornerRadius="2 2 0 0"

BorderThickness="1">

<Border.BorderBrush>

<LinearGradientBrush

StartPoint="0 0"

EndPoint="0 1">

<LinearGradientBrush.GradientStops>

</GradientStopCollection>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Border.BorderBrush>

<Border.Background>

<LinearGradientBrush

StartPoint="0 0"

EndPoint="0 1">

<LinearGradientBrush.GradientStops>

</GradientStopCollection>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Border.Background>

<ContentPresenter

Margin="4"

ContentSource="Header"

RecognizesAccessKey="True" />

</Border>

<Border Grid.Row="1"

CornerRadius="0 0 2 2"

BorderThickness="1 0 1 1">

<Border.BorderBrush>

</Border.BorderBrush>

<Border.Background>

<LinearGradientBrush

StartPoint="0.5 0"

EndPoint="0.5 1"

MappingMode="RelativeToBoundingBox">

</LinearGradientBrush>

</Border.Background>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

<GroupBox

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="300"

Height="300"

Header="테스트">

<Ellipse

Fill="Yellow" />

</GroupBox>

</Window>

TestProject.zip