Ribbon菜单栏布局和调整大小

设置菜单组的变化顺序。窗口大小调整时，GroupSizeReductionOrder设置多个菜单组的先后顺序，下图显示当逐渐缩小窗口时，菜单的变化

 

            <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

             <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>

 

                            <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True"/>

                            <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>

                            <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>

                            <ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>

                            <ribbon:RibbonControlSizeDefinition ImageSize="Small"  IsLabelVisible="True"/>

 

                            <ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True"/>

                            <ribbon:RibbonControlSizeDefinition ImageSize="Collapsed" IsLabelVisible="True"/>

                            <ribbon:RibbonControlSizeDefinition ImageSize="Collapsed" IsLabelVisible="True"/>

                            <ribbon:RibbonControlSizeDefinition ImageSize="Collapsed" IsLabelVisible="True"/>

                            <ribbon:RibbonControlSizeDefinition ImageSize="Collapsed"  IsLabelVisible="True"/>