Using RadTileView in RadRibbonView Backstage

[Harald]

When I use a RadTileView control in a RadRibbonBackstageItem, the RadTileViewItems run right out off the visible area. This Code works in a normal application window. How can I solve this?

[Harald]

01.<telerik:RadRibbonBackstageItem x:Name="BackstageItemDashboard"
02.                                Header="Übersicht" IsSelectable="True" IsDefault="True">
03.    <Grid x:Name="UserDashboard">
04.        <Grid.ColumnDefinitions>
05.            <ColumnDefinition></ColumnDefinition>
06.        </Grid.ColumnDefinitions>
07.        <Grid.RowDefinitions>
08.            <RowDefinition></RowDefinition>
09.        </Grid.RowDefinitions>
10.        <telerik:RadTileView x:Name="TileView" Grid.Column="0" Grid.Row="0" Margin="10"
11.                             Background="{telerik:MaterialResource ResourceKey=MarkerInvertedBrush}"
12.                             BorderBrush="{telerik:MaterialResource ResourceKey=ComplementaryBrush}"
13.                             BorderThickness="1"
14.                             MinimizedItemsPosition="Right">
15.            <telerik:RadTileViewItem Header="Test 1" Margin="3" Width="300" Height="300"></telerik:RadTileViewItem>
16.            <telerik:RadTileViewItem Header="Test 2" Margin="3" Width="300" Height="300"></telerik:RadTileViewItem>
17.            <telerik:RadTileViewItem Header="Test 3" Margin="3" Width="300" Height="300"></telerik:RadTileViewItem>
18.            <telerik:RadTileViewItem Header="Test 4" Margin="3" Width="300" Height="300"></telerik:RadTileViewItem>
19.        </telerik:RadTileView>
20.    </Grid>
21.</telerik:RadRibbonBackstageItem>

[Martin Ivanov]

Hello Harald,

I tested your code, but I am not sure what you mean by saying that the tileview is running outside of the visible area. Can you send me a picture showing the issue?

Regards,
Martin Ivanov
Progress Telerik

[Harald]

At the start everything looks good. After I have maximized an item, the items are positioned right outside the window. So I need to scroll to see the items.

[Dinko | Tech Support Engineer]

Hello Harald,

You're experiencing this strange behavior because by default the RibbonBackStage has a ScrollViewer around its content. This means that the RadTileView will be measured with infinity (because of the ScrollViewer) and this is the default behavior of the TileView when it doesn't have size and it's measured with infinity. What I can suggest you is to extract and edit the default template of the backstage. There is an Editing Control Templates help article in our documentation which describes how you can extract the default template of the controls. In your case, in the extracted template you can remove the ScrollViewer. 

I have prepared sample project which demonstrates this approach.

Regards,
Dinko
Progress Telerik

[Harald]

I use the material theme. Which scrollviewer should I remove here?

[Sia]

Hello again,

If you use our Material theme, then you will need to extract the relevant styles, templates and resources from the Themes folder in your installation. There you can find a folder per every theme that we have. Please find the same project attached after updating it to work with our Material theme.

Please note that there are two different folders - Themes (with styles corresponding to StyleManager) and Themes.Implicit (with styles corresponding to implicit styles). I recommend to you to use implicit styles if possible, because that way it won't be necessary to copy all static resources in your application. However this will lead to some extra effort to update your project to reference NoXAML binaries and merge all needed resources in the App.xaml.

Regards,
Sia
Progress Telerik