[WPF] ComboBox 선택에 따라 컨트롤 바꾸기 - Control Switching by ComboBox

 화면을 제작하다보면 선택형 Control (이 포스트의 예로는 ComboBox)에 따라 내가 원하는 컨트롤들을 보여주기를 원할 때가 많다. Converter를 배운 사람이라면 먼저 Visible을 이용하여 컨트롤을 먼저 떠오를텐데 이것을 이용하는 것보다 좀더 손쉽고 간단한 방법이 있다. 

 이것은 Template를 동적으로 변경해주는 것인데 아래와 같은 방식으로 손쉽게 처리할 수 있다.

 

<ComboBox Height="30"
            x:Name="filterComboBox"
            SelectedIndex="0"
            VerticalContentAlignment="Center">
    <ComboBoxItem Content="Type 1"/>
    <ComboBoxItem Content="Type 2"/>
    <ComboBoxItem Content="Type 3"/>
</ComboBox>

<ContentControl Grid.Column="1">
    <ContentControl.Resources>
        <!--Switching할 Template 들을 선언해준다.-->
        <ControlTemplate x:Key="Type1Template"
                            TargetType="{x:Type ContentControl}">
            <ComboBox SelectedIndex="0">
                <ComboBoxItem Content="Test Combo 1"/>
                <ComboBoxItem Content="Test Combo 2"/>
                <ComboBoxItem Content="Test Combo 3"/>
                <ComboBoxItem Content="Test Combo 4"/>
            </ComboBox>
        </ControlTemplate>
        <ControlTemplate x:Key="Type2Template"
                            TargetType="{x:Type ContentControl}">
            <TextBox />
        </ControlTemplate>
        <ControlTemplate x:Key="Type3Template"
                            TargetType="{x:Type ContentControl}">
            <DataGrid/>
        </ControlTemplate>
    </ContentControl.Resources>
    <ContentControl.Style>
        <!--DataTrigger를 이용하여 filterComboBox에서 선택한 값에 따라 Template를 동적으로 변경 시켜준다.-->
        <Style TargetType="{x:Type ContentControl}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=filterComboBox, Path=SelectedIndex}" Value="0">
                    <Setter Property="Template" Value="{DynamicResource DataTypeTemplate}"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding ElementName=filterComboBox, Path=SelectedIndex}" Value="1">
                    <Setter Property="Template" Value="{DynamicResource FileTemplate}"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding ElementName=filterComboBox, Path=SelectedIndex}" Value="2">
                    <Setter Property="Template" Value="{DynamicResource LabeledTemplate}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>