Ribbon菜单栏布局和调整大小
原文地址:http://blog.csdn.net/kyranhan/article/details/6641076
设置菜单组的变化顺序。窗口大小调整时,GroupSizeReductionOrder设置多个菜单组的先后顺序,下图显示当逐渐缩小窗口时,菜单的变化
View Code
<ribbon:RibbonTab x:Name="HomeTab" Header="Home" GroupSizeReductionOrder="tbdGroup2, tbdGroup1, editGroup"> <ribbon:RibbonGroup x:Name="editGroup" Header="Edit"> <ribbon:RibbonSplitButton Label="Button1" LargeImageSource="Images/LargeIcon.png"> <ribbon:RibbonApplicationMenuItem Header="Copy aaa"/> <ribbon:RibbonApplicationMenuItem Header="Copy bbb" ImageSource="Images\SmallIcon.png"/> </ribbon:RibbonSplitButton> <ribbon:RibbonButton Label="Button2" SmallImageSource="Images\SmallIcon.png" LargeImageSource="Images\LargeIcon.png"/> <ribbon:RibbonButton Label="Button3" SmallImageSource="Images\SmallIcon.png" LargeImageSource="Images\LargeIcon.png"/> <ribbon:RibbonButton Label="Button4" SmallImageSource="Images\SmallIcon.png" LargeImageSource="Images\LargeIcon.png"/> <ribbon:RibbonButton Label="Button5" SmallImageSource="Images\SmallIcon.png" LargeImageSource="Images\LargeIcon.png"/> </ribbon:RibbonGroup> <ribbon:RibbonGroup x:Name="tbdGroup1" Header="TBD1"> <ribbon:RibbonSplitButton Label="Button1" LargeImageSource="Images/LargeIcon.png"> <ribbon:RibbonApplicationMenuItem Header="Copy to Other Side"/> <ribbon:RibbonApplicationMenuItem Header="Copy from" ImageSource="Images\SmallIcon.png"/> </ribbon:RibbonSplitButton> <ribbon:RibbonButton Label="Button2" SmallImageSource="Images\SmallIcon.png" LargeImageSource="Images\LargeIcon.png"/> </ribbon:RibbonGroup> <ribbon:RibbonGroup x:Name="tbdGroup2" Header="TBD2"> <ribbon:RibbonSplitButton Label="Button1" LargeImageSource="Images/LargeIcon.png"> <ribbon:RibbonApplicationMenuItem Header="Copy to Other Side"/> <ribbon:RibbonApplicationMenuItem Header="Copy from" ImageSource="Images\SmallIcon.png"/> </ribbon:RibbonSplitButton> <ribbon:RibbonButton Label="Button2" SmallImageSource="Images\SmallIcon.png" LargeImageSource="Images\LargeIcon.png"/> </ribbon:RibbonGroup> </ribbon:RibbonTab>
设置单个组内空间的变化顺序。当菜单大小调整时,GroupSizeDefinitions按照下表的关系设置每个组中控件的布局
IsLabelVisible | ||
Has a large image and up to two lines for a label. | RibbonImageSize.Large | true |
Has a small image and one line for a label. | RibbonImageSize.Small | true |
Has just a small image and no label. | RibbonImageSize.Small | false |
View Code
<ribbon:RibbonGroup.GroupSizeDefinitions> <ribbon:RibbonGroupSizeDefinitionBaseCollection> <ribbon:RibbonGroupSizeDefinition> <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" /> <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" /> <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" /> <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" /> <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" /> </ribbon:RibbonGroupSizeDefinition> </ribbon:RibbonGroupSizeDefinitionBaseCollection> </ribbon:RibbonGroup.GroupSizeDefinitions>