I have complex ribbon composition that goes entirely wrong when running on a small screen (see attachment)
This the ribbon layout:
This the imaging group
When the screen is maximized it works as expected.
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.