This is a migrated thread and some comments may be shown as answers.

TileView with Rad fludic control Scroll Issue

1 Answer 21 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Vijay
Top achievements
Rank 1
Vijay asked on 12 Sep 2012, 02:05 PM
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();
           }
       }

1 Answer, 1 is accepted

Sort by
0
Zarko
Telerik team
answered on 14 Sep 2012, 11:58 AM
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

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

Tags
TileView
Asked by
Vijay
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Share this question
or