TileView with Rad fludic control Scroll Issue

[Vijay]

HI Team,

my problem is when the Tile view is loading Properly but if the Tileview items are more then 9 then we are able see the Scroll bar properly in the UI but when i scroll down and Scroll up then the top row TileItems are becoming BLank (Small content and Minimized contents are becoming Blank) 
Note: Tile view is inside a Rad Tab.

i am creating the tile View dynamically as shown

<telerik:RadTileView x:Name="FIN_OpTilesView"
                            Grid.Row="1"
                            MinimizedColumnWidth="200" ColumnsCount="3"
                            RowHeight="300"
                            IsAutoScrollingEnabled="True"
                            IsDockingEnabled="True"
                            IsVirtualizing="True"
                            TileStateChanged="OpTilesView_TileStateChanged"
                            PreservePositionWhenMaximized="True"
                            telerik:StyleManager.Theme="Windows7" />

populateing the tile views using the Method

private void PopulateWidgets()
       {
           this.FIN_OpTilesView.Items.Clear();
           foreach (var item in widgetlist)
           {
               if (item.State == WidgetVisibleState.Visible)
               {
                   RadTileViewItem tile = TileViewManager.BuildTileViewItem(item as WidgetElement);
                   this.FIN_OpTilesView.Items.Add(tile);
               }
           }
       }

 public static RadTileViewItem BuildTileViewItem(WidgetElement widgetelement)
       {
           try
           {
               RadTileViewItem tileItem = new RadTileViewItem();
               tileItem.Header = widgetelement.widget.WidgetDescription;
               //tileItem.Name = widget.ID.ToString();
               //string userControlViewCode = widget.Code; // must be read from resource file

               RadFluidContentControl rdFldContent = new RadFluidContentControl();
               rdFldContent.ContentChangeMode = ContentChangeMode.Manual;
               rdFldContent.State = FluidContentControlState.Normal;

               rdFldContent.TransitionDuration = new TimeSpan(0, 0, 2);

               //Small TileItem Content
               TextBlock txtsBlock = new TextBlock();
               txtsBlock.TextWrapping = TextWrapping.Wrap;
               txtsBlock.Text = widgetelement.widget.WidgetDescription;
               rdFldContent.SmallContent = txtsBlock;

               //medium Tileview item content
               Border mediumTileItemBorder = new Border();
               TextBlock txtBlock = new TextBlock();
               txtBlock.TextWrapping = TextWrapping.Wrap;
               txtBlock.Text = widgetelement.widget.WidgetDescription;
               ScrollViewer scrollForMediumTileItem = new ScrollViewer();
               scrollForMediumTileItem.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
               scrollForMediumTileItem.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
               scrollForMediumTileItem.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;


               //Large TileItem Content
               Border largeTileItemBorder = new Border();
               ScrollViewer scrollForLargeTileItem = new ScrollViewer();
               scrollForLargeTileItem.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;
               scrollForLargeTileItem.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
               scrollForLargeTileItem.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
               StackPanel stkPnl = new StackPanel();

               //scrollForMediumTileItem.Content = new AppointmentsHeatMapView();

               ITeasureView teasureView = (ITeasureView)System.Activator.CreateInstance(Type.GetType(widgetelement.widget.WidgetNameSpace + ApplicationConstants.STR_TeasureView));
               if (teasureView != null)
               {
                   teasureView.UpdateWidgetID(widgetelement.widget.WidgetID);
                   mediumTileItemBorder.Child = teasureView as UIElement;
               }
               else
               {

               }

               IFullView fullView = (IFullView)System.Activator.CreateInstance(Type.GetType(widgetelement.widget.WidgetNameSpace + ApplicationConstants.STR_FullView));
               if (fullView != null)
               {
                   fullView.UpdateWidgetID(widgetelement.widget.WidgetID);
                   stkPnl.Children.Add(fullView as UIElement);
               }
               else
               {

               }

               //mediumTileItemBorder.Child = scrollForMediumTileItem;
               rdFldContent.Content = mediumTileItemBorder;

               scrollForLargeTileItem.Content = stkPnl;
               largeTileItemBorder.Child = scrollForLargeTileItem;
               rdFldContent.LargeContent = largeTileItemBorder;

               tileItem.Content = rdFldContent;
               return tileItem;
           }
           catch (Exception ex)
           {
               return new RadTileViewItem();
           }
       }

[Zarko]

Hi Vijay,
The problem is that you're using the UI virtualization with containers. The virtualization is meant to work with business items so that the panel could virtualize (remove/recycle) the containers that are not used at the moment and realize (generate/reuse) them when they are needed (when they are in the viewport). In your case you don't need virtualization because you're manually generating all of the containers.
You can do two things:
- remove the virtualization
- use business items and ContentTemplate:

foreach (var item in widgetlist)
{
    if (item.State == WidgetVisibleState.Visible)
    {
        this.FIN_OpTilesView.Items.Add(item);
    }
}

and

<telerik:RadTileView x:Name="FIN_OpTilesView" Grid.Row="1" ColumnsCount="3" IsAutoScrollingEnabled="True"
                IsDockingEnabled="True" IsVirtualizing="True" MinimizedColumnWidth="200" MinimizedRowHeight="100"
                PreservePositionWhenMaximized="True" RowHeight="300" telerik:StyleManager.Theme="Windows7"
                TileStateChanged="OpTilesView_TileStateChanged">
    <telerik:RadTileView.ContentTemplate>
        <DataTemplate>
            <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Normal">
                <telerik:RadFluidContentControl.SmallContent>
                    <TextBlock Text="{Binding widget.WidgetDescription}"></TextBlock>
                </telerik:RadFluidContentControl.SmallContent>
                <telerik:RadFluidContentControl.Content>
                    <TextBlock Text="{Binding widget.WidgetDescription}" FontSize="16" Foreground="Green"></TextBlock>
                </telerik:RadFluidContentControl.Content>
                <telerik:RadFluidContentControl.LargeContent>
                    <TextBlock Text="{Binding widget.WidgetDescription}" FontSize="20" Foreground="Orange"></TextBlock>
                </telerik:RadFluidContentControl.LargeContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>
    </telerik:RadTileView.ContentTemplate>
</telerik:RadTileView>

If you have further questions please feel free to ask.

Kind regards,
Zarko
the Telerik team