带有自定义项目模板的 ComboBox 在选择值时显示模板而不是文本

Question

I have created a ComboBox with a custom items template like this:

<ComboBox ItemsSource="{Binding Clases}" SelectedValue="{Binding Clase}" Style="{StaticResource ComboBoxStyle}" Grid.Column="0">
   <ComboBox.ItemContainerStyle>
      <Style TargetType="ComboBoxItem">
         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      </Style>
   </ComboBox.ItemContainerStyle>
   <ComboBox.ItemTemplate>
      <DataTemplate>
         <Grid Margin="0 2">
            <Grid.ColumnDefinitions>
               <ColumnDefinition/>
               <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
               <TextBlock Text="{Binding CLASE}" VerticalAlignment="Center"/>
            </Grid>
            <Button Command="{Binding DataContext.BorrarClaseCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" CommandParameter="{Binding}" ToolTip="BORRAR CLASE" Grid.Column="1">
               <materialDesign:PackIcon Kind="Delete"/>
            </Button>
         </Grid>
      </DataTemplate>
   </ComboBox.ItemTemplate>
</ComboBox>

The ComboBox is binding to the Clase value in the view model. Clase is a variable of type CLASE_TYPE which is a class that looks like this:

public partial class CLASE_TYPE
{
    public decimal ID { get; set; }
    public string CLASE { get; set; }
}

The result looks like this:

The problem comes when I select a value, the selected value is showing in the ComboBox like this:

How can I avoid this and only show the value of CLASE of the CLASE_TYPE class?

Answer 1

You can give your button a name and add a trigger to the data template that hides the button by setting its Visibility to Collapsed , whenever it is selected. The trigger needs to check if there is a parent ComboBoxItem or not ( x:Null ), checking IsSelected does not work.

<DataTemplate>
   <Grid Margin="0 2">
      <Grid.ColumnDefinitions>
         <ColumnDefinition/>
         <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <Grid Grid.Column="0">
         <TextBlock Text="{Binding CLASE}" VerticalAlignment="Center"/>
      </Grid>
      <Button x:Name="BorrarClaseButton" ToolTip="BORRAR CLASE" Grid.Column="1">
         <materialDesign:PackIcon Kind="Delete"/>
      </Button>
   </Grid>
   <DataTemplate.Triggers>
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ComboBoxItem}}}" Value="{x:Null}">
         <Setter TargetName="BorrarClaseButton" Property="Visibility" Value="Collapsed"/>
      </DataTrigger>
   </DataTemplate.Triggers>
</DataTemplate>

Alternatively, you could create a style for the button that does the same.

<Button ToolTip="BORRAR CLASE" Grid.Column="1">
   <Button.Style>
      <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
         <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ComboBoxItem}}}" Value="{x:Null}">
               <Setter Property="Visibility" Value="Collapsed"/>
            </DataTrigger>
         </Style.Triggers>
      </Style>
   </Button.Style>
   <materialDesign:PackIcon Kind="Delete"/>
</Button>