ASP.NET Atlas简单控件介绍——Sys.Component基类与Sys.UI.Control基类

How To Start Using Wpf-Ribbon Control

To start using Wpf-Ribbon in your project follow these steps:

1. Using RibbonWindow

Add Reference to Wpf-Ribbon assembly to your project

In C# right-click References node in Solution Explorer and choose Add Reference context menu command. In the Add Reference find and select DevComponents WpfRibbon and click OK.

In VB double-click My Project node in Solution Explorer and click on References tab. Click Add button and in the Add Reference find and select DevComponents WpfRibbon and click OK.




You should already have the default WPF Window created by the VS.NET so open the Window1.xaml and change the Window declaration to:


<dc:RibbonWindow x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dc="clr-namespace:DevComponents.WpfRibbon;assembly=DevComponents.WpfRibbon"
Title="My First Ribbon" Height="436" Width="638"
ResizeMode="CanResizeWithGrip"
>

Do not forget to scroll down to the bottom of your XAML file and replace the </Window> with the </dc:RibbonWindow>
Note couple things:

x:Class value WindowsApplication1 should be changed to the name of your assembly/project. Window1 should be changed to the name of your window.

Notice xmlns:dc="clr-namespace:DevComponents.WpfRibbon;assembly=DevComponents.WpfRibbon" this adds the Wpf-Ribbon name space so you can reference the Wpf-Ribbon controls by using dc prefix. You are free to choose any other prefix you want. We choose dc because it is short :-)




Open the Window1.xaml.cs file which is code behind file and change the Window1 class declaration so it inherits from DevComponents.WpfRibbon.RibbonWindow instead of System.Windows.Window

Your XAML file at the end of this step should look like this:


<dc:RibbonWindow x:Class="WindowsApplication158.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dc="clr-namespace:DevComponents.WpfRibbon;assembly=DevComponents.WpfRibbon"
Title="My First Ribbon" Height="436" Width="638"
ResizeMode="CanResizeWithGrip"
>
<Grid>

</Grid>
</dc:RibbonWindow>



Try to compile your application and if all changes were successful you should be error free

2. Adding Ribbon control

Ribbon control is added simply by specifying the Ribbon XAML markup tag. Continuing from the step 1 we will change our XAML so it includes better layout to replicate something like RibbonPad sample that we ship with the control. After adding the Ribbon and changing the layout your window XAML file should look like this:


<dc:RibbonWindow x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dc="clr-namespace:DevComponents.WpfRibbon;assembly=DevComponents.WpfRibbon"
Title="My First Ribbon" Height="436" Width="638"
ResizeMode="CanResizeWithGrip"
>
<DockPanel LastChildFill="True">
<dc:Ribbon DockPanel.Dock="Top" Name="ribbonControl1" AutoHideRibbonContent="False">
</dc:Ribbon>
<!-- Edit box for text editing -->
<RichTextBox Margin="16,16,16,16" BorderBrush="Black" BorderThickness="1" />
</DockPanel>
</dc:RibbonWindow>

3. Specifying the Application Menu

Application menu is assigned by setting the Ribbon.ApplicationMenu property to the new instance of the ApplicationMenu control. Application menu usually looks something like this (from our RibbonPad sample):





To define the Application menu use following markup:


<!--Define Application Menu-->
<dc:Ribbon.ApplicationMenu>
<dc:ApplicationMenu dc:Ribbon.KeyTip="F">


Notice the introduction of the KeyTip attached property. Using the KeyTip attached property you specify single or multi-key key tips for the buttons, ribbon tabs and application menu.

To set application menu image used inside of the round button set the ApplicationMenu.Image property, as shown in markup below:


<dc:ApplicationMenu.Image>
<Image Source="images/Component.png" Width="24" Height="24"/>
</dc:ApplicationMenu.Image>




Application menu displayed in the picture above has three parts. Left part which displays the document related commands, like New, Open, Save etc. use main application menu content to specify these. Right part which displays the Most Recently Used list of files, use ApplicationMenu.MruItems collection to specify this. Bottom part which displays the application commands, use AppItems collection to specify these commands. This is how application markup for the menu pictured above looks like:


