How to know what gets clicked in a DropDownButton

Question

Per this page, the DropDownButton is using a ContextMenu to display the ItemsSource. How are we to know what the user clicks on? The Click event on the button isn't for the menu, but the button itself. I see no other events on it.

Answer 1

I came across this question looking for the same answer. I never really found anything online but discovered this solution on my own. Perhaps it will help someone in the future.

As stated previously the DropDownButton uses a ContextMenu to display its ItemsSource. Basically what I was looking for was a "Menu-like" drop down coming from a button. For example, say you have a DropDownButton that says "Add". Maybe you want 2 options like "Add New" and "Add Existing". So this is what I did...

First I made some object to hold the header/content and the command.

public class TitledCommand
{
    public String Title { get; set; }
    public ICommand Command { get; set; }
}

Theoretically you would have a list of these to bind to the ItemsSource of the DropDownButton.

public List<TitledCommand> TitledCommmands { get; private set; }

Now we just style the item container for the DropDownButton so it picks up the header and command from our objects in the ItemsSource.

Include MahApps:

xmlns:metroControls="http://metro.mahapps.com/winfx/xaml/controls"

And here is the style...

<metroControls:DropDownButton Content="Add" ItemsSource="{Binding Path=TitledCommmands}">
    <metroControls:DropDownButton.ItemContainerStyle>        
        <Style TargetType="MenuItem">
            <Setter Property="Header" Value="{Binding Path=Title}"/>
            <Setter Property="Command" Value="{Binding Path=Command}"/>
        </Style>          
    </metroControls:DropDownButton.ItemContainerStyle>
</metroControls:DropDownButton>

Answer 2

You can override the item template for the control and can add a handler inside of it like this:

<controls:DropDownButton Content="Select me" x:Name="selectMeDropDownButton">
    <controls:DropDownButton.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" MouseDown="selectMeDropDownButton_TextBlock_MouseDown" />
        </DataTemplate>
    </controls:DropDownButton.ItemTemplate>
</controls:DropDownButton>

And implement the event handler in code-behind file like this:

void selectMeDropDownButton_TextBlock_MouseDown(object sender, MouseButtonEventArgs e)
{
    if (e.ChangedButton == MouseButton.Left && this.selectMeDropDownButton.IsExpanded)
    {
        var value = ((TextBlock)e.Source).DataContext;
        // Do something meaningful with the value, it's an item from ItemsSource
    }
}

The check for DropDownButton.IsExpanded is necessary as the same ItemTemplate is applied to the Content on the button itself. Of course you can replace TextBlock with any Control/UIElement you like.