翻译|使用教程|编辑:鲍佳佳|2020-10-14 09:41:33.163|阅读 168 次
概述:DotNetBar for Silverlight是一个能帮助用户创建专业Silverlight应用程序的用户界面工具箱,它包含了Calendar/Scheduler控件、径向菜单、超级工具提示等。本文详细介绍了在Silverlight中工具栏的一些入门知识。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
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包含以下命名的资源。此外,它用键入样式的相同名称定义属性。
属性
以下是工具栏和工具栏托盘定义的属性列表,供您参考。
工具栏属性
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,点击即可下载!
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自: