Controls in RadRibbonBackstageItem : oversizing issue

18 posts, 0 answers
  1. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 18 Aug 2011 Link to this post

    Hi,

    I'm trying to use the I'm trying to use the RadRibbonView with the RadRibbonBackstage.
    C# 4.0 with assemblies v2011.2.712.40

    In a RadRibbonBackstageItem, I have put some listboxes, to let the user select items, before clicking on a button. Here is a stripped source.

    <telerik:RadRibbonWindow x:Class="FrmMain"
            Height="700" Width="1000"
            WindowState="Maximized" WindowStartupLocation="CenterOwner" IconVisibility="Collapsed" Title="Title">
        <Grid x:Name="RootGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <telerik:RadRibbonView x:Name="ribbonView" ApplicationName="App" BackstageClippingElement="{Binding ElementName=RootGrid}">
                <telerik:RadRibbonView.Backstage>
                    <telerik:RadRibbonBackstage>
                        <telerik:RadRibbonBackstageItem Header="Open" IsDefault="True">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>
     
                                <Grid Margin="15 15 0 15">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="Title" FontSize="14" FontWeight="Bold" Margin="0 0 0 2" />
                                    <Rectangle Grid.Row="1" Height="1" Fill="{StaticResource DottedLineBrush}" />
                                    <ListBox Grid.Row="2" x:Name="lstOpenOne" Margin="0 4 0 0">
                                        <ListBox.ItemTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <Border BorderThickness="1" CornerRadius="4">
                                                        <TextBlock Text="{Binding Path=Label}" />
                                                    </Border>
                                                </Grid>
                                            </DataTemplate>
                                        </ListBox.ItemTemplate>
                                    </ListBox>
                                </Grid>
     
                                <Rectangle Margin="10, 5" Grid.Column="1" Width="1" Fill="{StaticResource VerticalSplitterBrush}" />
     
                                <Grid Grid.Column="2">
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
     
                                    <StackPanel Grid.Row="0" Margin="15 15 0 15">
                                        <TextBlock Text="Type" FontSize="14" FontWeight="Bold" Margin="0 0 0 2" />
                                        <Rectangle Height="1" Fill="{StaticResource DottedLineBrush}" />
                                        <ListView x:Name="lstOpen2" Margin="0 4 0 0" />
                                    </StackPanel>
                                    <StackPanel Grid.Row="1" Margin="15 15 0 15">
                                        <TextBlock Text="Zone d'acquisition" FontSize="14" FontWeight="Bold" Margin="0 0 0 2" />
                                        <Rectangle Height="1" Fill="{StaticResource DottedLineBrush}" />
                                        <ListView x:Name="lstOpen3" Margin="0 4 0 0">
                                            <ListBox.ItemTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding Path=Name}" />
                                                </DataTemplate>
                                            </ListBox.ItemTemplate>
                                        </ListView>
                                    </StackPanel>
     
                                    <Button Grid.Row="2" Margin="0 4 0 0" Content="Open" x:Name="btnOpen" Click="btnOpen_Click" />
                                </Grid>
                            </Grid>
                        </telerik:RadRibbonBackstageItem>
                        <telerik:RadRibbonBackstageItem Header="Item 2">
                            <TextBlock Text="Blablabla" />
                        </telerik:RadRibbonBackstageItem>
                        <telerik:RadRibbonBackstageItem Header="Item 3">
                            <TextBlock Text="Blablabla too" />
                        </telerik:RadRibbonBackstageItem>
                    </telerik:RadRibbonBackstage>
                </telerik:RadRibbonView.Backstage>
     
                <telerik:RadRibbonTab Header="Tab">
                    <!-- Nothing related here-->
                </telerik:RadRibbonTab>
     
            </telerik:RadRibbonView>
             
            <Grid Grid.Row="1">
                <!-- Some controls -->
            </Grid>
            <Grid Grid.Row="2">
                <!-- Some controls -->
            </Grid>
        </Grid>
    </telerik:RadRibbonWindow>

    When my listboxes are populated with lots of items, the backstage item container is resized according to the listbox desired full height, 
    making the backstage scrollbar being shown, instead of listbox's scrollbar.

    Is this a small bug, or is there a thing I have missed ?

    Thanks.

    Damien
  2. Simon Williams
    Simon Williams avatar
    13 posts
    Member since:
    Jun 2010

    Posted 19 Aug 2011 Link to this post

    Damien,

    I can't help you but can offer a +1 on your problem. We host an MRU list on the backstage view; if one of the items it quite long then the horizontal scrollbar appears instead of trimming the text like we'd hoped. I haven't found a workaround for this yet.

    Simon
  3. UI for WPF is Visual Studio 2017 Ready
  4. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Aug 2011 Link to this post

    Hello guys,

    This issue is caused by the default ControlTemplate of the RadRibbonBackstage. The root element of the control is a ScrollViewer and since its size is measured with infinity the controls placed inside the BackstageItems Content will be measured with infinity thus not displaying internal scroll bars.

    This is why you will need to apply a custom style for the RadRibbonBackstage, where the root ScrollViewer is removed thus placing the RadRibbonBackstage ControlElements in a Grid. I attached a sample project with such custom style.

    @Damien, you will need to make a few more changes to your layout as you placed two of the ListBoxes in StackPanels. However, the StackPanel as the ScrollViewer is also measuring its content with Infinity and therefore the size of the ListBoxes placed inside StackPanels, won't be limited and their scroll bars won't appear. This is why in the attached sample I slightly changed the layout of the second column in the first BackstageItem so that all ListBoxes/ListViews can display their own scroll bars when they have to display a large amount of data.

    Regards,
    Tina Stancheva
    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 >>

  5. Simon Williams
    Simon Williams avatar
    13 posts
    Member since:
    Jun 2010

    Posted 24 Aug 2011 Link to this post

    Tina that fixed my issue thank-you.

    Only problem now is our application uses the Telerik Windows 7 Theme. How do I get the Windows 7 Theme template for the backstage?

    Regards
  6. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Aug 2011 Link to this post

    Hello Simon,

    If you download the source code of the controls, you'll find a Themes folder where you can open the Themes.Sources_WPF solution. It contains the styles for the RadControls for WPF in all Telerik themes. Then in the Telerik.Windows.Themes.Windows7_WPF project in the Themes\Windows7 folder, you will find a RibbonView.xaml file where the RibbonBackstage style for Windows7theme is defined.

    I attached a solution with the RibbonBackstage Windows7 style. I hope that will help you.

    Greetings,
    Tina Stancheva
    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 >>

  7. Simon Williams
    Simon Williams avatar
    13 posts
    Member since:
    Jun 2010

    Posted 30 Aug 2011 Link to this post

    Excellent. Thanks for your help.
  8. Mustafa Ayas
    Mustafa Ayas avatar
    1 posts
    Member since:
    May 2006

    Posted 10 Apr 2012 Link to this post

    Hi, 

    I have an additional problem similar to this case.

    We have created a myRibbonView control inherited  from radribbonview control. We didn't add any style or template into the original radribbonview, just renamed it.

    the problem is, when we use BackstageClippingElement with our control it doesn't work. telerik:RadRibbonView is OK, but my:MyRibbonView is not.

    all other properties works fine.

    Do you have any idea why?

    Mustafa.

    PS: content of the both ribbonviews are the same. that's why I didn't add. the only difference is their names. 

    <Grid x:Name="LayoutRoot">
    <!-- This ribbon is not clipping as it fits into the Grid-->  
    <my:myRibbonView  BackstageClippingElement="{Binding ElementName=LayoutRoot}"  >
    ...
    </
    my:myRibbonView>

    <!-- This one does.--> 
    <telerik:RadRibbonView  BackstageClippingElement="{Binding ElementName=LayoutRoot}"  >
    ...
    </
    telerik:RadRibbonView>
     
    </Grid>
  9. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 12 Apr 2012 Link to this post

    Hi Mustafa,

    I tried to reproduce the problem but was not able to so could you please examine the attached sample project? It uses the binaries from the Q1 2012 Service pack.

    Greetings,
    Viktor Tsvetkov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  10. Nicolas
    Nicolas avatar
    10 posts
    Member since:
    Jun 2011

    Posted 30 May 2012 Link to this post

    Is there a way to reference resources from Telerik dll without having to copy them in our code.

    For instance : 

    - I want to copy the style for the RadRibbonBackstage so that I can override the template
    - I want to copy the ControlTemplate of the RadTabControl in the setter value of the style
    - I want to comment the ScrollViewer

    => I want to be able to refer to brushes and other resource that I'm not modifying in the Telerik DLL ... is it possible?
  11. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 31 May 2012 Link to this post

    Hello Nicolas,

    With the coming 2012 Q2 release we will provide new theming mechanism based on implicit styles and also will provide binaries with the corresponding themes (implicit styles) which you will be able to add to you project and merge the necessary dictionaries from them (and use the styles and other resources which are included in the resource dictionaries).

    All the best,
    Viktor Tsvetkov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  12. Nicolas
    Nicolas avatar
    10 posts
    Member since:
    Jun 2011

    Posted 31 May 2012 Link to this post

    Thanks a lot, I will wait for the Q2 2012!
  13. Rainer
    Rainer avatar
    1 posts
    Member since:
    Sep 2008

    Posted 04 Sep 2012 Link to this post

    Can you please provide an example how to to this the actual relase of the controls?
  14. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 05 Sep 2012 Link to this post

    Hello Rainer,

    If you'd like to use the implicit styles mechanism in your application, you can follow this tutorial. If you encounter any issues or questions, please let us know,

    Greetings,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  15. AEDT developer
    AEDT developer avatar
    9 posts
    Member since:
    May 2012

    Posted 20 Mar 2013 Link to this post

    original template:
    
    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                                Padding="-1"
                                VerticalScrollBarVisibility="Auto">
                                <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme />
                                </telerik:StyleManager.Theme>


    Shouldn't the ScrollViewer inherit from the parent using TemplateBinding or something similar ? That would be the best solution. Now it is just a hack. I don't like the solution provided and would like to see this fixed in a future version.
  16. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 25 Mar 2013 Link to this post

    Hello Andrea,

    You are right that after extracting the style of the RadRibbonView.Backstage the theme is applied like that. This code is generated by your extracting tool (Blend) and we do not have control over it. In order to apply a customized and clean style (like our themes) to a native control (e.g. ScrollViewer) you have to use one of the following approaches:
    • Setting implicit styles
    • Using our StylleManager (attached property)
    Please have in mind that we usually suggest to our clients to use implicit styles. They will allow you to easily further customize our themes by using NoXaml dlls and merging the resource dictionaries used by the theme. Please give this approach a try and let us know if you have any other questions.

     Regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  17. AEDT developer
    AEDT developer avatar
    9 posts
    Member since:
    May 2012

    Posted 25 Mar 2013 Link to this post

    Implicit styles or creating my own style is one way to solve the problem. But i'm referring to a long term solution where Telerik updates their original style for the Backstage control. The ScrollViewer should inherit from the templated control using TemplateBinding. I'm advising/asking Telerik to update their original style for the BackStage control.

    In the meantime i'm using my own style.
  18. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 28 Mar 2013 Link to this post

    Hi Andrea,

    At the moment we support two different theming  approaches for our controls - implicit styles and applying themes through our StyleManager.

    The default style/ControlTemplate of our controls rely on the StyleManager approach. With this approach, we apply an explicit theme to the controls through the StyleManager.Theme property and unfortunately as this is an attached property that uses internal logic to find and apply the proper style to an element, we can't use TemplateBinding to apply it to elements in a ControlTemplate.

    This is why the ScrollViewer in the default ControlTemplate of the RibbonBackstage is using the telerik:StyleManager.Theme={StaticResource ...} syntax to get the proper theme style. And when ExpressionBlend extracts this style, it changes this syntax to its longer version:
    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                Padding="-1"
                VerticalScrollBarVisibility="Auto">
        <telerik:StyleManager.Theme>
            <telerik:Office_BlackTheme />
        </telerik:StyleManager.Theme>
    </ScrollViewer>

    And as we need to keep the backwards compatibility and allow our customers to be able to use both the StyleManager to set a theme and implicit styles, we can't change this approach at the moment.

    However, I want to assure you that we appreciate your feedback and we will have it in mind during our discussions how to improve our styling mechanism and implementation.

    Regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  19. AEDT developer
    AEDT developer avatar
    9 posts
    Member since:
    May 2012

    Posted 28 Mar 2013 Link to this post

    Thank you for the explanation.
Back to Top
UI for WPF is Visual Studio 2017 Ready