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>

顯示界面如下：