Incorrect behavior of Item state when IsVirtualizing="True"

[Aleksander]

Hi,
I have such definition of collection in my ViewModel (I use Caliburn.Micro here) I bound to in TileView XAML:

public class IncidentsPagedCollection : ModulePropertyChangedBase
    {
        private PATI.SL.Services.IncidentService.IncidentServiceClient _service;

        private BindableCollection<IncidentData> _items;
        public  BindableCollection<IncidentData>  Items
        {
            get { return _items; }
            set
            {
                _items = value;
                NotifyOfPropertyChange(() => Items);
            }
        }

I reload items this way:

void GetIncidentsCompleted_OnSuccess(Services.IncidentService.GetIncidentsCompletedEventArgs e)
       {
           var dr = e.Result.AsDQR();
           if (!dr.IsValid)
               return;

           if (this.TotalCount != e.Result.Total)
               this.TotalCount = e.Result.Total;

           this.CurrentCount = dr.Length;
           this.CurrentPage = 1 + dr.RawObject.FirstItemIndex / PageSize;

           this.Items.Clear();
           this.Items.AddRange(e.Result.Data);
       }

So in short I clear existing collection and add new items.
When I enlarge any of the items (state change to LargeContent value) it enlarges an item for a while, but then changes presentation of the items to Normal view (size of the tile!) with content of a few items rendered as Minimized (Small). There is no any area with scrollbar and small items on right side then. It occurs when I use IsVirtualizing="True" setting on RadTileView. When IsVirtualizing = "False" it works fine :)
What do I wrong here?

I try to speed up rendering of new items after page reload also, but it's extremely slowly. Response from the service takes a few milliseconds, but content rendering takes about 2-3 seconds with 50 items on it only (this is my default page size)!
Does anybody know how to render items in TileView fast way?

I tested such option like below of course also :) but with no luck

var items = new BindableCollection<IncidentData>();
items.AddRange(e.Result.Data);
this.Items = items;

The definition of TileView in XAML is below:

<!-- Busy Indicator for Incidents -->
        <telerik:RadBusyIndicator x:Name="busyIndicator" Grid.Row="1" >

            <!-- Incidents -->
            <telerik:RadTileView x:Name="radTileView" ItemsSource="{Binding Path=Incidents.Items}" IsAutoScrollingEnabled="True" IsVirtualizing="True"
                                 MinimizedColumnWidth="200" MinimizedRowHeight="100" RowHeight="260" ColumnWidth="260"
                                 TileStateChanged="radTileView_TileStateChanged">

                <!-- Header template -->
                <telerik:RadTileView.ItemTemplate >
                    <DataTemplate>
                        <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Normal" >
                            <!--Small Content-->
                            <telerik:RadFluidContentControl.SmallContent>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding IncidentNumber}" />
                                </StackPanel>
                            </telerik:RadFluidContentControl.SmallContent>

                            <!--Normal Content-->
                            <telerik:RadFluidContentControl.Content>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="/PATI.SL.Components;component/Images/16x16/ambulance.png"/>
                                    <TextBlock Text="{Binding IncidentNumber}" Margin="10,0,0,0"/>
                                    <!--
                                    <TextBlock Text=" - "/>
                                    <TextBlock Text="{Binding FirstName}"/>
                                    <TextBlock Text=" "/>
                                    <TextBlock Text="{Binding Surname}"/>
                                    -->
                                </StackPanel>
                            </telerik:RadFluidContentControl.Content>

                            <!--Large Content-->
                            <telerik:RadFluidContentControl.LargeContent>
                                <StackPanel Orientation="Horizontal">
                                    <Image Source="/PATI.SL.Components;component/Images/16x16/ambulance.png"/>
                                    <TextBlock Text="{Binding IncidentNumber}" Margin="10,0,0,0"/>
                                    <TextBlock Text=" - "/>
                                    <TextBlock Text="{Binding FirstName}"/>
                                    <TextBlock Text=" "/>
                                    <TextBlock Text="{Binding Surname}"/>
                                    <TextBlock Text=", "/>
                                    <TextBlock Text="{Binding IncAddress}"/>
                                </StackPanel>
                            </telerik:RadFluidContentControl.LargeContent>
                        </telerik:RadFluidContentControl>
                    </DataTemplate>
                </telerik:RadTileView.ItemTemplate>

                <!-- Content template -->
                <telerik:RadTileView.ContentTemplate >
                    <DataTemplate>
                        <telerik:RadFluidContentControl SmallToNormalThreshold="200,100"
                                                        NormalToSmallThreshold="200,100"
                                                        NormalToLargeThreshold="600,600"
                                                        LargeToNormalThreshold="600,600"
                                                        >
                            <!--Small Content-->
                            <telerik:RadFluidContentControl.SmallContent>
                                <Border Background="LightBlue" >
                                    <StackPanel Orientation="Vertical">
                                        <StackPanel Orientation="Horizontal" >
                                            <TextBlock Text="{Binding FirstName}"/>
                                            <TextBlock Text=" "/>
                                            <TextBlock Text="{Binding Surname}"/>
                                        </StackPanel>
                                        <TextBlock Text="{Binding PriDiagnose}"/>
                                        <TextBlock Text="{Binding TimeOfCall, StringFormat='G'}" />
                                        <TextBlock Text="{Binding IncAddress}"/>
                                    </StackPanel>
                                </Border>
                            </telerik:RadFluidContentControl.SmallContent>

                            <!--Normal Content-->
                            <telerik:RadFluidContentControl.Content>
                                <Border Background="LightGreen" >
                                    <StackPanel Orientation="Vertical">
                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                                            <TextBlock Text="{Binding FirstName}"/>
                                            <TextBlock Text=" "/>
                                            <TextBlock Text="{Binding Surname}"/>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </telerik:RadFluidContentControl.Content>

                            <!--Large Content-->
                            <telerik:RadFluidContentControl.LargeContent>
                                <Border Background="LightYellow" >
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                                        <TextBlock Text="{Binding FirstName}"/>
                                        <TextBlock Text=" "/>
                                        <TextBlock Text="{Binding Surname}"/>
                                    </StackPanel>
                                </Border>
                            </telerik:RadFluidContentControl.LargeContent>
                        </telerik:RadFluidContentControl>
                    </DataTemplate>
                </telerik:RadTileView.ContentTemplate>

            </telerik:RadTileView>
        </telerik:RadBusyIndicator>

[Zarko]

Hi Aleksander,
Unfortunately I wasn't able to reproduce the problem, but from the code snippets I guess that the problem is in the RadFluidContentControl. The issue may be caused by the thresholds (you'd better not use them) or by the UI virtualization - when you use virtualization you should bind the RadFluidContentControl state, because the event and the thresholds are not always reliable.
The 2-3 seconds rendering is caused by the 50 tileViewItems that you generate at once. The UI Virtualization works like this - the RadTileView will generate only the RadTileViewItems that are visible at the moment. This means that if you want to use it you'll have to set RowHeight and ColumnWidth to the RadTileView so that not all items are visible at all time.
I've created a sample project so could you please examine it and if you have more questions feel free to ask.

All the best,
Zarko
the Telerik team