Search code examples
c#wpfdrop-down-menusplit-buttonwpf-extended-toolkit

WPF- How to hide a dropdown menu after click


I have a SplitButton in my WPF window, which is borrowed from Xceed's Extended WPF Toolkit. Its dropdown content is consisted of some RadioButtons. Something like:

<Window x:Class="WpfTest.Test3"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:tk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
        Title="Test3" Height="300" Width="300">
    <Grid Height="25" Width="150">
        <tk:SplitButton Content="Default Command">
            <tk:SplitButton.DropDownContent>
                <StackPanel>
                    <RadioButton Content="Default Command" GroupName="variations" Margin="5" IsChecked="True"/>
                    <RadioButton Content="Alternate Command 1" GroupName="variations" Margin="5"/>
                    <RadioButton Content="Alternate Command 2" GroupName="variations" Margin="5"/>
                </StackPanel>
            </tk:SplitButton.DropDownContent>
        </tk:SplitButton>
    </Grid>
</Window>

which generates something like this:

test

The problem is, when I click on each of the RadioButtons the dropdown menu doesn't dissappear. I did some googling and realized that I should handle the Click event for each RadioButton. But I don't know how to hide the dropdown menu in that event handler. As a side-note, it seems a MenuItem has the property of StaysOpenOnClick, but there is no such thing for other controls.

Although doing this programmatically would suffice, but is there an MVVM way for this?


Solution

  • Add Checked event on your radio button and use SplitoButton.IsOpen=false;. Follow this code.

    Xaml

    <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:tk="clr-namespace:Xceed.Wpf.Toolkit;assembly=Xceed.Wpf.Toolkit"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <tk:SplitButton Name="SplitButton" Content="Default Command">
    
                <tk:SplitButton.DropDownContent>
    
                    <StackPanel>
                        <RadioButton Checked="rb_Checked" Content="Default Command" GroupName="variations" Margin="5" IsChecked="True"/>
                        <RadioButton Checked="rb_Checked" Content="Alternate Command 1" GroupName="variations" Margin="5"/>
                        <RadioButton Checked="rb_Checked" Content="Alternate Command 2" GroupName="variations" Margin="5"/>
                    </StackPanel>
    
                </tk:SplitButton.DropDownContent>
            </tk:SplitButton>
        </Grid>
    </Window>
    

    .cs

     private void rb_Checked(object sender, RoutedEventArgs e)
            {
                SplitButton.IsOpen = false;
            }