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

Posted 2023-04-12

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

【英文标题】：ComboBox with custom item template showing template and not text when selecting value

【发布时间】：2021-02-11 09:43:11

【问题描述】：

我创建了一个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 的值？

【问题讨论】：

这能回答你的问题吗？ Displaying the selected item differently in ComboBox

另见WPF: How to customize SelectionBoxItem in ComboBox。

【参考方案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>