WPF 4 Ribbon 开发 之 标签工具栏(Tab Toolbar)
?本篇將開始介紹標簽工具欄的開發(fā)內(nèi)容,標簽工具欄可以說是Ribbon 的核心部分,應(yīng)用程序所有的功能特性都會集中在這里,一個強大的Ribbon 工具欄也是一款軟件成功的關(guān)鍵。在開始前還是先來看看標簽工具欄的結(jié)構(gòu),從圖中可看出Ribbon 工具欄主要分為四部分:Ribbon?->?Tab?->?Group?->?Control。
???? 下面來添加一個Clipboard 菜單組,其中包括三個RibbonButton 控件分別實現(xiàn)“粘貼”、“拷貝”、“剪切”功能。與前兩篇文章一樣,先為Button 控件編寫<RibbonCommand> 和Command 事件內(nèi)容。
<r:RibbonCommand x:Key="PasteCommand" LabelTitle="Paste"CanExecute="PasteCommand_CanExecute"Executed="PasteCommand_Executed"SmallImageSource="Images/Paste.png"LargeImageSource="Images/Paste.png"ToolTipTitle="Paste"ToolTipDescription="Paste contents" /> <r:RibbonCommand x:Key="CopyCommand" LabelTitle="Copy"CanExecute="CopyCommand_CanExecute"Executed="CopyCommand_Executed"SmallImageSource="Images/Copy.png"LargeImageSource="Images/Copy.png"ToolTipTitle="Copy"
ToolTipDescription="Copy selected contents" /> <r:RibbonCommand x:Key="CutCommand" LabelTitle="Cut"CanExecute="CutCommand_CanExecute"Executed="CutCommand_Executed"SmallImageSource="Images/Cut.png"LargeImageSource="Images/Cut.png"ToolTipTitle="Cut"
ToolTipDescription="Cut selected contents" /> private void PasteCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) {e.CanExecute = ApplicationCommands.Paste.CanExecute(FocusManager.GetFocusedElement(this), null); }private void PasteCommand_Executed(object sender, ExecutedRoutedEventArgs e) {ApplicationCommands.Paste.Execute(FocusManager.GetFocusedElement(this), null); }private void CopyCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) {e.CanExecute = ApplicationCommands.Copy.CanExecute(FocusManager.GetFocusedElement(this), null); }private void CopyCommand_Executed(object sender, ExecutedRoutedEventArgs e) {ApplicationCommands.Copy.Execute(FocusManager.GetFocusedElement(this), null); }private void CutCommand_CanExecute(object sender, CanExecuteRoutedEventArgs e) {e.CanExecute = ApplicationCommands.Cut.CanExecute(FocusManager.GetFocusedElement(this), null); }private void CutCommand_Executed(object sender, ExecutedRoutedEventArgs e) {ApplicationCommands.Cut.Execute(FocusManager.GetFocusedElement(this), null); }
???? 在Command 事件中使用了ApplicationCommands 來完成Paste、Copy、Cut 各項功能。同時使用FocusManger.GetFocusedElement 來鎖定ApplicationCommands 的操作對象(TextBox),這也就是為什么在《WPF 4 Ribbon 開發(fā) 之 快捷工具欄(Quick Access Toolbar)》一文中提到的將<Ribbon> 的FocusManager.IsFocusScope 屬性設(shè)為True 的原因。將上面RibbonCommand 設(shè)置加入相應(yīng)<RibbonButton>的Command 屬性中。
<r:Ribbon DockPanel.Dock="Top" FocusManager.IsFocusScope="True" Title="WPF4 Notepad"><r:Ribbon.QuickAccessToolBar>... ...</r:Ribbon.QuickAccessToolBar><r:Ribbon.ApplicationMenu>... ...</r:Ribbon.ApplicationMenu><r:RibbonTab Label="Home"><r:RibbonGroup HasDialogLauncher="True" Command="{StaticResource GroupCommand}"><r:RibbonGroup.GroupSizeDefinitions><r:RibbonGroupSizeDefinitionCollection><r:RibbonGroupSizeDefinition><r:RibbonControlSizeDefinition ImageSize="Large" /><r:RibbonControlSizeDefinition ImageSize="Small" /><r:RibbonControlSizeDefinition ImageSize="Small" /></r:RibbonGroupSizeDefinition></r:RibbonGroupSizeDefinitionCollection></r:RibbonGroup.GroupSizeDefinitions><r:RibbonButton Command="{StaticResource PasteCommand}" /><r:RibbonButton Command="{StaticResource CopyCommand}" /><r:RibbonButton Command="{StaticResource CutCommand}" /></r:RibbonGroup></r:RibbonTab><r:RibbonTab Label="View" /><r:RibbonTab Label="Help" /> </r:Ribbon>???? 上面程序中通過RibbonControlSizeDefinition 來定義RibbonButton 控件在Group 中的圖標顯示方式(分別為大、小兩種),在本例中我們將Paste 設(shè)為大圖標,另外Copy、Cut 兩個設(shè)為小圖標。HasDialogLauncher 屬性用于設(shè)定是否顯示Dialog Box Launcher 按鍵(如下圖),如果有需要也可以為Dialog Launcher 添加工具欄。
???? 這樣一個RibbonGroup 就完成了。有了上面的基礎(chǔ)對于Font 組的開發(fā)就輕而易舉了,在該組中使用了兩個<RibbonControlGroup>控件組分別用于字體顏色和尺寸大小的設(shè)置,大家可以參考下面代碼進一步了解。
<r:RibbonGroup><r:RibbonGroup.Command><r:RibbonCommand LabelTitle="Font" /></r:RibbonGroup.Command><r:RibbonControlGroup><r:RibbonLabel ToolTip="Font Color"><r:RibbonLabel.Content><Image Source="Images/Paint.png" Width="16" Height="16" /></r:RibbonLabel.Content></r:RibbonLabel><r:RibbonButton ToolTip="Black" Background="Black"CommandParameter="Black"><r:RibbonButton.Command><r:RibbonCommand Executed="FontColorCommand_Executed" /></r:RibbonButton.Command></r:RibbonButton><r:RibbonButton ToolTip="Red" Background="Red"CommandParameter="Red"><r:RibbonButton.Command><r:RibbonCommand Executed="FontColorCommand_Executed" /></r:RibbonButton.Command></r:RibbonButton><r:RibbonButton ToolTip="Blue" Background="Blue"CommandParameter="Blue"><r:RibbonButton.Command><r:RibbonCommand Executed="FontColorCommand_Executed" /></r:RibbonButton.Command></r:RibbonButton><r:RibbonButton ToolTip="Green" Background="Green"CommandParameter="Green"><r:RibbonButton.Command><r:RibbonCommand Executed="FontColorCommand_Executed" /></r:RibbonButton.Command></r:RibbonButton></r:RibbonControlGroup><r:RibbonControlGroup><r:RibbonLabel ToolTip="Font Size"><r:RibbonLabel.Content><Image Source="Images/Font.png" Width="16" Height="16" /></r:RibbonLabel.Content></r:RibbonLabel><r:RibbonComboBox x:Name="fontComboBox" Width="80"SelectionChanged="fontComboBox_SelectionChanged"><r:RibbonComboBoxItem Content="10"/><r:RibbonComboBoxItem Content="20"/><r:RibbonComboBoxItem Content="30"/></r:RibbonComboBox></r:RibbonControlGroup> </r:RibbonGroup> private void FontColorCommand_Executed(object sender, ExecutedRoutedEventArgs e) {txtBox.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString(e.Parameter as string)); }private void fontComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) {double fontSize = 0;switch (fontComboBox.SelectedIndex){case 0:fontSize = 10;break;case 1:fontSize = 20;break;case 2:fontSize = 30;break;default:break;}txtBox.FontSize = fontSize; }修改字體大小和顏色后的效果圖:
?
???? 至此,Ribbon 工具欄相關(guān)內(nèi)容的介紹已全部完成,希望該系列對大家有所幫助。當然Ribbon 控件庫中的控件還不止這些,有很多其他控件供開發(fā)者使用,有興趣的朋友可以按需要進行選擇,并完善軟件的Ribbon 工具欄功能。
本系列相關(guān)文章
1.?WPF 4 Ribbon 開發(fā) 之 快捷工具欄(Quick Access Toolbar)
2.?WPF 4 Ribbon 開發(fā) 之 應(yīng)用程序菜單(Application Menu)
源代碼下載
本文轉(zhuǎn)自Gnie博客園博客,原文鏈接:http://www.cnblogs.com/gnielee/archive/2010/05/12/wpf4-ribbon-tab-toolbar.html,如需轉(zhuǎn)載請自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的WPF 4 Ribbon 开发 之 标签工具栏(Tab Toolbar)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Eclipse 教程
- 下一篇: Android NDK开发之旅14 J