[WPF] ContentControl vs Control in WPF

 

Control (기반 클래스)

Control은 UI 요소의 가장 기본적인 기반 클래스입니다.

 

DependencyObject
  └── UIElement
        └── FrameworkElement
              └── Control          ← 여기
                    ├── ContentControl
                    ├── ItemsControl
                    └── RangeBase (Slider, ProgressBar 등)

Control이 제공하는 것:

• Background, Foreground, FontSize, Padding, BorderBrush 등 시각적 속성
• Template (ControlTemplate) — 외형을 완전히 바꿀 수 있는 능력
• 키보드/마우스 입력 처리

하지만 내부에 뭔가를 담는 기능은 없습니다.

---

ContentControl

Control을 상속받으면서 "내용물을 하나 담을 수 있는" 기능을 추가한 클래스입니다.

핵심 속성:

public object Content { get; set; }          // 담을 내용물
public DataTemplate ContentTemplate { get; set; } // 어떻게 표시할지

Content에는 뭐든 넣을 수 있습니다:

<!-- 문자열 -->
<Button Content="클릭" />

<!-- 다른 UI 요소 -->
<Button>
    <StackPanel Orientation="Horizontal">
        <Image Source="icon.png" />
        <TextBlock Text="저장" />
    </StackPanel>
</Button>

<!-- 데이터 객체 (+ ContentTemplate으로 표시 방식 지정) -->
<ContentControl Content="{Binding SelectedDevice}"
                ContentTemplate="{StaticResource DeviceTemplate}" />

---

핵심 차이 요약

ControlContentControl

내용물 담기	❌	✅ (Content 속성)
ControlTemplate	✅	✅
대표 자식 클래스	Control 자체는 직접 잘 안 씀	Button, Label, CheckBox, Window, UserControl

---

실무에서 ContentControl이 유용한 패턴

뷰 전환 (Navigation)

MVVM에서 화면 전환할 때 자주 씁니다:

 

xml

<!-- MainWindow.xaml -->
<ContentControl Content="{Binding CurrentViewModel}">
    <ContentControl.Resources>
        <DataTemplate DataType="{x:Type vm:HomeViewModel}">
            <views:HomeView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:DeviceViewModel}">
            <views:DeviceView />
        </DataTemplate>
    </ContentControl.Resources>
</ContentControl>

 

// MainViewModel.cs
public object CurrentViewModel
{
    get => _currentViewModel;
    set { _currentViewModel = value; OnPropertyChanged(); }
}

// 화면 전환
CurrentViewModel = new DeviceViewModel();
// → ContentControl이 자동으로 DeviceView로 바꿔줌

MainFrame에 여러 뷰를 전환하는 구조라면 이 패턴이 딱 맞습니다.

---

한 줄 정리

Control = UI 요소의 뼈대
ContentControl = 거기에 "내용물 슬롯 하나" 를 추가한 것