Toolbar Blue

Toolbar Silver

Toolbar Black

Toolbar is used to assist in arrangement and styling of a group of common Silverlight controls from such as Button, ToggleButton, RadioButton, ComboBox and TextBox along with common DevComponents controls such as DropDownButton, SplitButton and EnumPicker.  Toolbar follows the basic design of the Toolbar control which is included with WPF, for those familiar with that control.

Toolbar is an ItemsControl, and therefore any object can be placed in it. It is also fully compatible with an MVVM approach.

A Toolbar can be added to the visual tree directly, or it can be placed inside a ToolbarTray. ToolbarTray is a container for arranging Toolbars. Use the attached properties ToolbarTray.Band and ToolbarTray.BandIndex to control the positioning of the toolbars.

Toolbar control manages overflow. If the width of the Toolbar is insufficient to display all the items, then the hidden items are available to the user via an overflow panel. The overflow panel is opened with the overflow button. By default this button is always visible. However, this can be changed via property AlwaysShowOverflowButton.

It is possible to add custom items to the overflow panel, for example a command button which opens a dialog. CustomItem property is used for this purpose. CustomItem is typed as an Object. To add a collection of custom items use an ItemsControl or supply a DataTemplate which knows how to render the collection.

Auto styling of common controls is supported. A special resource dictionary is used to store pre-defined styles for the controls which are commonly added to the Toolbar. By default, if an item, or its container, is one the supported common controls, then before it is inserted into the Toolbar panel’s Children collection, its Style is set equal to the corresponding Style found in the resource dictionary. Note that if the control’s Style property is already set, that Style will not be overridden. To turn off auto-styling in general, set the Toolbar property AutoStyleCommonControls to false.

The resource dictionary which defines the Styles for common controls added to the Toolbar is a componentized resource dictionary (meaning that it has a code-behind class associated with it.) The resource dictionary instance is a static singleton accessible via ToolbarCommonControlStyles.Default. This instance is created and merged into the application’s resources if, and only if, a Toolbar is used. The Styles it defines are accessible in code via properties defined on the class ToolbarCommonControlStyles as well as in Xaml as static resources with keys the same as the property names. Note that if you are referencing the Style resources in xaml it may be necessary to ensure that they are loaded into the global resources before the framework attempts to resolve the StaticReference. To to this, simply set a variable equal to ToolbarCommonControlStyles.Default prior to calling InitializeComponent() in your Silverlight UserControl.

The resource dictionary ToolbarCommonControlStyles contains the following named resources. Additionally, it defines properties with the same names which are typed Style.

  • ToolbarSeparatorStyle
  • ToolbarButtonStyle
  • ToolbarButtonToggleButtonStyle
  • ToolbarRadioButtonStyle
  • ToolbarComboBoxItemStyle
  • ToolbarComboBoxStyle
  • ToolbarTextBoxStyle
  • ToolbarDropDownButtonStyle
  • ToolbarSplitButtonStyle
  • ToolbarEnumPickerStyle

Properties

Following are lists of the properties defined by Toolbar and ToolbarTray for your reference.

Toolbar Properties

AutoStyleCommonControls – Determines whether the built-in styling for common controls should be used. Default value is true.

AlwaysShowOverflowButton – Determines whether the overflow button is shown even if there are no overflow items or custom items to show. The default value is true.

CornerRadius – Get or set the corner radius of the Toolbar.

CustomItem – An object which is added to the overflow panel.

CustomItemTemplate – A DataTemplate which shows how to render CustomItem.

HasOverflowItems – Gets whether there are overflow items. This is a read-only property.

IsOverflowOpen – Gets or sets whether the overflow panel drop down is open.

Orientation – Gets or sets whether the Toolbar is orientated Horizontally or Vertically. The default is Horizontal.

ToolbarTray Properties

Orientation – Gets or sets whether the Toolbar is orientated Horizontally or Vertically. The default is Horizontal.

Band – This is an attached property which, when set on a Toolbar, determines which row or column (depending on Orientation) the Toolbar is placed in.

BandIndex – This is a attached property which, when set on a Toolbar, determines the Toolbar’s position within its Band.

Default Styles

