Binding RadTileView with custom RowSpan and ColumnSpan not working.

4 posts, 0 answers
  1. Maciej
    Maciej avatar
    4 posts
    Member since:
    Mar 2017

    Posted 11 May 2017 Link to this post

    Hello,

        I am trying to create view containing collection of items with with specified Row, RowSpan, Coulumn and ColumnSpan properties in RadTileView. So far I've created VM ParamsEditionViewModel containing observable collection of BindableProfileData, which wraps 

    public class BindableProfileData : BindableBase
        {
            
            private ProfileItem _profileModel;
            private BindableDPDataItem _dataModel;
     
            public int Row
            {
                get { return _profileModel.DrawingSettings.Row; }
            }
     
            public int Column
            {
                get
                {
                    return _profileModel.DrawingSettings.Column;
                }
            }
             
            public int RowSpan
            {
                get { return _profileModel.DrawingSettings.RowSpan; }
            }
     
             
     
            public int ColumnSpan
            {
                get { return _profileModel.DrawingSettings.ColumnSpan; }
            }
    }

     

    To make possible settings custom tiles size I used MultipleRowsAndColumnsPanel provided by You in one of RadGridView developers examples (link).

    Whole view looks like this:

    <Grid>
          <FrameworkElement.Resources>
                <DataTemplate x:Key="ItemTemplate" >
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
     
                <DataTemplate x:Key="ContentTemplate">
                    <StackPanel>
                        <TextBlock Text="{Binding Row, StringFormat='Row: {0}'}"/>
                        <TextBlock Text="{Binding Column, StringFormat='Column: {0}'}"/>
                        <TextBlock Text="{Binding RowSpan, StringFormat='RowSpan: {0}'}"/>
                        <TextBlock Text="{Binding ColumnSpan, StringFormat='ColumnSpan: {0}'}"/>
                    </StackPanel>
                </DataTemplate>
            </FrameworkElement.Resources>
            <Grid>
                <telerik:RadTileView x:Name="xTileView"
                                 ItemTemplate="{StaticResource ItemTemplate}"
                                 ContentTemplate="{StaticResource ContentTemplate}"
                                 ItemsSource="{Binding SelectedCategory}"
                                 IsAutoScrollingEnabled="True"
                                 ColumnWidth="500"
                                 RowHeight="300">
     
                    <telerik:RadTileView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <controlls:MultipleRowsAndColumnsPanel RowsCount="4" ColumnsCount="3"/>
                        </ItemsPanelTemplate>
                    </telerik:RadTileView.ItemsPanel>
                    <telerik:RadTileView.ItemContainerStyle>
                        <Style TargetType="telerik:RadTileViewItem">
                            <Setter Property="controlls:TileViewAttachedProperties.Row" Value="{Binding Row}"/>
                            <Setter Property="controlls:TileViewAttachedProperties.Column" Value="{Binding Column}"/>
                            <Setter Property="controlls:TileViewAttachedProperties.RowSpan" Value="{Binding RowSpan}"/>
                            <Setter Property="controlls:TileViewAttachedProperties.ColumnSpan" Value="{Binding ColumnSpan}"/>
                        </Style>
                    </telerik:RadTileView.ItemContainerStyle>
                </telerik:RadTileView>
            </Grid>
        </Grid>

     

    The problem is that the view don't appears when I load collection to VM after button click. When I remove this block 

    <telerik:RadTileView.ItemsPanel>
            <ItemsPanelTemplate>
                 <controlls:MultipleRowsAndColumnsPanel RowsCount="4" ColumnsCount="3"/>
            </ItemsPanelTemplate>
    </telerik:RadTileView.ItemsPanel>

    The view appears but of course not if a expected format. When I paste ItemsPanel block when app is running with (Edit and Continue mode in VS), view looks just how it should be. So I have two questions. How to fix this issue and second how can I uprgrade view to load different data templates if VM observable collection contains different objects inheritating from base BindableProfileData.

  2. Dinko
    Admin
    Dinko avatar
    1078 posts

    Posted 15 May 2017 Link to this post

    Hello Maciej,

    Thank you for your interest in RadTileView control.

    In the MultipleRowsAndColumnsPanel class which derives from TileViewPanel, the methods MeasureOverride and ArrangeOverride are using the Children collections of the Panel which in data bound scenario is still not populated when these methods are called. That is the reason why the tile view items are not visualized in data bound scenario. To workaround this behavior you can call the base MeasureOverride and ArrangeOverride methods before your logic. This way the Children collection will be populated.
    protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize)
    {
        base.MeasureOverride(availableSize);
        . . . . .
    }
    protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)
    {
       base.ArrangeOverride(finalSize);  
       . . . . .
    }

    As for your second question, to set a different template for a specific item, you can use DataTemplateSelector.

    Regards,
    Dinko
    Telerik by Progress
    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.
  3. dharmesh
    dharmesh avatar
    8 posts
    Member since:
    Mar 2019

    Posted 06 Jan in reply to Dinko Link to this post

    Hi,

    I am using the same MultipleRowsAndColumnsPanel in my application. 

    I am facing some issues with it:

    1. Scrollviewer is not working

    2. When I add new tile in the view, it is not visualized. when I restart the application all the tiles are visible.

    when I call base.MeasureOverride(availableSize) and base.ArrangeOverride(finalSize) methods in my overriden methods, newly added tiles display at position 0.

    expected behavior:

    1.scrollviewer should work on when tiles goes out of view.

    2.newly added tile should display on the view at the next position(1st position after last tile view item).

  4. Dinko
    Admin
    Dinko avatar
    1078 posts

    Posted 08 Jan Link to this post

    Hi Dharmesh,

    Let me start with that the control does not support such layout out of the box. As this is a custom solution, it may not work in all scenarios.

    Still, I have tested the approach by adding new items. When new items are added, you need to set TileViewAttachedProperties Row and Column. Also, you will need to have free rows and columns so that new items will be added. I have modified the SDK Example to demonstrate this approach. You can find it attached to this reply.

    Regarding the ScrollViewer. I am not sure what you have in mind here. May I ask you to modify the sample project to demonstrate this behavior and send it back to me for further investigation.

    Regards,
    Dinko
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top