Fluent Ribbon 第二步 创建工具栏

上一节，完成了Ribbon的创建，可以显示Ribbon的基本轮廓，下一步我们即将创建具体的工具区，这里我们主要说明几个关键的类

1、RibbonTabItem 标签页

创建标签页，标签页主要包含在Ribbon节点之下，其定义方式如下：

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

<Fluent:RibbonTabItem Header="项目" IsSelected="True"></Fluent:RibbonTabItem>

</Fluent:Ribbon>

显示结果：

2、RibbonGroupBox Ribbon分组

标签页包含的主要控件RibbonGroupBox，RibbonGroupBox下面可以包含诸多控件，其定义格式如下：

<Fluent:RibbonTabItem Header="项目" IsSelected="True">

<Fluent:RibbonGroupBox KeyTip="FG"

Header="项目创建"

IsLauncherVisible="False"

x:Name="groupLL">

<Fluent:Button LargeIcon=""></Fluent:Button>

<Fluent:Button LargeIcon=""></Fluent:Button>

</Fluent:RibbonGroupBox>

其显示界面如下：

3、Button、ToggleButton按钮

• 主要属性Size

按钮有size有三个状态：Small Middle Large

Small：只显示icon图标，不显示文本

Middle：显示icon图标和文本

Large:显示LargeIcon图标和文本

其代码形式如下：

<Fluent:RibbonTabItem Header="项目" IsSelected="True">

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

<Fluent:Button Icon="images/BrownLarge.png" 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>

其显示结果如下

4、CheckBox选择框

其定义如下，其虽然有icon和size等属性，但是不受其影响

<Fluent:RibbonGroupBox Header="选择框" >

<Fluent:CheckBox x:Name="IsCheckBox1" Size="Large" IsChecked="True" Header="选择1"></Fluent:CheckBox>

<Fluent:CheckBox x:Name="IsCheckBox2" Header="选择1"></Fluent:CheckBox>

<Fluent:CheckBox x:Name="IsCheckBox3" Header="选择1"></Fluent:CheckBox>

</Fluent:RibbonGroupBox>

5、ComboBox控件

其基本定义如下：

<Fluent:RibbonGroupBox Header="下拉框" >

<Fluent:ComboBox IsEditable="true"

InputWidth="150"

Header="字体"

ItemsSource="{Binding FontsViewModel.FontsData}"

KeyTip="FD"></Fluent:ComboBox>

<Fluent:ComboBox IsEditable="False"

InputWidth="150"

Header="字体"

ItemsSource="{Binding FontsViewModel.FontsData}"

KeyTip="FD"></Fluent:ComboBox>

<Fluent:ComboBox IsEditable="False"

InputWidth="150"

Header="字体"

ItemsSource="{Binding FontsViewModel.FontsData}"

KeyTip="FD"></Fluent:ComboBox>

</Fluent:RibbonGroupBox>

显示界面如下：