Search code examples
c#wpfcomboboxdatatemplate

WPF - Formatting a ComboBox's displayed item


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

Combo box

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

Combo box detail

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: enter image description here

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

Solution

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