<!--Define Application Menu-->
<dc:Ribbon.ApplicationMenu>
<dc:ApplicationMenu dc:Ribbon.KeyTip="F">
<dc:ApplicationMenu.Image>
<Image Source="images/Component.png" Width="24" Height="24"/>
</dc:ApplicationMenu.Image>
<!-- Application Commands -->
<dc:ApplicationMenu.AppItems>
<dc:ButtonDropDown Header="Options" ColorClass="ButtonWithBackground" dc:Ribbon.KeyTip="T">
<dc:ButtonDropDown.Image>
<Image Source="images/Options.png" />
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
<dc:ButtonDropDown Header="Exit RibbonPad" ColorClass="ButtonWithBackground" Margin="6,0,0,0" dc:Ribbon.KeyTip="X">
<dc:ButtonDropDown.Image>
<Image Source="images/Exit.png" />
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
</dc:ApplicationMenu.AppItems>

<!-- Most Recently Used Items -->
<dc:ApplicationMenu.MruItems>
<TextBlock MinWidth="200" FontWeight="Bold">Recent Documents</TextBlock>
<Separator/>
<dc:ButtonDropDown Header="_1. ThemeAware.doc" dc:Ribbon.KeyTip="1"/>
<dc:ButtonDropDown Header="_2. ShortNews.doc" dc:Ribbon.KeyTip="2"/>
<dc:ButtonDropDown Header="_3. DevComponents.doc" dc:Ribbon.KeyTip="3"/>
<dc:ButtonDropDown Header="_4. WpfRibbon.doc" dc:Ribbon.KeyTip="4"/>
</dc:ApplicationMenu.MruItems>

<!-- Document Commands etc.-->
<dc:ButtonDropDown Header="New" Style="{DynamicResource AppMenuCommandButton}" dc:Ribbon.KeyTip="N">
<dc:ButtonDropDown.Image>
<Image Source="images/Document32.png" />
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
<dc:ButtonDropDown Header="Open" Style="{DynamicResource AppMenuCommandButton}" dc:Ribbon.KeyTip="O">
<dc:ButtonDropDown.Image>
<Image Source="images/FolderOpen32.png" />
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
<dc:ButtonDropDown Header="Save" Style="{DynamicResource AppMenuCommandButton}" dc:Ribbon.KeyTip="S">
<dc:ButtonDropDown.Image>
<Image Source="images/Save32.png" />
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
<dc:ButtonDropDown Header="Save As..." Style="{DynamicResource AppMenuCommandButton}" dc:Ribbon.KeyTip="A">
<dc:ButtonDropDown.Image>
<Image Source="images/SaveAs32.png" />
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
<Separator Style="{DynamicResource AppMenuSeparator}"/>
<dc:ButtonDropDown Header="Print..." Style="{DynamicResource AppMenuCommandButton}" dc:Ribbon.KeyTip="P">
<dc:ButtonDropDown.Image>
<Image Source="images/Print32.png" />
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
<Separator Style="{DynamicResource AppMenuSeparator}"/>
<dc:ButtonDropDown Header="Close" Style="{DynamicResource AppMenuCommandButton}" dc:Ribbon.KeyTip="C">
<dc:ButtonDropDown.Image>
<Image Source="images/FolderClosed32.png" />
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
</dc:ApplicationMenu>
</dc:Ribbon.ApplicationMenu>



In the markup above you will notice usage of the styles for certain elements. Styles are used to define common settings for the controls. Here is the markup for the styles used above, place this just below the RibbonWindow declaration in your markup:


<dc:RibbonWindow.Resources>
<Style x:Key="AppMenuCommandButton" TargetType="{x:Type dc:ButtonDropDown}">
<Setter Property="Padding" Value ="4,2,4,2"/>
</Style>
<Style x:Key="AppMenuSeparator" TargetType="{x:Type Separator}">
<Setter Property="Margin" Value ="40,0,0,0"/>
</Style>
</dc:RibbonWindow.Resources>

3. Defining the Quick Access Toolbar

Quick Access Toolbar is specified by setting the Ribbon.QuickAccessToolbar property to an instance of the Qat control. Here is simple markup which shows that:


<dc:Ribbon.QuickAccessToolbar>
<dc:Qat>
<dc:ButtonDropDown Header="Save" PartVisibility="ImageOnly" dc:Ribbon.KeyTip="1">
<dc:ButtonDropDown.Image>
<Image Source="images/Save.png" Width="16" Height="16"/>
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
<dc:ButtonDropDown Header="New" PartVisibility="ImageOnly" dc:Ribbon.KeyTip="2">
<dc:ButtonDropDown.Image>
<Image Source="images/NewDocument.png" Width="16" Height="16"/>
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>
<dc:QatCustomizeButton />
</dc:Qat>
</dc:Ribbon.QuickAccessToolbar>



