首页 > 解决方案 > HowTo:将“Xaml 中的材料设计”“ComboBox”行为更改为仅在单击箭头时显示下拉菜单?

问题描述

您如何修改Xaml (MDIX)中的 Material Design ComboBox,使其在单击箭头按钮时显示项目列表?有没有一种简单的方法可以在不破坏图书馆行为的情况下做到这一点?

您可以提供的任何见解将不胜感激。

语境

对于.NET ComboBox, a 的默认行为IsEditable="True"是:

对于 MDIX ComboBox, a 的默认行为IsEditable="True"是:

附加SnoopWPF显示MouseLeftButtonDown事件正在触发,但我犹豫是否要进行任何重大更改(例如制作我自己的资源副本),因为我想保持与 MDIX 的未来版本兼容。

环境

标签: wpfxamlmaterial-design-in-xaml

解决方案


根本原因

我不知道这是否是 MDIX 库的初衷,但似乎是:

  1. toggleButton视觉树中高于PART_EditableTextBox
  2. 当您打开toggleButton边框时,您会看到 Button 占据了整个宽度ComboBox

结果,toggleButton总是会拦截鼠标事件。

解决方案

我终于找到了一个解决方案:创建一个 WPF 附加属性。这使我们能够:

  • 有一种更像微软的行为ComboBox
  • 同时使升级到 MDIX 库的未来版本相对容易

源代码

XAML 中的以下附加行为

<ComboBox materialDesign:TextFieldAssist.HasClearButton="True">
  <!-- implementation details here -->
</ComboBox>

使用此 WPF 附加行为:

internal static class MdixComboBoxBehavior
{
        public static readonly DependencyProperty UseMicrosoftBehaviorProperty = DependencyProperty.RegisterAttached(
            "UseMicrosoftBehavior", 
            typeof(bool), 
            typeof(MdixComboBoxBehavior), 
            new UIPropertyMetadata(default(bool), UseMicrosoftBehaviorChanged));

        public static bool GetUseMicrosoftBehavior(DependencyObject obj)
        {
            return (bool)obj.GetValue(UseMicrosoftBehaviorProperty);
        }

        public static void SetUseMicrosoftBehavior(DependencyObject obj, bool value)
        {
            obj.SetValue(UseMicrosoftBehaviorProperty, value);
        }

        public static void UseMicrosoftBehaviorChanged(DependencyObject s, DependencyPropertyChangedEventArgs e)
        {
            if (s is ComboBox comboBox)
            {
                comboBox.Loaded += OnControlLoaded;
            }
        }

        private static void OnControlLoaded(object sender, RoutedEventArgs e)
        {
            if (sender is ComboBox comboBox)
            {
                if (comboBox.Template != null)
                {
                    if (comboBox.Template.FindName("toggleButton", comboBox) is ToggleButton button)
                    {
                        // Bug fix: the following makes the MDIX ComboBox 
                        // behave more like a Microsoft ComboBox. A list of options
                        // is only displayed when the user clicks the down arrow.
                        button.BorderThickness = new Thickness(1);
                        button.Width = 10;
                        button.HorizontalAlignment = HorizontalAlignment.Right;
                    }
                }
            }
        }
    }

推荐阅读