WPF - Formatting a ComboBox's displayed item

Question

I've formatted a ComboBox to display each item's details, please don't take the design as final, it's just an example:

But as you can see, the displayed item (Inside the box with the arrow) is broken:

So I need to format that component too, to display only the Server value in that box. I've tried to find the correct element, and even managed to find a way to reformat the whole combo box, but no way to add a template for the data display inside that box.

How do I edit the data template for that container? This is the result I'd expect:

<ComboBox x:Name="cboSourceMySql" Grid.Column="1" Margin="5,0,5,0" ItemsSource="{Binding OdbcDataSources, Mode=TwoWay}" Grid.Row="1" >

    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <Label Content="Server:" Grid.Column="0" Grid.Row="0" />
                <TextBlock Text="{Binding Server}" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" />
                <Label Content="Driver:" Grid.Column="0" Grid.Row="1" />
                <TextBlock Text="{Binding Driver}" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" />
            </Grid>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Please edit your question and post the code. – aduguid Feb 02 '18 at 11:56 — aduguid, Feb 02 '18 at 11:56
@aduguid I added the code snippet for my current ComboBox – Héctor Álvarez Feb 02 '18 at 12:19 — Héctor Álvarez, Feb 02 '18 at 12:19

score 2 · Accepted Answer · answered Feb 02 '18 at 12:44

From the article WPF Combobox: Different template in textbox and drop-downlist I think you can use the below style

  <ComboBox 
     x:Name="cboSourceMySql" 
       Grid.Column="1" Margin="5,0,5,0" 
       ItemsSource="{Binding OdbcDataSources, Mode=TwoWay}" 
       Grid.Row="1" >
            <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Server}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ComboBox.ItemContainerStyle>
            <Style TargetType="{x:Type ComboBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                            <Border
                                x:Name="Bd"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                <StackPanel Orientation="Vertical">
                                    <Label Content="{Binding Server}" />
                                    <Label Content="{Binding Driver}" />
                                </StackPanel>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsHighlighted" Value="True">
                                    <Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ComboBox.ItemContainerStyle>


    </ComboBox>

WPF - Formatting a ComboBox's displayed item

1 Answers1