[Solved] RadOrderedWrapPanel nog functioning correctly on small screens

[HDC]

I have complex ribbon composition that goes entirely wrong when running on a small screen (see attachment)

This the ribbon layout:

<telerikRibbon:RadOrderedWrapPanel CompressedItemsOrder="0,3,2,4,1">
            <StackPanel Orientation="Horizontal">
                <telerikRibbon:RadRibbonComboBox Width="135" SelectedIndex="1" telerikRibbon:ScreenTip.Title="Font"
                                    telerikRibbon:ScreenTip.Description="Change the font face."
                                    telerik:KeyTipService.AccessText="FF"
                  ItemsSource="{Binding FontFamilies, Source={StaticResource vmSlidedeckRibbonTabVM}}"
                  SelectedItem="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.FontFamily, Mode =TwoWay}">
                  <telerik:RadComboBox.ItemTemplate>
                    <DataTemplate>
                      <TextBlock Text="{Binding}" FontFamily="{Binding}" Foreground="Black" />
                    </DataTemplate>
                  </telerik:RadComboBox.ItemTemplate>
                </telerikRibbon:RadRibbonComboBox>
                <telerikRibbon:RadRibbonComboBox Name="comboFontSize" Width="60" SelectedIndex="0"
                                    telerikRibbon:ScreenTip.Title="Font Size"
                                    telerikRibbon:ScreenTip.Description="Change the font size."
                                    telerik:KeyTipService.AccessText="FS"
                  ItemsSource="{Binding FontSizes, Source={StaticResource vmSlidedeckRibbonTabVM}}"
                  SelectedItem="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.FontSize, Mode =TwoWay}">
                </telerikRibbon:RadRibbonComboBox>
            </StackPanel>
            <telerikRibbon:RadButtonGroup>
        <telerikRibbon:RadRibbonButton SmallImage="/_EPSlidedeck;component/Images/FontIcons/font-increasesize.png"
                                    telerikRibbon:ScreenTip.Title="Grow Font" telerik:KeyTipService.AccessText="FG"
                  Command="{Binding IncreaseFontCommand, Source={StaticResource vmSlidedeckRibbonTabVM}}"
                  CommandParameter="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem, Mode = OneWay}"/>
        <telerikRibbon:RadRibbonButton SmallImage="/_EPSlidedeck;component/Images/FontIcons/font-decreasesize.png"
                                    telerikRibbon:ScreenTip.Title="Shrink Font" telerik:KeyTipService.AccessText="FH"
                  Command="{Binding DecreaseFontCommand, Source={StaticResource vmSlidedeckRibbonTabVM}}"
                  CommandParameter="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem, Mode = OneWay}"/>
            </telerikRibbon:RadButtonGroup>
            <telerikRibbon:RadButtonGroup>
                <telerikRibbon:RadRibbonButton SmallImage="/_EPSlidedeck;component/Images/FontIcons/ClearFormatting16.png" Text="Clear Formatting"
                                    telerikRibbon:ScreenTip.Title="Clear Formatting" telerik:KeyTipService.AccessText="E"
                  Command="{Binding ResetFontCommand, Source={StaticResource vmSlidedeckRibbonTabVM}}"
                  CommandParameter="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem, Mode = OneWay}"
                                               />
            </telerikRibbon:RadButtonGroup>
            <telerikRibbon:RadButtonGroup>
                <telerikRibbon:RadRibbonToggleButton x:Name="BoldButton" SmallImage="/_EPSlidedeck;component/Images/FontIcons/bold.png"
                                    telerikRibbon:ScreenTip.Title="Bold"
                                    telerikRibbon:ScreenTip.Description="Make the selected text bold."
                                    telerik:KeyTipService.AccessText="1"
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.FontWeight,
                  Converter={StaticResource vmFontWeightToIsBoldVM},Mode =TwoWay}" />
                <telerikRibbon:RadRibbonToggleButton x:Name="ItalicButton" SmallImage="/_EPSlidedeck;component/Images/FontIcons/italic.png"
                                    telerikRibbon:ScreenTip.Title="Italic"
                                    telerikRibbon:ScreenTip.Description="Italicize the selected text."
                                    telerik:KeyTipService.AccessText="2"
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.FontStyle,
                  Converter={StaticResource vmFontStyleToIsItalicVM}, Mode=TwoWay}"/>
                <telerikRibbon:RadRibbonToggleButton x:Name="UnderlineButton" SmallImage="/_EPSlidedeck;component/Images/FontIcons/underline.png"
                                    telerikRibbon:ScreenTip.Title="Underline"
                                    telerikRibbon:ScreenTip.Description="Underline the selected text."
                                    telerik:KeyTipService.AccessText="3"
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.TextDecoration,
                  Converter={StaticResource vmDecorationToIsUnderlineVM}, Mode=TwoWay}">
                </telerikRibbon:RadRibbonToggleButton>
      </telerikRibbon:RadButtonGroup>
      <telerikRibbon:RadButtonGroup>
        <telerikRibbon:RadRibbonRadioButton SmallImage="/_EPSlidedeck;component/Images/FontIcons/alignleft.png"
                                    telerikRibbon:ScreenTip.Title="Align left"
                                    telerikRibbon:ScreenTip.Description="Align text to the left"
                  telerik:KeyTipService.AccessText="4"
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.Alignment,
                  Converter={StaticResource vmTextAlignmentToIsLeftVM}, Mode=TwoWay}"/>
        <telerikRibbon:RadRibbonRadioButton SmallImage="/_EPSlidedeck;component/Images/FontIcons/aligncenter.png"
                                    telerikRibbon:ScreenTip.Title="Align Center"
                                    telerikRibbon:ScreenTip.Description="Center text"
                  telerik:KeyTipService.AccessText="5"
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.Alignment,
                  Converter={StaticResource vmTextAlignmentToIsCenterVM}, Mode=TwoWay}"/>
        <telerikRibbon:RadRibbonRadioButton SmallImage="/_EPSlidedeck;component/Images/FontIcons/alignright.png"
                                    telerikRibbon:ScreenTip.Title="Align Right"
                                    telerikRibbon:ScreenTip.Description="Align text to the right"
                  telerik:KeyTipService.AccessText="6"
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.Alignment,
                  Converter={StaticResource vmTextAlignmentToIsRightVM}, Mode=TwoWay}"/>
      </telerikRibbon:RadButtonGroup>
      <telerikRibbon:RadButtonGroup>
        <telerik:RadColorPicker SelectedColor="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.TextColor,
                  Mode=TwoWay}" Height="20" Width="32">
        </telerik:RadColorPicker>
      </telerikRibbon:RadButtonGroup>
    </telerikRibbon:RadOrderedWrapPanel>

