Using RadTileView in RadRibbonView Backstage

7 posts, 0 answers
  1. Harald
    Harald avatar
    57 posts
    Member since:
    Oct 2013

    Posted 22 Oct 2017 Link to this post

    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?
  2. Harald
    Harald avatar
    57 posts
    Member since:
    Oct 2013

    Posted 22 Oct 2017 Link to this post

    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>
  3. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1514 posts

    Posted 25 Oct 2017 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  4. Harald
    Harald avatar
    57 posts
    Member since:
    Oct 2013

    Posted 25 Oct 2017 in reply to Martin Ivanov Link to this post

    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.
  5. Dinko
    Admin
    Dinko avatar
    501 posts

    Posted 30 Oct 2017 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  6. Harald
    Harald avatar
    57 posts
    Member since:
    Oct 2013

    Posted 26 Dec 2017 in reply to Dinko Link to this post

    I use the material theme. Which scrollviewer should I remove here?
  7. Sia
    Admin
    Sia avatar
    711 posts

    Posted 28 Dec 2017 Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top