WPF ToolBar: how to remove grip and overflow

Question

In a nested WPF ToolBarPanel-ToolBar-Menu we want to get rid of the grip handle to the left and the overflow area to the right. they are both grayed out, but we\'d like them

Answer 1

The methods above work to hide the overflow; I've used the following to hide the gripper:

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

for a Horizontal layout, and

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

for a Vertical layout. Place the above after the Toolbar(or ToolbarTray, if using that)

Use whatever Width and Height is needed for your buttons.

Kaxaml is excellent for playing with this stuff.

Answer 2

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

To remove the Overflow ToggleButton, you will have to remove it in a custom ControlTemplate as sixlettervariables suggests, which if you have blend or can download the Blend 3 Preview is not overly difficult.

You could also just hide the button in the loaded event of the ToolBar, though whichever route you take, you should also set the attached property ToolBar.OverflowMode="Never" on the ToolBar's menu, so that items cannot accidentally overflow into an unreachable 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 Overflow ToggleButton to collapsed:

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 3

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

1. Right click on the ToolBar and select Edit Template
2. From Edit Template, select Edit a Copy
3. I recommend adding the copy to a Resource Dictionary
4. Click Ok

You'll now be editing the control template for the ToolBarPanel, and can set the visibility to Collapsed for the grip and overflow signal. You can rinse and repeat for the other controls. It is a bit time consuming, but isn't terribly hard with Blend.

Answer 4

You can "remove" the overflow without supplying a new control template by setting the ToolBar to have negative right margins (and throw in a negative left margin so it doesn't look odd with rounded left edges but square right edges). Then, add ClipToBounds="True" to the ToolBarPanel which will cut off the edges of the toolbar which are now sticking outside the panel's area.

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

Answer 5

Rather than hiding the overflow button completely, I think it's better to show it only when necessary. This can be done by binding its Visibility property to its 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 redefining the template)

Answer 6

I am just starting out with WPF and could not 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 did was turn the arrow into an empty space that looked as bad as the arrow. The easiest way I could figure was just to 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>