CODEWITHSUNDEEP
c#wpfxamlmvvmmahapps.metro
Anton
Anton

Reputation: 339

Make DropDownButton auto open on IsMouseOver event

I am using Mahapps and MVVM Light. And I am trying to make DropDownButton expands on IsMouseOver and shrinks on mouse leave. I have tried the different ways to do this. But without results. First one.

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

But it does not work at all.

Also i have tried another solution. 

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

The second solution does not works also. I can not set this event's to internal DropDownButton ContextMenu, in which content items list is shown. I have tried to create my own fork of Mahapps DropDownButton (name it AutoOpenDropDownButton) I take https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Controls/DropDownButton.cs and rename them and in file https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Themes/DropDownButton.xaml i added IsMouseOver trigger at line 283 and setter at line 290). But the control does not shows.

Upvotes: 0

Views: 460

Answers (1)

Ishan070692
Ishan070692

Reputation: 513

Is there a specific need to apply the style on drop down button, you could easily make it work on a style for ComboBox. With a simple Trigger

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

Upvotes: 1

Related Questions