Controls in RadRibbonBackstageItem : oversizing issue

[Dédé]

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"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        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

[Simon Williams]

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

[Tina Stancheva]

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

[Simon Williams]

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

[Tina Stancheva]

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

[Simon Williams]

Excellent. Thanks for your help.

[Mustafa Ayas]

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>

[Viktor Tsvetkov]

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

[Nicolas]

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?

[Viktor Tsvetkov]

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

[Nicolas]

Thanks a lot, I will wait for the Q2 2012!

[Rainer]

Can you please provide an example how to to this the actual relase of the controls?

[Tina Stancheva]

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

[AEDT developer]

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.

[Pavel R. Pavlov]

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

[AEDT developer]

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.

[Tina Stancheva]

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

[AEDT developer]

Thank you for the explanation.