Binding RadTileView with custom RowSpan and ColumnSpan not working.

[Maciej]

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.

[Dinko | Tech Support Engineer]

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

[dharmesh]

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

[Dinko | Tech Support Engineer]

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