TileView with Rad fludic control Scroll Issue

2 posts, 0 answers
  1. Vijay
    Vijay avatar
    13 posts
    Member since:
    May 2012

    Posted 12 Sep 2012 Link to this post

    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();
               }
           }
  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 14 Sep 2012 Link to this post

    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.

  3. DevCraft banner
Back to Top