WPF ToolBar: how to remove capture and overflow

Question

In the nested WPF ToolBarPanel-ToolBar-Menu, we want to get rid of the capture steering wheel on the left and the overflow area on the right. they are both grayed out, but we would like them to not be displayed at all.

any ideas on how to do this?

just in case, if my conditions are not entirely correct, if you look at the image in Figure 3 of the link below, on the bottom of the three toolbars is the handle to the left of the drop-down list and to the right of the rightmost button there overflow.

Toolbar Image

Answer 1

The capture can be removed by setting the attached property ToolBarTray.IsLocked="True" in the ToolBar.

To remove the Overflow ToggleButton , you will need to remove it in a custom ControlTemplate, as the sixlettervariables suggestion suggests, which if you have a mix or you can download Preview Blend 3 is not too complicated.

You can also simply hide the button in the loaded ToolBar event, although no matter which route you choose, you must also set the attached property ToolBar.OverflowMode="Never" in the ToolBar menu so that the elements cannot accidentally overflow into an inaccessible area.

 <ToolBarPanel DockPanel.Dock="Top"> <ToolBar ToolBarTray.IsLocked="True" Loaded="ToolBar_Loaded"> <Menu ToolBar.OverflowMode="Never"> <MenuItem Header="File" /> <MenuItem Header="New" /> </Menu> </ToolBar> </ToolBarPanel> 

And set the OverflowButton overflow:

 private void ToolBar_Loaded(object sender, RoutedEventArgs e) { ToolBar toolBar = sender as ToolBar; var overflowGrid = toolBar.Template.FindName("OverflowGrid", toolBar) as FrameworkElement; if (overflowGrid != null) { overflowGrid.Visibility = Visibility.Collapsed; } var mainPanelBorder = toolBar.Template.FindName("MainPanelBorder", toolBar) as FrameworkElement; if (mainPanelBorder != null) { mainPanelBorder.Margin = new Thickness(); } } 

Answer 2

You can use Blend to simply override the ControlTemplate for ToolBarPanel, Menu, or ToolBar.

• Right-click on the toolbar and select "Edit Template"
• In the "Edit Template" section, select "Edit Copy."
• I recommend adding a copy to the resource dictionary
• Click ok

Now you are editing the control template for the ToolBarPanel and you can set the visibility to Collapsed for the capture and overflow signal. You can rinse and repeat for other controls. This is a little time consuming, but not very difficult with Blend.

Answer 3

You can “remove” the overflow without submitting a new control pattern by setting the ToolBar to the negative right margins (and discard the negative left margin so that it does not look odd with rounded left edges, but with square right edges). Then add ClipToBounds="True" to the ToolBarPanel , which will cut off the edges of the toolbar that are now sticking out of the panel area.

 <ToolBarPanel Grid.Row="0" ClipToBounds="True"> <ToolBar ToolBarTray.IsLocked="True" Margin="-5,0,-13,0" Padding="5,0,0,0"> . . . 

Answer 4

Instead of completely hiding the overflow button, I think it's better to show it only when necessary. This can be done by binding its Visibility property to the IsEnabled property:

 private static void FixupToolBarOverflowArrow(ToolBar toolBar) { Action fixup = () => { var overflowButton = toolBar.Template.FindName("OverflowButton", toolBar) as ButtonBase; if (overflowButton != null) { overflowButton.SetBinding( VisibilityProperty, new Binding("IsEnabled") { RelativeSource = RelativeSource.Self, Converter = new BooleanToVisibilityConverter() }); } }; if (toolBar.IsLoaded) { fixup(); } else { RoutedEventHandler handler = null; handler = (sender, e) => { fixup(); toolBar.Loaded -= handler; }; toolBar.Loaded += handler; } } 

(the same thing can be done in XAML by overriding the template)

Answer 5

I am just starting to work with WPF and cannot get any of the above methods to hide my overflow arrow (Visual Studio 2010). The only thing that seemed to affect the arrow was the Toolbar_Load example above, but all that was done was turning the arrow into an empty space that looked as bad as an arrow. The easiest way I could understand was to simply set the margins of the toolbar.

 <ToolBar Height="26" Name="toolBar" DockPanel.Dock="Top" ToolBarTray.IsLocked="True" ToolBar.OverflowMode="Never" <!-- no effect --> Margin="0,0,-13,0"> <!-- worked --> <Menu ToolBar.OverflowMode="Never"> <!-- no affect --> <MenuItem Header="_File"></MenuItem> </Menu> </ToolBar> 

Answer 6

The methods above work to hide overflow; I used the following to hide the capture:

  <Label Height="44" Width="30" Background="{StaticResource CtrlBackground}" Margin="-20,0,0,0"></Label> 

for horizontal layout and

  <Label Height="44" Width="230" Background="{StaticResource CtrlBackground}" Margin="0,-20,0,0" HorizontalAlignment="Left"></Label> 

for vertical layout. Place it higher after the toolbar (or ToolbarTray if using it)

Use buttons of any width and height for this.

Kaxaml is great for playing with this material.