아이 요소를 가지는 커스텀 컨트롤을 작성해 화면 작성을 절력화

소개

디자인성이 높은 화면을 XAML화하고 있으면 UserControl에서 파생시킨 커스텀 컨트롤을 여러 개 만들어 배치하는 작업이 많아집니다. 그 때 미묘하게 다른 요소를 가진 커스텀 컨트롤을 매번 만드는 것은 불효율입니다. WPF(XAML)에는 ContentPresenter라는 태그가 있으며 자식 요소가 있는 이 사용자 지정 컨트롤을 만들 수 있습니다.

App.xaml

  <Application x:Class="ContentPresenterSample.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ContentPresenterSample"
             StartupUri="MainWindow.xaml">

    <Application.Resources>
        <ResourceDictionary>
            <Style TargetType="{x:Type local:SingleControl}">
                <Setter Property="Margin" Value="0" />
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:SingleControl}">
                            <Border BorderBrush="Blue" BorderThickness="1">
                                <Button Margin="5">ボタン</Button>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="{x:Type local:ParentControl}">
                <Setter Property="Margin" Value="0" />
                <Setter Property="SnapsToDevicePixels" Value="True" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type local:ParentControl}">
                            <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

SingleControl.cs

namespace ContentPresenterSample
{
    public class SingleControl: UserControl
    {
    }
}

ParentControl.cs

namespace ContentPresenterSample
{
    public class ParentControl : UserControl
    {
    }
}

MainWindow.xaml

<Window x:Class="ContentPresenterSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ContentPresenterSample"
        Title="MainWindow"
        Width="525"
        Height="350">

    <Grid>
        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
            <local:SingleControl Width="100" Height="100" Margin="0,0,10,0"/>

            <local:ParentControl Width="100" Height="100">
                <Border BorderBrush="Blue" BorderThickness="1">
                    <Button Margin="5">ボタン</Button>
                </Border>
            </local:ParentControl>
        </StackPanel>
    </Grid>
</Window>

왼쪽 컨트롤은 스타일에 디자인과 자식 요소를 포함하고 있지만 오른쪽 컨트롤은 ContentPresenter를 사용하여 자식 요소를 가질 수 있습니다. ContentPresenter를 사용하면 자식 요소의 다른 프레임만 그리는 커스텀 컨트롤 등도 작성할 수 있습니다.