DotNetBar for Silverlight是一個能幫助用戶創建專業Silverlight應用程序的用戶界面工具箱，它包含了Calendar/Scheduler控件、徑向菜單、超級工具提示等。本文詳細介紹了在Silverlight中工具欄的一些入門知識。

點擊下載DotNetBar for Silverlight最新試用版

工具欄用于協助安排和樣式化常見的Silverlight控件，例如Button，ToggleButton，RadioButton，ComboBox和TextBox以及常見的DevComponents控件，以及DropDownButton，SplitButton和EnumPicker。工具欄遵循WPF附帶的工具欄控件的基本設計，以供熟悉該控件的人員使用。

工具欄相當于ItemsControl，因此可以在其中放置任何對象。它還與MVVM方法完全兼容。

可以將工具欄直接添加到可視樹，也可以將其放置在工具欄托盤中。ToolbarTray是用于排列工具欄的容器。使用附加的屬性ToolbarTray.Band和ToolbarTray.BandIndex來控制工具欄的位置。

工具欄控件可管理溢出。如果工具欄的寬度不足以顯示所有項目，則隱藏的項目可通過溢出面板供用戶使用。用溢出按鈕打開溢出面板。默認情況下，此按鈕始終可見。但是，可以通過屬性AlwaysShowOverflowButton進行更改。

可以將自定義項目添加到溢出面板，例如，打開對話框的命令按鈕。CustomItem屬性用于此目的。CustomItem鍵入為對象。要添加自定義項目的集合，請使用ItemsControl或提供一個知道如何呈現該集合的DataTemplate。

支持通用控件的自動樣式設置。特殊資源字典用于存儲通常添加到工具欄的控件的預定義樣式。默認情況下，如果項或其容器是受支持的公共控件之一，則在將其插入工具欄面板的子集合之前，其樣式設置為等于在資源字典中找到的相應樣式。請注意，如果控件的樣式屬性已設置，則不會重寫該樣式。若要在一般情況下關閉自動樣式設置，請將工具欄屬性AutoStyleCommonControls設置為false。

定義添加到工具欄的通用控件的樣式的資源字典是組件化的資源字典（這意味著它具有與其關聯的代碼隱藏類。）資源字典實例是可通過ToolbarCommonControlStyles.Default訪問的靜態單例。僅當使用工具欄時，此實例才會創建并合并到應用程序的資源中。它定義的樣式可通過在類ToolbarCommonControlStyles上定義的屬性在代碼中訪問以及在Xaml中作為靜態資源，其鍵與屬性名稱相同。請注意，如果您在xaml中引用樣式資源，則在框架嘗試解析StaticReference之前，可能有必要確保將它們加載到全局資源中。為此，只需在Silverlight UserControl中調用InitializeComponent（）之前設置一個等于ToolbarCommonControlStyles.Default的變量即可。

資源字典ToolbarCommonControlStyles包含以下命名的資源。此外，它用鍵入樣式的相同名稱定義屬性。

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

屬性

以下是工具欄和工具欄托盤定義的屬性列表，供您參考。

工具欄屬性

AutoStyleCommonControls –確定是否應使用通用控件的內置樣式。默認值為true。

AlwaysShowOverflowButton –確定是否顯示溢出按鈕，即使沒有要顯示的溢出項目或自定義項目也是如此。默認值是true。

CornerRadius –獲取或設置工具欄的拐角半徑。

CustomItem –添加到溢出面板的對象。

CustomItemTemplate –一個顯示如何渲染CustomItem的DataTemplate 。

HasOverflowItems –獲取是否有溢出項。這是一個只讀屬性。

IsOverflowOpen –獲取或設置溢出面板下拉菜單是否打開。

方向–獲取或設置工具欄是水平方向還是垂直方向。默認為水平。

工具欄托盤屬性

方向–獲取或設置工具欄是水平方向還是垂直方向。默認為水平。

帶–這是一個附加屬性，當在工具欄上設置時，該屬性確定工具欄放置在哪行或哪一列（取決于方向）。

BandIndex –這是一個附加屬性，當在工具欄上設置該屬性時，它確定工具欄在其Band中的位置。

默認樣式

以下是工具欄和工具欄托盤的默認樣式（及其依賴的資源）的列表，您可以將其用作自定義的起點。

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

今天的教程你學會了嗎？現我們為你提供了最新版本的DotNetBar for Silverlight，點擊即可下載！