wpfdrop-down-menumenuavalondockdropdownbutton

Enlarge and Styling for Xceed.Wpf.AvalonDock Drop Down Button


Hi I'm new to AvalonDock and currently I have to handle on a task on others code which implemented this Xceed.Wpf.AvalonDock. My goal is to make the UI become touch screen friendly and first thing I need to enlarge the "Search Tab Button", I'm not sure the actual name of that button, it is used to show all the existing tab which may hidden or be showing on the header. Just like the Google Chrome, there is a button which used to search the opened tab on the upper right corner. Google Chrome Search Tabs

Can anyone help to give some solution or advice on how to enlarge the "Search Tab Button" ? search tab button

I was able to change the size of the Menu Item, but not the button size. Below is the code that I tried to change the size of the Menu Item.

<xcad:DockingManager.DocumentPaneMenuItemHeaderTemplate>
  <DataTemplate>
     <TextBlock Text="{Binding Content.Name}" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" FontSize="18"/>
  </DataTemplate>
</xcad:DockingManager.DocumentPaneMenuItemHeaderTemplate>

Trial Result

The problem is I don't know how to change the button size.

I search through the web, and the only things I found is this Dirkster99/AvalonDock, unfortunately it is not used for Xceed.Wpf.AvalonDock. Help~ Thanks!


Solution

  • https://stackoverflow.com/a/35417749/14891562

    Alright, struggling to find shorter solution from the entire web. In the end, this is what I found, which help me to change the style of the DropDownButton. Thanks to the author!

    To enlarge the button, I follow the instruction of the link above to create a resource dictionary for the entire DocumentPaneControlStyle. From there I change the "Width" and "Height" of the xcad:DropDownButton/

    Conclusion, AvalonDock is tough! :'(