Following is a listing of the default styles for Toolbar and ToolbarTray (and the resources they depend on) which you can use as starting point for customization.

    <Style x:Key="ToolbarOverflowButtonStyle" TargetType="ToggleButton">
        <Setter Property="ClickMode" Value="Press" />
        <Setter Property="dc:DynamicResource.BackgroundKey" Value="ToolbarOverflowButtonBackground" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Name="MainGrid" Background="Transparent">
                        <Border Background="{TemplateBinding Background}"
                                CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(dc:ControlBehavior.CornerRadius)}" />
                        <Border Name="HoverBorder" Opacity="0" dc:DynamicResource.BackgroundKey="ButtonHoverBackground" 
                                CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(dc:ControlBehavior.CornerRadius)}" />
                        <Border Name="PressedBorder" Opacity="0" dc:DynamicResource.BackgroundKey="ButtonCheckedBackground" 
                                CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(dc:ControlBehavior.CornerRadius)}" />
                        <Border Name="IsCheckedBorder" Opacity="0" dc:DynamicResource.BackgroundKey="ButtonCheckedBackground" 
                                CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(dc:ControlBehavior.CornerRadius)}" />
                        <ContentPresenter Name="ContentPresenter" Margin="{TemplateBinding Padding}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="Normal" />
                                <VisualState Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HoverBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PressedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="Disabled" />
                            </VisualStateGroup>
                            <VisualStateGroup Name="CheckedStates">
                                <VisualState Name="Unchecked">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="IsCheckedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="IsCheckedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />                                           
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup Name="FocusStates">
                                <VisualState Name="Focused" />
                                <VisualState Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <Style TargetType="dc:Toolbar">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="CornerRadius" Value="3" />
        <Setter Property="dc:DynamicResource.BorderBrushKey" Value="ToolbarBorder" />
        <Setter Property="dc:DynamicResource.BackgroundKey" Value="ToolbarBackground" />
        <Setter Property="Margin" Value="1,1,0,0" />
        <Setter Property="Padding" Value="1" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dc:Toolbar">
                    <Border Name="OuterBorder" Grid.ColumnSpan="2" BorderThickness="{TemplateBinding BorderThickness}" 
                            BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}">
                        <Grid> 
                            <Grid.Resources>
                                <dc:NullableObjectToVisibilityValueConverter x:Key="nullableToVisibilityConverter" />
                                <dc:BoolToVisibilityConverter x:Key="boolToVisibilityConverter" />
                            </Grid.Resources>
                            <Grid Name="HorizontalContent" Visibility="Collapsed" VerticalAlignment="Center">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition x:Name="OverflowButtonColumn" Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <dc:PopupAwareToggleButton x:Name="HorizontalOverflowButton" Grid.Column="1" HorizontalAlignment="Right" 
                                                            HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom"
                                                            Style="{StaticResource ToolbarOverflowButtonStyle}" 
                                                            IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=TwoWay}">
                                    <Border Name="HorizontalOverflowGlyph" Margin="3,0,3,4" BorderBrush="Black" BorderThickness="0,1,0,0">
                                        <Path Margin="1,2" HorizontalAlignment="Center" Fill="Black" Data="M 0,0 L 2.5,3 5,0 Z" />
                                    </Border>
                                </dc:PopupAwareToggleButton>
                                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
                                    <dc:ToolbarPanel x:Name="HorizontalItemsHost" />
                                </Border>
                                <dc:AutoClosePopup x:Name="HorizontalPopup" KeepInHorizontalBounds="True"                                                    
                                                    Placement="Bottom" PlacementTarget="{Binding ElementName=HorizontalOverflowButton}"
                                                    IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=TwoWay}">
                                    <Border Padding="3,2" BorderThickness="1" dc:DynamicResource.BorderBrushKey="ToolbarOverflowBorder" dc:DynamicResource.BackgroundKey="ToolbarOverflowBackground">
                                        <Border.Effect>
                                            <DropShadowEffect Opacity="0.3" ShadowDepth="3" />
                                        </Border.Effect>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <StackPanel Name="HorizontalOverflowPanel" Orientation="Horizontal" />
                                            <Grid Grid.Row="1" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CustomItems, Converter={StaticResource nullableToVisibilityConverter}}">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="Auto" />
                                                </Grid.RowDefinitions>
                                                <Rectangle Margin="0,3" Height="1" VerticalAlignment="Top" Fill="Gray"
                                                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HasOverflowItems, Converter={StaticResource boolToVisibilityConverter}}" />
                                                <ContentPresenter Grid.Row="1" Content="{TemplateBinding CustomItem}" ContentTemplate="{TemplateBinding CustomItemTemplate}" />
                                            </Grid>
                                        </Grid>
                                    </Border>
                                </dc:AutoClosePopup>
                            </Grid>
                            <Grid Name="VerticalContent" Visibility="Collapsed">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition x:Name="OverflowButtonRow" Height="Auto" />
                                </Grid.RowDefinitions>
                                <dc:PopupAwareToggleButton x:Name="VerticalOverflowButton" Grid.Row="1" VerticalAlignment="Bottom"
                                                           HorizontalContentAlignment="Right" VerticalContentAlignment="Center"
                                                           Style="{StaticResource ToolbarOverflowButtonStyle}" 
                                                           IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=TwoWay}">
                                    <Border Name="VerticalOverflowGlyph" Margin="0,3,4,3" BorderBrush="Black" BorderThickness="1,0,0,0">
                                        <Path Margin="2,1" HorizontalAlignment="Center" Fill="Black" Data="M 0,0 L 3,2.5 0,5 Z" />
                                    </Border>
                                </dc:PopupAwareToggleButton>
                                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
                                    <dc:ToolbarPanel x:Name="VerticalItemsHost" />
                                </Border>
                                <dc:AutoClosePopup x:Name="VerticalPopup" KeepInVerticalBounds="True"
                                                    Placement="Right" PlacementTarget="{Binding ElementName=VerticalOverflowButton}"
                                                    IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=TwoWay}">
                                    <Border Padding="2,3" BorderThickness="1" dc:DynamicResource.BorderBrushKey="ToolbarOverflowBorder" dc:DynamicResource.BackgroundKey="ToolbarOverflowBackground">
                                        <Border.Effect>
                                            <DropShadowEffect Opacity="0.3" ShadowDepth="3" />
                                        </Border.Effect>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions> 
                                            <StackPanel Name="VerticalOverflowPanel" Orientation="Vertical" />
                                            <Grid Grid.Column="1" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CustomItems, Converter={StaticResource nullableToVisibilityConverter}}">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="Auto" />
                                                </Grid.ColumnDefinitions>
                                                <Rectangle Margin="3,0" Width="1" HorizontalAlignment="Left" Fill="Gray" 
                                                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HasOverflowItems, Converter={StaticResource boolToVisibilityConverter}}"/>
                                                <ContentPresenter Grid.Column="1" Content="{TemplateBinding CustomItem}" ContentTemplate="{TemplateBinding CustomItemTemplate}" />
                                            </Grid>
                                        </Grid>
                                    </Border>
                                </dc:AutoClosePopup>
                            </Grid>
                        </Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="OverflowButtonStates">
                                <VisualState Name="OverflowButtonEnabled" />
                                <VisualState Name="OverflowButtonDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalOverflowButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalOverflowButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="HorizontalOverflowGlyph" Storyboard.TargetProperty="Opacity" To="0.3" Duration="0" />
                                        <DoubleAnimation Storyboard.TargetName="VerticalOverflowGlyph" Storyboard.TargetProperty="Opacity" To="0.3" Duration="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="OverflowButtonCollapsed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalOverflowButton" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowButtonColumn" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalOverflowButton" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowButtonRow" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup Name="OrientationStates">
                                <VisualState Name="Horizontal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalContent" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalPopup" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="Vertical">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalContent" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalPopup" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <Style TargetType="dc:ToolbarTray">       
        <Setter Property="Padding" Value="4" />
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="dc:DynamicResource.BackgroundKey" Value="ToolbarTrayBackground OnlyIfNull" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <dc:ToolbarTrayPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dc:ToolbarTray">
                    <Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                         <ItemsPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Related posts:

  1. Circular Progress Control (Silverlight) Quick Start Guide
  2. Rating Control for Silverlight Quick Start Guide
  3. SuperToolTip Control
  4. Customizing Appointment Views in Silverlight Schedule
  5. Clock Control Quick Start Guide