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

點(diǎn)擊下載DotNetBar for Silverlight最新試用版

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

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

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

工具欄控件可管理溢出。如果工具欄的寬度不足以顯示所有項(xiàng)目，則隱藏的項(xiàng)目可通過(guò)溢出面板供用戶使用。用溢出按鈕打開(kāi)溢出面板。默認(rèn)情況下，此按鈕始終可見(jiàn)。但是，可以通過(guò)屬性AlwaysShowOverflowButton進(jìn)行更改。

可以將自定義項(xiàng)目添加到溢出面板，例如，打開(kāi)對(duì)話框的命令按鈕。CustomItem屬性用于此目的。CustomItem鍵入為對(duì)象。要添加自定義項(xiàng)目的集合，請(qǐng)使用ItemsControl或提供一個(gè)知道如何呈現(xiàn)該集合的DataTemplate。

支持通用控件的自動(dòng)樣式設(shè)置。特殊資源字典用于存儲(chǔ)通常添加到工具欄的控件的預(yù)定義樣式。默認(rèn)情況下，如果項(xiàng)或其容器是受支持的公共控件之一，則在將其插入工具欄面板的子集合之前，其樣式設(shè)置為等于在資源字典中找到的相應(yīng)樣式。請(qǐng)注意，如果控件的樣式屬性已設(shè)置，則不會(huì)重寫該樣式。若要在一般情況下關(guān)閉自動(dòng)樣式設(shè)置，請(qǐng)將工具欄屬性AutoStyleCommonControls設(shè)置為false。

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

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

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

屬性

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

工具欄屬性

AutoStyleCommonControls –確定是否應(yīng)使用通用控件的內(nèi)置樣式。默認(rèn)值為true。

AlwaysShowOverflowButton –確定是否顯示溢出按鈕，即使沒(méi)有要顯示的溢出項(xiàng)目或自定義項(xiàng)目也是如此。默認(rèn)值是true。

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

CustomItem –添加到溢出面板的對(duì)象。

CustomItemTemplate –一個(gè)顯示如何渲染CustomItem的DataTemplate 。

HasOverflowItems –獲取是否有溢出項(xiàng)。這是一個(gè)只讀屬性。

IsOverflowOpen –獲取或設(shè)置溢出面板下拉菜單是否打開(kāi)。

方向–獲取或設(shè)置工具欄是水平方向還是垂直方向。默認(rèn)為水平。

工具欄托盤屬性

方向–獲取或設(shè)置工具欄是水平方向還是垂直方向。默認(rèn)為水平。

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

BandIndex –這是一個(gè)附加屬性，當(dāng)在工具欄上設(shè)置該屬性時(shí)，它確定工具欄在其Band中的位置。

默認(rèn)樣式

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

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

今天的教程你學(xué)會(huì)了嗎？現(xiàn)我們?yōu)槟闾峁┝俗钚掳姹镜?a target="_blank">DotNetBar for Silverlight，點(diǎn)擊即可下載！