CODEWITHSUNDEEP
wpftoolbar
Tom
Tom

Reputation: 1763

WPF ToolBar: how to remove grip and overflow

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 to not be displayed at all.

any ideas on how to accomplish that?

just in case my terms aren't entirely correct, if you look at the image in Figure 3 of the link below, on the lowest of the three toolbars there's the grip to the left of the dropdown and to the right of the right-most button there's the overflow.

Image of toolbars

Upvotes: 108

Views: 78580

Answers (6)

Thomas Levesque
Thomas Levesque

Reputation: 292465

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)

Upvotes: 6

John Fisher
John Fisher

Reputation: 22719

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">
    . . .

Upvotes: 11

rmoore
rmoore

Reputation: 15393

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();
    }
}

Upvotes: 178

Belmiris
Belmiris

Reputation: 2805

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>

Upvotes: 3

frediano
frediano

Reputation: 31

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.

Upvotes: 0

user7116
user7116

Reputation: 64078

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.

Upvotes: 8

Related Questions