TabControl dans ComboBox

Question

Je voudrais créer un contrôle ImagePicker qui permet aux utilisateurs de choisir une image à partir d'une variété de sources.

Une image vaut mille mots: I'm not yet cool enough to post images

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

Fondamentalement, je veux un TabControl dans la liste déroulante d'une zone de liste déroulante. Tous les éléments de type GoogleImage doivent être affichés dans l'onglet Images Google, les éléments BingImage dans l'onglet Images Bing, etc.

J'ai essayé de mettre mon TabControl dans ComboBox.ItemsPanelTemplate mais WPF ne me l'a pas laissé parce que TabControl n'est pas un panneau.

J'ai eu quelques succès en éditant le modèle ComboBox et en mettant mon TabControl dans le Popup mais je ne sais pas comment implémenter la deuxième partie de mes exigences.

Answer 1

Je crois que vous auriez besoin de créer un style personnalisé pour votre combobox et redéfinir sa section PopUp. Pls vérifier ici: ComboBox ControlTemplate Example pour plus de détails sur la façon de personnaliser le style pour la combobox wpf. Votre nouvelle section Popup pourrait ressembler à celui ci-dessous:

<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> 

espérons que cette aide, ce qui est

Answer 2

Try this

Cela est en train de faire semblable à ce que vous essayez de faire, mais en utilisant un agrégateur de nouvelles, mais ce le même genre de configuration. Et PrismV2 est génial pour ça.