How to enable ScrollBar in TileViewControl to view all the minimized TileViewItems

1 min read

This article demonstrates about enabling scroll bars to view all items in TileViewControl.

VerticalScrollBarVisibility and HorizontalScrollBarVisibility

To enable scroll bar for TileViewItems, set either auto or Visible for VerticalScrollBarVisibility and HorizontalScrollBarVisibility properties of TileViewControl.

OnMinimizedWidth and OnMinimizedHeight

Set height and width for TileViewItems in minimized state to view all the minimized items using scroll bar.

XAML

<syncfusion:TileViewControl RowHeight="150" ColumnWidth="150" MinimizedItemsOrientation="Top"                                    HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
            <syncfusion:TileViewItem Header="TileViewItem 1" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 2" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 3" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300" />
            <syncfusion:TileViewItem Header="TileViewItem 4" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 5" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 6" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300" />
            <syncfusion:TileViewItem Header="TileViewItem 7" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 8" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 9" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300" />
            <syncfusion:TileViewItem Header="TileViewItem 10" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 11" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 12" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300" />
            <syncfusion:TileViewItem Header="TileViewItem 13" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 14" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300" />
            <syncfusion:TileViewItem Header="TileViewItem 15" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 16" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300" />
            <syncfusion:TileViewItem Header="TileViewItem 17" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 18" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
            <syncfusion:TileViewItem Header="TileViewItem 19" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300" />
            <syncfusion:TileViewItem Header="TileViewItem 20" Content="TileViewContent"
                                     OnMinimizedHeight="150" OnMinimizedWidth="300"/>
        </syncfusion:TileViewControl>

The following screenshot illustrates the output of the above code example:

Did you find this information helpful?

Yes

Comments (0)

How to enable ScrollBar in TileViewControl to view all the minimized TileViewItems

Access denied