Notice the usage of the QatCustomizeButton control. You simply include this control as last control in the Quick Access Toolbar to provide the customization button that allows end user to minimize, maximize ribbon and change the Quick Access Toolbar position.

4. Defining the Ribbon Tabs

Ribbon tabs are defined as the main content of the Ribbon control. They are defined as instances of RibbonTab control. Here is how you define Home tab:


<dc:RibbonTab Header="Home" dc:Ribbon.KeyTip="H">



Note that you can add controls other than the RibbonTab and they will appear on the same line as tabs. Here is how you define the help button and align it to the right:


<dc:ButtonDropDown Header="Help" dc:RibbonTabPanel.PanelAlignment="Right" PartVisibility="ImageOnly" dc:Ribbon.KeyTip="H">
<dc:ButtonDropDown.Image>
<Image Source="images/Help.png"/>
</dc:ButtonDropDown.Image>
</dc:ButtonDropDown>

5. Adding content to the Ribbon Tabs, Ribbon Bar controls

To add content to the Ribbon Tabs add as content instance of the RibbonBarPanel control with the height specified. To the panel add instances of RibbonBar control. Panel provides the appearance for the tab content and automatic sizing support for the RibbonBar controls.

Here is the markup that adds the single RibbonBar control to the RibbonTab:


<dc:RibbonTab Header="Home" dc:Ribbon.KeyTip="H">
<dc:RibbonBarPanel Height="85">
<dc:RibbonBar Header="Clipboard" Name="ribbonBarClipboard" Padding="3" LaunchDialog="DialogLauncherClicked" ResizeOrderIndex="1" dc:Ribbon.KeyTip="FO">
<dc:ButtonDropDown Header="Paste" ImagePosition="Top" dc:RibbonBar.MinAutoSizeHint="Medium" ExpandPosition="Bottom" PopupType="Menu" ContentExpands="true" VerticalContentAlignment="Center" dc:Ribbon.KeyTip="V" Command="ApplicationCommands.Paste">
<dc:ButtonDropDown.Image>
<Image Source="images/Paste32.png" />
</dc:ButtonDropDown.Image>
<dc:ButtonDropDown.ToolTip>
<dc:SuperToolTip Header="Paste (Ctrl+V)" Footer="Press F1 for help...">
<TextBlock TextWrapping="Wrap" Width="180">Paste the contents of the Clipboard</TextBlock>
</dc:SuperToolTip>
</dc:ButtonDropDown.ToolTip>
<dc:ButtonDropDown Header="Paste" Role="MenuItem" dc:Ribbon.KeyTip="P"/>
<dc:ButtonDropDown Header="Paste Special..." Role="MenuItem" dc:Ribbon.KeyTip="S"/>
</dc:ButtonDropDown>
<dc:ButtonDropDown Header="Cut" dc:Ribbon.KeyTip="X">
<dc:ButtonDropDown.Image>
<Image Source="images/Cut.png" />
</dc:ButtonDropDown.Image>
<dc:ButtonDropDown.ToolTip>
<dc:SuperToolTip Header="Cut (Ctrl+X)">
<TextBlock TextWrapping="Wrap" Width="180">Cut the selection from the document and put it on the Clipboard.</TextBlock>
</dc:SuperToolTip>
</dc:ButtonDropDown.ToolTip>
</dc:ButtonDropDown>
<dc:ButtonDropDown Header="Copy" dc:Ribbon.KeyTip="C">
<dc:ButtonDropDown.Image>
<Image Source="images/Copy.png" />
</dc:ButtonDropDown.Image>
<dc:ButtonDropDown.ToolTip>
<dc:SuperToolTip Header="Copy (Ctrl+C)">
<TextBlock TextWrapping="Wrap" Width="180">Copy the selection and put it on the Clipboard.</TextBlock>
</dc:SuperToolTip>
</dc:ButtonDropDown.ToolTip>
</dc:ButtonDropDown>


</dc:RibbonBarPanel>
</dc:RibbonTab>





Markup above introduces number of new properties. From top to bottom here is the explanation:


RibbonBar.LaunchDialog is the event that occurs when RibbonBar dialog launcher button in bottom right corner is pressed.

RibbonBar.ResizeOrderIndex property specifies the automatic resize order index for the RibbonBar control. RibbonBar controls on the same panel with the highest value is resized first as the window size is reduced.

SuperTooltip control which is assigned to the Tooltip property specifies the Super Tooltip for a button.