plantilla diferente para los elementos de la lista desplegable del cuadro combinado y de elemento seleccionado

Question

Tengo una ComboBox con la plantilla bastante complejo para los elementos individuales, que incluye dos imágenes y varias líneas de texto:

Sin embargo, el elemento seleccionado en el ComboBox no se muestra correctamente, porque el espacio vertical es demasiado limitado (no puedo hacerlo más alto, porque forma parte de un ToolBar).

¿Cómo puedo hacer que el ComboBox utilice una plantilla diferente para el elemento que se muestra en el ComboBox sí mismo? (la representación predeterminada de ToString sería suficiente)

¡Gracias!

Answer 1

El elemento seleccionado (en el ComboBox sí mismo, no en el menú desplegable) no está dentro de un ComboBoxItem lo que puede hacer algo como esto:

<ComboBox.ItemTemplate> 
    <DataTemplate> 
     <ContentControl Content="{Binding}"> 
      <ContentControl.Style> 
       <Style TargetType="{x:Type ContentControl}"> 
        <!-- Complex default template --> 
        <Setter Property="ContentTemplate"> 
         <Setter.Value> 
          <DataTemplate> 
           <Image Source="{Binding XPath=media:thumbnail/@url}" Width="100" Height="100" /> 
          </DataTemplate> 
         </Setter.Value> 
        </Setter> 
        <Style.Triggers> 
         <!-- Simple selection box template --> 
         <DataTrigger 
           Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" 
           Value="{x:Null}"> 
          <Setter Property="ContentTemplate"> 
           <Setter.Value> 
            <DataTemplate> 
             <TextBlock Text="{Binding XPath=title}" /> 
            </DataTemplate> 
           </Setter.Value> 
          </Setter> 
         </DataTrigger> 
        </Style.Triggers> 
       </Style> 
      </ContentControl.Style> 
     </ContentControl> 
    </DataTemplate> 
</ComboBox.ItemTemplate> 

(Editar: Tenga en cuenta que la unión en el El cuadro de selección arrojará errores porque no se encuentra el RelativeSource. Hay varias opciones de eludir esto, uno es un convertidor de valor personalizado que devuelve true o false dependiendo de si el ancestro existe (caminar manualmente en árbol).)

Answer 2

Estaba buscando un estándar (no hacky y sin errores de enlace) solución a este problema. Y lo encontré here: usando DataTemplateSelector.

Es la misma idea que en @H.B. answer: consultar siempre que haya un ComboBoxItem como padre en el árbol visual.

public class ComboBoxItemTemplateSelector : DataTemplateSelector 
{ 
    public DataTemplate SelectedTemplate { get; set; } 
    public DataTemplate DropDownTemplate { get; set; } 

    public override DataTemplate SelectTemplate(object item, DependencyObject container) 
    { 
     while (container != null) 
     { 
      container = VisualTreeHelper.GetParent(container); 
      if (container is ComboBoxItem) 
       return DropDownTemplate; 
     } 
     return SelectedTemplate; 
    } 
} 

Uso:

<ComboBox.ItemTemplateSelector> 
    <local:ComboBoxItemTemplateSelector> 
     <local:ComboBoxItemTemplateSelector.SelectedTemplate> 
      <DataTemplate> 
       ... simple template for selected item 
      </DataTemplate> 
     </local:ComboBoxItemTemplateSelector.SelectedTemplate> 
     <local:ComboBoxItemTemplateSelector.DropDownTemplate> 
      <DataTemplate> 
       ... complex template used by dropdown items 
      </DataTemplate> 
     </local:ComboBoxItemTemplateSelector.DropDownTemplate> 
    </local:ComboBoxItemTemplateSelector> 
</ComboBox.ItemTemplateSelector>