Changing the content of a grid using ItemTemplating

Question

Current Situation

I have Grid, this Grid has 3 Rows. Each row contains one of my UserControls. Each UserControl is hardcoded to one of the Grid rows:

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>

<Grid>
    <local:myUserControl DependencyProperty1 = "{Binding Property1}" DependencyProperty2 = "{Binding Property2}" />
    <Stackpanel><Button/><Combobox/></StackPanel>
</Grid>
<Grid Grid.Row="1">
    <local:myUserControl DependencyProperty1 = "{Binding Property1}" DependencyProperty2 = "{Binding Property2}" />
    <Stackpanel><Button/><Combobox/></StackPanel>
</Grid>

[...]

</Grid>

My Task

I have more Controls than I can fit into my Window. I'd like to allow the user to swap between all available Controls by selecting the one he likes in the ComboBox and then pressing the Button.

I thought about using ItemTemplating to accomplish this. I've found this post about how to handle different kinds of DataTypes, which helps a lot. Yet I feel like a list would be a little redundant here, since there would always only be one Item in it, but I don't know what to use instead.

My Question

Is there a better solution as the use a list with only one item, or is there even a better way to creata 'swappable' controls at all?

Answer 1

This code here will implement a single control whose contents changes based on the value of a combo box. This just uses ellipses, but you could instead insert your own user control into the ContentControl if you wanted:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ComboBox Name="MyComboBox">
        <ComboBoxItem Content="Fish"/>
        <ComboBoxItem Content="Chips"/>
    </ComboBox>

    <Grid Grid.Row="1">
        <ContentControl>
            <ContentControl.Style>
                <Style TargetType="ContentControl">
                    <Setter Property="Content">
                        <Setter.Value>
                            <Ellipse Fill="Green" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=MyComboBox, Path=SelectedItem.Content}" Value="Fish">
                            <Setter Property="Content">
                                <Setter.Value>
                                    <Ellipse Fill="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=MyComboBox, Path=SelectedItem.Content}" Value="Chips">
                            <Setter Property="Content">
                                <Setter.Value>
                                    <Ellipse Fill="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </Grid>
</Grid>