首页 > 技术文章 > Fluent Ribbon 第四步 快速启动栏

minhost 2017-07-25 10:16 原文

上一节,完成了Ribbon菜单的介绍,这一节,我们将进行快速启动栏的介绍,快速启动栏是Ribbon中一个重要的功能,其像office中的头部区域。

其基本代码定义如下:

<Fluent:Ribbon Grid.Row="0">

<Fluent:Ribbon.QuickAccessItems>

<Fluent:QuickAccessMenuItem IsChecked="true">

<Fluent:Button Header="选取1" Icon="Images/Pink.png" />

</Fluent:QuickAccessMenuItem>

<Fluent:QuickAccessMenuItem Header="下拉选择" IsChecked="False" >

<Fluent:CheckBox></Fluent:CheckBox>

</Fluent:QuickAccessMenuItem>

</Fluent:Ribbon.QuickAccessItems>

</Fluent:Ribbon>

每个快速启动栏由QuickAccessItems标签说明,QuickAccessItems可以包含多个QuickAccessMenuItem,QuickAccessMenuItem可以只能包含一个控件元素,故以上代码

主要是在快速启动栏中,添加了按钮和下拉框两个快速启动对象,其显示效果如下:

顶部红色小方块吗,就是按钮的样式,但为什么CheckBox没有显示呢?这个主要和每个QuickAccessMenuItem中IsChecked的定义有关,IsChecked为true表示选中显示状态,为false则

则没有选中,显示不选中和不显示。需要调整选中和显示状态,则可以点击快速启动栏上的下拉箭头,进行操作,如图:

Target属性

Target属性是QuickAccessMenuItem的一个重要属性,其可以实现当快速启动栏和其他界面元素关联,实现快速响应的目的,例如以下案例

<Fluent:Ribbon.QuickAccessItems>

<Fluent:QuickAccessMenuItem IsChecked="true">

<Fluent:Button Header="选取1" Icon="Images/Pink.png" />

</Fluent:QuickAccessMenuItem>

<Fluent:QuickAccessMenuItem Header="下拉选择" IsChecked="False" >

<Fluent:CheckBox></Fluent:CheckBox>

</Fluent:QuickAccessMenuItem>

<Fluent:QuickAccessMenuItem IsChecked="True" Header="快速启动"

Target="{Binding Source={x:Reference kuisu}}" />

</Fluent:Ribbon.QuickAccessItems>

<Fluent:RibbonTabItem Header="按钮" IsSelected="True">

<Fluent:RibbonGroupBox KeyTip="FG" Header="项目创建" IsLauncherVisible="False" x:Name="groupLL">

<Fluent:Button Icon="images/BrownLarge.png" x:Name="kuisu" Size="Small" Header="新建1"></Fluent:Button>

<Fluent:Button Icon="images/BrownLarge.png" Size="Middle" Header="新建2"></Fluent:Button>

<Fluent:Button LargeIcon="images/BrownLarge.png" Size="Large" Header="新建2"></Fluent:Button>

</Fluent:RibbonGroupBox>

</Fluent:RibbonTabItem>

通过Target属性,实现与界面上其他按钮的功能进行关联,实现快速启动指定按钮功能

其显示效果如下:

会将新建的图标和按钮功能指定到快速启动栏上面。

推荐阅读