none
WPF ToolBar with the ability to set a color of the "overflow panel" and horizontally aligned buttons in "overflow panel" RRS feed

  • General discussion

  • Hi!

    I have faced with the following problems in ToolBar:

    1. Background of the "overflow panel" is always white, even a ToolBar has a specified Background
    2. Button in "overflow panel" are not horizontally aligned

    My solution is below... maybe it will be helpfull for someone:

    using System;
    using System.Collections.Generic;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Controls.Primitives;
    using System.Windows.Media;
    
    namespace WPF.Controls
    {
        public class ToolBar : System.Windows.Controls.ToolBar
        {
            #region Fields
    
            private Dictionary<Control, Double> _overflowedControlsList = new Dictionary<Control, Double>();
            private ToolBarOverflowPanel _toolBarOverflowPanel;
            private Boolean _suppressOverflowCorrections;
            private Boolean _overflowedControlWidthChanged;
    
            #endregion //Fields
    
            #region Properties
    
            public static readonly DependencyProperty OverflowPanelBackgroundProperty =
                DependencyProperty.Register("OverflowPanelBackground", typeof(Brush), typeof(ToolBar),
                new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
    
            public Brush OverflowPanelBackground
            {
                get { return (Brush) GetValue(OverflowPanelBackgroundProperty); }
                set { SetValue(OverflowPanelBackgroundProperty, value); }
            }
    
            #endregion //Properties
    
            #region Public Methods
    
            public override void OnApplyTemplate()
            {
                base.OnApplyTemplate();
    
                if (OverflowPanelBackground == null)
                {
                    OverflowPanelBackground = Background;
                }
    
                if (_toolBarOverflowPanel == null)
                {
                    _toolBarOverflowPanel = GetToolBarOverflowPanel();
                    if (_toolBarOverflowPanel == null)
                    {
                        return;
                    }
                    else
                    {
                        _toolBarOverflowPanel.Loaded += ToolBarOverflowPanelOnLoadedHandler;
                    }
                }
    
                var overflowPanelBorder = _toolBarOverflowPanel.Parent as Border;
                if (overflowPanelBorder != null)
                {
                    overflowPanelBorder.Background = OverflowPanelBackground;
                }
                else
                {
                    _toolBarOverflowPanel.Background = OverflowPanelBackground;
                    _toolBarOverflowPanel.Margin = new Thickness(0);
                }
            }
    
            #endregion //Public Methods
    
            #region Protected Methods
    
            protected override Size MeasureOverride(Size constraint)
            {
                if (_overflowedControlWidthChanged)
                {
                    IsOverflowOpen = _suppressOverflowCorrections = true;
                    foreach (var cachedItem in _overflowedControlsList)
                    {
                        var control = cachedItem.Key;
                        var width = cachedItem.Value;
                        control.Width = width;
                    }
                    IsOverflowOpen = _suppressOverflowCorrections = false;
                    _overflowedControlWidthChanged = false;
                }
    
                return base.MeasureOverride(constraint);
            }
    
            protected ToolBarOverflowPanel GetToolBarOverflowPanel()
            {
                return GetTemplateChild("PART_ToolBarOverflowPanel") as ToolBarOverflowPanel;
            }
    
            protected ToolBarPanel GetToolBarPanel()
            {
                return GetTemplateChild("PART_ToolBarPanel") as ToolBarPanel;
            }
    
            #endregion //Protected Methods
    
            #region Events Handlers
    
            private void ToolBarOverflowPanelOnLoadedHandler(Object sender, RoutedEventArgs e)
            {
                if (_suppressOverflowCorrections)
                {
                    return;
                }
    
                var width = GetMaxChildWidth(_toolBarOverflowPanel);
                if (width > 0)
                {
                    foreach (var child in _toolBarOverflowPanel.Children)
                    {
                        var control = child as Control;
                        if (control != null)
                        {
                            if (!_overflowedControlsList.ContainsKey(control))
                            {
                                _overflowedControlsList[control] = control.Width;
                            }
                            if (control.ActualWidth != width)
                            {
                                control.Width = width;
                                _overflowedControlWidthChanged = true;
                            }
                        }
                    }
                }
            }
    
            #endregion //Events Handlers
    
            #region Private Methods
    
    	private static Double GetMaxChildWidth(Panel panel)
            {
                var width = 0.0;
                foreach (var child in panel.Children)
                {
                    var control = child as Control;
                    if (control != null && control.ActualWidth > width)
                    {
                        width = control.ActualWidth;
                    }
                }
                return width;
            }
    
            #endregion //Private Methods
        }
    }

    BTW: New ToolBar's "overflow panel" by default has the same background as ToolBar has.

    Usage sample:

    <Window x:Class="WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:src="clr-namespace:WPF.Controls"> <ToolBarTray Background="White">
            <wpf:ToolBar Background="Pink" OverflowPanelBackground="Peru" Band="1" BandIndex="1" Width="50">
                <Button Content="Cut" />
                <Button Content="Copy" />
                <Button Content="Paste" />
            </wpf:ToolBar>
            <wpf:ToolBar Background="Aqua" Band="2" BandIndex="1" Width="70">
                <Button Content="Undo" />
                <Button Content="Redo" />
            </wpf:ToolBar>
            <wpf:ToolBar OverflowPanelBackground="Yellow" Band="2" BandIndex="2" Width="100">
                <Button Content="Paint"/>
                <Separator />
                <Button Content="Spell Check Options" HorizontalContentAlignment="Left" />
                <Separator/>
                <Button Content="Save file" HorizontalContentAlignment="Left" />
                <Separator />
                <Button Content="Open directory" HorizontalContentAlignment="Left" />
            </wpf:ToolBar>
        </ToolBarTray> </Window>


    New ToolBar Sample


    • Edited by Alex Padabed Monday, October 27, 2014 12:13 PM
    • Moved by Marvin_Guo Tuesday, October 28, 2014 5:26 AM Move from desktop forum
    Monday, October 27, 2014 11:34 AM

All replies

  • Hello Alex,

    This issue is related with WPF, I would help move it to the WPF forum.

    The current forum you post to is used to discuss general issues about developing applications for Windows.

    Fred.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, October 28, 2014 5:24 AM
  • Thank you, Fred, Marvin
    Thursday, October 30, 2014 5:47 AM
  • That's great extension, I believe it saved me a lot of time!!
    Wednesday, February 17, 2016 10:48 AM