Fluent Ribbon 第三步 應用程序菜單


上一節,完成了Ribbon工具欄上部分控件的創建,本節主要介紹菜單控件的創建 。

Menu菜單,菜單有二種表現形式,下面分別介紹二種標識形式的樣式:

1、ApplicationMenu

應用程序菜單,和我們傳統的菜單形式比較相似,其主要是由眾多MenuItem組成,其MenuItem之間可以層級嵌套,其分割區域可以使用Separator和IsSplited進行區分,其基本的定義如下:

<Fluent:ApplicationMenu Header="應用程序菜單">

<Fluent:MenuItem Header="新創建" Icon="Images/GreenLarge.png">

<Fluent:MenuItem Header="項目" Icon="Images/GreenLarge.png" />

<Fluent:MenuItem Header="組件" Icon="Images/GreenLarge.png" />

</Fluent:MenuItem>

<Fluent:MenuItem Header="保存到..." Icon="Images/BlueLarge.png">

<Fluent:MenuItem Header="標准格式1"

Description="這是一個關於當前功能的描述"

ToolTip="提示信息"

Icon="Images/BlueLarge.png" />

<Fluent:MenuItem Header="標准格式2"

Description="這是一個關於當前功能的描述"

ToolTip="提示信息"

Icon="Images/BlueLarge.png" />

</Fluent:MenuItem>

<Fluent:MenuItem Header="退出"

Icon="Images/RedLarge.png"

KeyTip="X"

/>

</Fluent:ApplicationMenu>

其表現形式如下圖:

  1. Backstage 菜單方式

Backstage和office中的文件功能很相似,其主要是菜單全屏瀏覽的作用

其定義方式如下:

<Fluent:Ribbon.Menu>

<Fluent:Backstage Header="項目">

<Fluent:BackstageTabControl>

<Fluent:Button Header="保存"

Icon="Images/Save.png"

KeyTip="S" />

<Fluent:Button Header="保存為.."

Icon="Images/Save.png"

KeyTip="A"

CanAddToQuickAccessToolBar="False"

/>

<Fluent:Button Header="關閉"

Icon="Images/Exit.png"

KeyTip="X"

Command="{Binding ExitCommand}" />

</Fluent:BackstageTabControl>

</Fluent:Backstage>

</Fluent:Ribbon.Menu>

以上代碼,點擊項目菜單后,其主要表現button按鈕的效果,其顯示效果如下圖所示:

顯示的效果,右邊是一片空白,如何在右邊添加內容呢由於button按鈕只能做到按鈕的作用,故需要使用BackstageTabItem控件,實現右邊具有內容。

BackstageTabItem控件的使用采用如下方式:

<Fluent:Ribbon.Menu>

<Fluent:Backstage Header="項目">

<Fluent:BackstageTabControl>

<Fluent:BackstageTabItem Header="新建" KeyTip="T">

<StackPanel Orientation="Vertical">

<TextBlock>你是否需要新建一個新項目?</TextBlock>

<Fluent:Button Header="項目1" Width="120" Style="{DynamicResource ButtonBackstageStyle}" />

<Fluent:Button Header="項目2" Width="120" Style="{DynamicResource ButtonBackstageStyle}" />

</StackPanel>

</Fluent:BackstageTabItem>

<Fluent:Button Header="保存"

Icon="Images/Save.png"

KeyTip="S" />

<Fluent:Button Header="保存為.."

Icon="Images/Save.png"

KeyTip="A"

CanAddToQuickAccessToolBar="False"

/>

<Fluent:Button Header="關閉"

Icon="Images/Exit.png"

KeyTip="X"

Command="{Binding ExitCommand}" />

</Fluent:BackstageTabControl>

</Fluent:Backstage>

</Fluent:Ribbon.Menu>

以上代碼,產生的效果如下:

BackstageTabItem 控件中可以添加各種元素,保證其顯示結果。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM