[WPF] Custom ContentControl (컨텐트컨트롤 커스텀화)

WPF 의 컨트롤들 중 ContentControl 이라는 것이 있다. Control 중에 'Content' 속성을 지닌 컨트롤을 의미한다. Button 이나 Label, Frame과 같은 컨트롤들이 'ContentControl' 에 속한다.

상황에 따라 이 ContentControl 을 커스텀화 해서 사용하고 싶은 경우가 있다. 가령 Panel 처럼 생겼지만 우측 상단에 접었다 폈다 할 수 있는 기능을 가지는 버튼을 일괄적으로 넣고 싶다거나, border, label 등으로 일괄적으로 변경을 하려고 하는 등의 경우이다. 

물론 코드상에서 적용하고자 하는 부분에 모두 border, button, label 등을 추가할 수 있지만, 이를 템플릿화하여 ContentControl 로 만들어놓는다면 재사용성을 높일 수 있을 것이다.

---

내가 구현하고자 했던 컨트롤은 상단에 두 개의 버튼을 갖는 ContentControl 이다. 이 컨트롤 내부에 어떤 내용이 들어갈 지는 모르지만 공통된 기능을 위해 두 개의 버튼을 달았고, 이 컨트롤은 템플릿처럼 여러 부분에서 일괄적으로 사용하려고 한다.

컨트롤을 생성한 후 사용은 Button 이나 Label 에서와 동일하다. 즉,

<local:MyControl>

<StackPanel>

<Canvas />

<Button />

</StackPanel>

</local:MyControl>

다음과 같이 사용할 수 있다.

---

1. 먼저 '아이템 추가' 에서 WPF > Custom Control (WPF) 를 추가한다.

 

하면 다음과 같은 파일이 생기며, 

프로젝트 부분을 잘 보면 'Generic.xaml' 파일이 생성(되거나 이미 있다면 해당 Custom ContentControl 부분이 추가) 되어 있는 것을 확인할 수 있다.

2. ContentControl 클래스를 상속받도록 한다.

  - 기존에는 MyCustomClass : Control 과 같이 선언되어 있을 것이다.

  - 이를 MyCustomClass : ContentControl 로 변경한다.

3. 'Generic.xaml' 코드에 알맞게 작성한다.

  - 처음 생성했을 때 Generic.xaml 코드 상에는 'Content' 속성에 해당하는 부분이 들어갈 부분이 없다. 따라서 Content 를 넣을 부분에 'ContentControl' 컨트롤을 삽입하고,

  - 그 외 부분을 원하는대로 적절하게 작성하면 된다.

  - ContentControl 을 상속받았기 때문에 바인딩 시켜줘야할 변수들이 제법 많다 (Background, Alignment, Margin 등등). 하여 간단히 작성한 코드를 첨부한다.

<ResourceDictionary

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

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

    xmlns:local="clr-namespace:PanelLib">

    <Style TargetType="{x:Type local:PanelElementControl}" >

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type local:PanelElementControl}">

                    <Border Background="{TemplateBinding Background}"

                            BorderBrush="{TemplateBinding BorderBrush}"

                            BorderThickness="{TemplateBinding BorderThickness}">

                        <Grid>

                            <Grid.RowDefinitions>

                                <RowDefinition Height="20" />

                                <RowDefinition Height="*" />

                            </Grid.RowDefinitions>

                            <DockPanel>

                                <Button DockPanel.Dock="Right" Tag="Up">Move Up</Button>

                                <Button DockPanel.Dock="Right" Tag="Down">Move Down</Button>

                            </DockPanel>

                            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

                                <ContentControl Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" 

                                                    Cursor="{TemplateBinding Cursor}" Foreground="{TemplateBinding Foreground}" 

                                                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 

                                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 

                                                    VerticalAlignment="{TemplateBinding VerticalAlignment}" 

                                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

                                                    FontFamily="Arial" FontSize="{TemplateBinding FontSize}" 

                                                    FontStretch="{TemplateBinding FontStretch}" 

                                                    Margin="{TemplateBinding Padding}" />

                            </ScrollViewer>

                        </Grid>

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

이를 응용하면 자유자재로 원하는 형태의 ContentControl 을 만들 수 있다.