This the imaging group

<telerikRibbon:RadRibbonGroup Header="Imaging" telerikRibbon:ScreenTip.Title="Imaging"
            DialogLauncherVisibility="Collapsed"
                        >
    <telerikRibbon:RadRibbonGroup.Variants>
      <telerikRibbon:GroupVariant Variant="Medium" Priority="3" />
      <telerikRibbon:GroupVariant Variant="Small" Priority="7" />
      <telerikRibbon:GroupVariant Variant="Collapsed" Priority="8" />
    </telerikRibbon:RadRibbonGroup.Variants>
    <telerikRibbon:RadOrderedWrapPanel CompressedItemsOrder="0,3,2,4,1">
      <telerikRibbon:RadButtonGroup>
        <telerikRibbon:RadRibbonButton Text="New"
                                   Size ="Small"
                                   LargeImage="/_EPSlidedeck;component/Images/Pictures-icon.png"
                                   Command="{Binding AddImageCommand, Source={StaticResource vmSlidedeckRibbonTabVM}}"
                                   CommandParameter="{Binding Source={StaticResource DataContextProxy},
                                   Path=DataSource, Mode = OneWay}"/>
      </telerikRibbon:RadButtonGroup>

      <telerikRibbon:RadButtonGroup>
          <telerikRibbon:RadRibbonRadioButton Size="Small"
                  SmallImage="/_EPSlidedeck;component/Images/layer-resize-icon.png"
                                    telerikRibbon:ScreenTip.Title="Fill"
                                    telerikRibbon:ScreenTip.Description="The image is stretched to fill the surface of the image."
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.StretchImage,
                  Converter={StaticResource vmStretchToIsFillStretchVM},Mode =TwoWay}"
                                          />
          <telerikRibbon:RadRibbonRadioButton Size="Small"
                  SmallImage="/_EPSlidedeck;component/Images/layer-resize-icon.png"
                                    telerikRibbon:ScreenTip.Title="Uniform"
                                    telerikRibbon:ScreenTip.Description="The images is stretched to fill the surface of the image. Proportion is preserved and the entire image is shown."
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.StretchImage,
                  Converter={StaticResource vmStretchToIsUniformStretchVM},Mode =TwoWay}"/>

        <telerikRibbon:RadRibbonRadioButton Size="Small"
                  SmallImage="/_EPSlidedeck;component/Images/layer-resize-icon.png"
                                    telerikRibbon:ScreenTip.Title="Uniform to fill"
                                    telerikRibbon:ScreenTip.Description="The image is stretched to fill the surface of the image. Proportion is preserved but some parts of the image may not be shown."
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.StretchImage,
                  Converter={StaticResource vmStretchToIsUniformToFillStretchVM},Mode =TwoWay}"/>

        <telerikRibbon:RadRibbonRadioButton Size="Small"
                  SmallImage="/_EPSlidedeck;component/Images/layer-resize-icon.png"
                                    telerikRibbon:ScreenTip.Title="No Stretching"
                                    telerikRibbon:ScreenTip.Description="Shows the image using the original resolution."
                  IsChecked="{Binding Source={StaticResource DataContextProxy},
                  Path=DataSource.PropertyGridItem.StretchImage,
                  Converter={StaticResource vmStretchToIsNoneStretchVM},Mode =TwoWay}"/>

      </telerikRibbon:RadButtonGroup>
      <telerikRibbon:RadButtonGroup>
        <telerikRibbon:RadRibbonButton Size="Small"
                  SmallImage="/_EPSlidedeck;component/Images/shape-rotate-anticlockwise-icon.png"
                                    telerikRibbon:ScreenTip.Title="Rotation"
                                    telerikRibbon:ScreenTip.Description="Rotate the image to the Left"
                  />
        <telerikRibbon:RadRibbonButton Size="Small"
                  SmallImage="/_EPSlidedeck;component/Images/shape-rotate-clockwise-icon.png"
                                    telerikRibbon:ScreenTip.Title="Rotation"
                                    telerikRibbon:ScreenTip.Description="Rotate the image to the Right"
                  />

      </telerikRibbon:RadButtonGroup>
    </telerikRibbon:RadOrderedWrapPanel>
  </telerikRibbon:RadRibbonGroup>

When the screen is maximized it works as expected.

[Petar Mladenov]

Hi Peter,

 We are aware of this issue in the RadRibbonView and it is caused by the RadRibbonGroups and their inner panels. We  have also logged it previously in our PITS where you can track its status. Please excuse us for the inconvenience caused.

Kind regards,
Petar Mladenov
the Telerik team