RadOrderedWrapPanel nog functioning correctly on small screens

2 posts, 0 answers
  1. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 18 Aug 2011 Link to this post

    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.
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 24 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. DevCraft banner
Back to Top