Geek Answers Handbook

Wpf button with drop down list and arrow

Can someone suggest a better way to have a button with an arrow and a drop-down list, for example, on the toolbar of the visual studio toolbar. As you can find in VS, the mouse cursor selects both the default button and the arrow button, and after selecting an item from the list, the default button changes according to your choice.

enter image description hereenter image description here

Here is a code snippet that shows a dropdown menu, but not for the full functionality described above

early

<StackPanel Orientation="Horizontal"> <Border CornerRadius="0" BorderBrush="Black" BorderThickness="1"> <Button Name="CreateButton" Click="CreateButton_Click" Background="Transparent" BorderBrush="{x:Null}"> <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add1.png" /> <Button.ContextMenu> <ContextMenu HorizontalAlignment="Right"> <MenuItem Header=" doc" Click="CreateDocButton_Click"> <MenuItem.Icon> <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add_sheet.png" Width="24" Height="24" /> </MenuItem.Icon> </MenuItem> <MenuItem Header=" xls" Click="CreateXlsButton_Click"> <MenuItem.Icon> <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add_sheet.png" Width="24" Height="24" /> </MenuItem.Icon> </MenuItem> <MenuItem Header=" txt" Click="CreateTxtButton_Click"> <MenuItem.Icon> <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/add_sheet.png" Width="24" Height="24" /> </MenuItem.Icon> </MenuItem> </ContextMenu> </Button.ContextMenu> </Button> </Border> <Border CornerRadius="0" BorderBrush="Black" BorderThickness="1"> <Button HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Transparent" BorderBrush="{x:Null}" ContextMenuService.IsEnabled="False" Click="AddButtonContextMenu_Click"> <Image Source="/OMS.Resources;component/Resources/Images/LibraryImages/arrow_down.png" VerticalAlignment="Center" Width="9" /> </Button> </Border> </StackPanel>
+8
button wpf arrow
source share
4 answers

I would suggest using WPF Tookit and its SplitButton control, its free

+6
source share

It looks like you have three problems:

  • Styling / layout
  • Highlight Dropdown Menu and OnMouseOver
  • Change default button to match until last menu selection

Styling / Layout

Here are some examples:

I am sure that there are many other ways (for example, using a simple button and ComboBox) respectively.

Selection dropdown and OnMouseOver button

Experiment with triggers; eg:

  • WPF trigger effect for child controls
  • WPF - How to change the style of children when you hover over the parent

Change default button to match until last menu selection

Try the MVVM approach: The button element will be bound to the ViewModel property. Each menu item triggers an action (ICommand) in your ViewModel. This ViewModel will know which menu item has been called up and update the button property in the ViewModel. The button will be automatically updated using data binding.

+4
source share

The solution is to use the menu item and decorate it.

XAML Code:

 <MenuItem Click="AddPresetButton_Click" x:Name="AddPresetButton"> <MenuItem.Icon> <Image Source="/MyApp.Application;component/Resources/add.png" Height="20"/> </MenuItem.Icon> <MenuItem.Header> <StackPanel Orientation="Horizontal"> <TextBlock Text="Add Preset"/> <Image Source="/MyApp.Application;component/Resources/arrow_down_simple.png" Height="10" Margin="2,0,0,0"/> </StackPanel> </MenuItem.Header> <MenuItem.ContextMenu> <ContextMenu> <MenuItem Header="Add 1"/> <MenuItem Header="Add 2"/> <MenuItem Header="Add 3"/> </ContextMenu> </MenuItem.ContextMenu> </MenuItem>

C # code: When a menu is pressed, the context menu opens.

 private void AddPresetButton_Click(object sender, RoutedEventArgs e) { var addButton = sender as FrameworkElement; if (addButton != null) { addButton.ContextMenu.IsOpen = true; } }
+3
source share

Check out the ComboBox control that comes with the standard WPF application.

0
source share

More articles:


All Articles