Binding RadTileView with custom RowSpan and ColumnSpan not working.

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

    Posted 11 May 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
    416 posts

    Posted 15 May 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.
Back to Top