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

Question

我创建了一个ComboBox，其中包含这样的自定义项目模板：

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

ComboBox 绑定到视图模型中的Clase 值。 Clase 是 CLASE_TYPE 类型的变量，它是一个如下所示的类：

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

结果如下：

当我选择一个值时，问题就出现了，所选值显示在ComboBox 中，如下所示：

如何避免这种情况，只显示CLASE_TYPE 类的CLASE 的值？

Answer 1

您可以为您的按钮命名，并在数据模板中添加一个触发器来隐藏该按钮，方法是将其Visibility 设置为Collapsed，只要它被选中。触发器需要检查是否有父ComboBoxItem（x:Null），检查IsSelected不起作用。

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

或者，您可以为按钮创建一个样式来做同样的事情。

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