TabControl in ComboBox

Question

I would like to create an ImagePicker control that lets users pick an image from a variety of sources.

A picture is worth a thousand words: I'm not yet cool enough to post images

<ComboBox>
    <local:GoogleImage/>
    <local:GoogleImage/>
    <local:GoogleImage/>
    <local:BingImage/>
    <local:BingImage/>
</ComboBox>

Basically, I want a TabControl in the drop-down list of a ComboBox. All items of type GoogleImage should be displayed in the Google Images tab, BingImage items in the Bing Images tab and so on.

I tried to put my TabControl in ComboBox.ItemsPanelTemplate but WPF wouldn't let me because TabControl is not a panel.

I had some success editing the ComboBox template and putting my TabControl in the Popup but I don't know how to implement the second part of my requirements.

Answer 1

Try this

This is doing similar to what you are trying to do but using a news aggregator, but its the same kind of setup. And PrismV2 is great for this.

Answer 2

I believe you would need to create a custom style for your combobox and redefine its PopUp section. Pls check here: ComboBox ControlTemplate Example for details on how to customize style for the wpf combobox. Your new Popup section could look like the one below:

<Window.Resources>
...
<Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
     ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton ...>
                    </ToggleButton>
                    <ContentPresenter ... />
                    <TextBox x:Name="PART_EditableTextBox" .../>
                    <Popup 
                          Name="Popup"
                          Placement="Bottom"
                          IsOpen="{TemplateBinding IsDropDownOpen}"
                          AllowsTransparency="True" 
                          Focusable="False"
                          PopupAnimation="Slide">
                        <Grid 
                            Name="DropDown"
                            SnapsToDevicePixels="True"                
                            MinWidth="{TemplateBinding ActualWidth}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border 
                                  x:Name="DropDownBorder"
                                  Background="{StaticResource WindowBackgroundBrush}"
                                  BorderThickness="1"
                                  BorderBrush="{StaticResource SolidBorderBrush}"/>

                            <TabControl>
                                <TabItem Header="Google">
                                    <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>
                                </TabItem>
                                <TabItem Header="Bing">
                                    <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>
                                </TabItem>
                                <TabItem Header="Computer">
                                    <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>
                                </TabItem>
                        </TabControl>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                   ...
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
       ...
    </Style.Triggers>
</Style>
...
</Window.Resources>

hope this helps, regards