使 DropDownButton 在 IsMouseOver 事件上自动打开答案

【问题标题】：Make DropDownButton auto open on IsMouseOver event使 DropDownButton 在 IsMouseOver 事件上自动打开
【发布时间】：2016-06-24 16:48:28
【问题描述】：

我正在使用 Mahapps 和 MVVM Light。我试图让 DropDownButton 在 IsMouseOver 上扩展并在鼠标离开时缩小。我尝试了不同的方法来做到这一点。但没有结果。第一个。

        <Style x:Key="AutoOpenDropDownButtonStyle" TargetType="{x:Type controls:DropDownButton}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="IsExpanded" Value="True" />
            </Trigger>
        </Style.Triggers>
    </Style>

            <controls:DropDownButton x:Name="ddbVolume" Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"
                                     ItemsSource="{Binding AudioControls}"
                                     Icon="{DynamicResource appbar_settings}" BorderThickness="0"
                                     ArrowVisibility="Collapsed" Style="{StaticResource AutoOpenDropDownButtonStyle}">
            </controls:DropDownButton>

但它根本不起作用。

我也尝试了另一种解决方案。

                <controls:DropDownButton x:Name="ddbVolume" Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource Self}}"
                                     ItemsSource="{Binding AudioControls}"
                                     Icon="{DynamicResource appbar_settings}" BorderThickness="0"
                                     ArrowVisibility="Collapsed">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseEnter">
                        <command:EventToCommand Command="{Binding MouseEnterCommand}" CommandParameter="{Binding ElementName=ddbVolume}"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>

                <command:EventToCommand Command="{Binding MouseEnterCommand}" PassEventArgsToCommand="True"/>
            </controls:DropDownButton>

    MouseEnterCommand = new RelayCommand<DropDownButton>(MouseVolumeBarEnter, x => true);
    MouseLeaveCommand = new RelayCommand<DropDownButton>(MouseVolumeBarLeave, x => true);

    private void MouseVolumeBarLeave(DropDownButton sender)
    {
        if (sender.IsExpanded)
        {
            sender.IsExpanded = false;
        }
    }

    private void MouseVolumeBarEnter(DropDownButton sender)
    {
        if (!sender.IsExpanded)
        {
            sender.IsExpanded = true;
        }
    }

第二种解决方案也不起作用。我无法将此事件设置为内部 DropDownButton ContextMenu，其中显示了内容项列表。我尝试创建自己的 Mahapps DropDownButton 分支（将其命名为 AutoOpenDropDownButton），我采用 https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Controls/DropDownButton.cs 并重命名它们，并在文件 https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Themes/DropDownButton.xaml 中添加了 IsMouseOver 触发器在第 283 行和设置器在第 290 行）。但是控件没有显示。

【问题讨论】：

MVVM != 没有代码隐藏，你不应该在你的视图模型中操作你的 UI。只需在代码隐藏中执行即可。
查看此链接。 w3schools.com/howto/howto_css_dropdown.asp 这可能是您正在寻找的东西。它完全适用于 css
威尔，谢谢。我认为这种方式可以成功）
JSON，我用的是 WPF 而不是 WebForms，所以我认为在 WPF 中使用 CSS 是不可能的

标签： c# wpf xaml mvvm mahapps.metro

【解决方案1】：

是否需要在下拉按钮上应用样式，您可以轻松地使其适用于 ComboBox 的样式。用一个简单的触发器

<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="IsDropDownOpen" Value="True"/>
    </Trigger>
</Style.Triggers>

【讨论】：