This is a migrated thread and some comments may be shown as answers.

Controls in RadRibbonBackstageItem : oversizing issue

17 Answers 392 Views

RibbonView and RibbonWindow

This is a migrated thread and some comments may be shown as answers.

Dédé asked on 18 Aug 2011, 02:56 PM

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 />

</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 />

</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 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>

</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">

</telerik:RadRibbonTab>

</telerik:RadRibbonView>

<Grid Grid.Row="1">

</Grid>

<Grid Grid.Row="2">

</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

17 Answers, 1 is accepted

answered on 23 Aug 2011, 05:43 PM

BackstageCustomStyle.zip

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 >>

answered on 29 Aug 2011, 08:00 AM

Windows7Based-BackstageCustomStyle.zip

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

answered on 10 Apr 2012, 01:39 PM

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">

<my:myRibbonView BackstageClippingElement="{Binding ElementName=LayoutRoot}"

>

...

</

my:myRibbonView

>



<!-- This one does.-->

<telerik:RadRibbonView BackstageClippingElement="{Binding ElementName=LayoutRoot}" >

...

</

telerik:RadRibbonView>

</Grid>

answered on 12 Apr 2012, 10:14 AM

WpfApplication33.zip

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 >>

answered on 20 Mar 2013, 05:31 PM

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.

answered on 25 Mar 2013, 12:51 PM

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.

answered on 28 Mar 2013, 12:45 PM

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.