XAML：在组合框项目突出显示上显示按钮

Posted 2023-04-01

【中文标题】XAML：在组合框项目突出显示上显示按钮

【英文标题】：XAML: Show button on ComboBox item highlight

【发布时间】：2021-09-10 20:47:16

【问题描述】：

我有一个带有 ItemTemplateSelector 的 ComboBox，使用 2 个不同的 DataTemplates，一个用于下拉可见，另一个用于不可见。对于下拉模板，每个 ComboBox 项目都由 TextBlock 和 Button 表示，只有在该项目被聚焦/突出显示/鼠标悬停时才应该可见。这是我尝试过的：

    <ComboBox x:Name="Windows" ItemsSource="Binding Windows" SelectedItem="Binding Window" Focusable="False" MaxDropDownHeight="238">
        <ComboBox.ItemTemplateSelector>
            <s:ComboBoxItemTemplateSelector>
                <s:ComboBoxItemTemplateSelector.SelectedTemplate>
                    <DataTemplate>
                        <TextBlock Text="Binding TitleShort" ToolTip="Binding Title" />
                    </DataTemplate>
                </s:ComboBoxItemTemplateSelector.SelectedTemplate>
                <s:ComboBoxItemTemplateSelector.DropDownTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center">                        
                            <TextBlock Text="Binding TitleShort" />
                            <Button Content="X">
                                <Button.Style>
                                    <Style TargetType="Button">
                                        <Setter Property="Visibility" Value="Collapsed" />
                                        <Style.Triggers>
                                            <DataTrigger Binding="Binding IsFocused, ElementName=Windows" Value="True">
                                                <Setter Property="Visibility" Value="Visible" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Button.Style>
                            </Button>
                        </StackPanel>
                    </DataTemplate>
                </s:ComboBoxItemTemplateSelector.DropDownTemplate>
            </s:ComboBoxItemTemplateSelector>
        </ComboBox.ItemTemplateSelector>
        <ComboBox.ItemContainerStyle>
            <Style BasedOn="StaticResource MaterialDesignComboBoxItemStyle" TargetType="ComboBoxItem">
                <Setter Property="ToolTip">
                    <Setter.Value>
                        <TextBlock Text="Binding Title" />
                    </Setter.Value>
                </Setter>
            </Style>
        </ComboBox.ItemContainerStyle>
    </ComboBox>

    public class ComboBoxItemTemplateSelector : DataTemplateSelector
    
        public DataTemplate SelectedTemplate  get; set; 
        public DataTemplate DropDownTemplate  get; set; 
    
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        
            ComboBoxItem comboBoxItem = GetVisualParent<ComboBoxItem>(container);
    
            if (comboBoxItem == null)
            
                return SelectedTemplate;
            
    
            return DropDownTemplate;
        
    
        private static T GetVisualParent<T>(object childObject) where T : Visual
        
            DependencyObject child = childObject as DependencyObject;
    
            while ((child != null) && !(child is T))
            
                child = VisualTreeHelper.GetParent(child);
            
    
            return child as T;
        
    

【问题讨论】：

你也可以粘贴s和ComboBoxItemTemplateSelector的定义

@LeiYang 我不认为这很重要，因为它只是包装了DataTemplate，但无论如何我已经更新了这个问题。问题在于 DataTrigger 的绑定以表示当前突出显示的项目。

【参考方案1】：

ComboBox 生成 ComboBoxItem 作为其 itemssource 中每个项目的容器。您可以使用 RelativeSource 绑定来绑定到它的属性。

这应该会让你得到预期的行为：

        <Button Content="X">
          <Button.Style>
            <Style TargetType="Button">
              <Setter Property="Visibility" Value="Collapsed" />
              <Style.Triggers>
                <DataTrigger Binding="Binding IsMouseOver, RelativeSource=RelativeSource AncestorType=ComboBoxItem" Value="True">
                  <Setter Property="Visibility" Value="Visible" />
                </DataTrigger>
              </Style.Triggers>
            </Style>
          </Button.Style>
        </Button>