Home » Windows » vertically scrolling gridview XAML windows store app

vertically scrolling gridview XAML windows store app

Posted by: admin February 27, 2018 Leave a comment


how to edit GRIDVIEW in windows store app xaml so that we can make it scroll vertically instead of horizontal.
am using XAML should we manually make a new user element using scroll-view or is there any simple way to achieve this with windows store app .

 <GridView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  ItemsSource="{Binding imagelist}">

            <DataTemplate x:Key="DataTemplate1">
            <Grid Width="250" Height="250" Tapped="Grid_Tapped">
                    <Image Source="{Binding imsourceurl}"/>



            <StaticResource ResourceKey="DataTemplate1"/>


solved created custom grid-view template

 public class AdaptableGridView : GridView
        // default itemWidth
        private const double itemWidth = 100.00;
        public double ItemWidth
            get { return (double)GetValue(ItemWidthProperty); }
            set { SetValue(ItemWidthProperty, value); }
        public static readonly DependencyProperty ItemWidthProperty =
            DependencyProperty.Register("ItemWidth", typeof(double), typeof(AdaptableGridView), new PropertyMetadata(itemWidth));
    // default max number of rows or columns
    private const int maxRowsOrColumns = 3;
    public int MaxRowsOrColumns
        get { return (int)GetValue(MaxRowColProperty); }
        set { SetValue(MaxRowColProperty, value); }
    public static readonly DependencyProperty MaxRowColProperty =
        DependencyProperty.Register("MaxRowsOrColumns", typeof(int), typeof(AdaptableGridView), new PropertyMetadata(maxRowsOrColumns));

    public AdaptableGridView()
        this.SizeChanged += MyGridViewSizeChanged;

    private void MyGridViewSizeChanged(object sender, SizeChangedEventArgs e)
        // Calculate the proper max rows or columns based on new size 
        this.MaxRowsOrColumns = this.ItemWidth > 0 ? Convert.ToInt32(Math.Floor(e.NewSize.Width / this.ItemWidth)) : maxRowsOrColumns;


 <local:AdaptableGridView ItemWidth="250" x:Name="tumbview" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  ItemsSource="{Binding imagelist}" SelectionChanged="GridView_SelectionChanged" Margin="50,0,0,0" >
                <VariableSizedWrapGrid  Orientation="Horizontal" 
                                        ItemWidth="{Binding ElementName=tumbview, Path=ItemWidth}"
                                        MaximumRowsOrColumns="{Binding ElementName=tumbview, Path=MaxRowsOrColumns}"/>

nice tutorial at:custom grid view tutorial


I found the easiest way was just to use a ListView and set the items to be a wrappedgrid.

This works for me


                    <WrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" />

Check out http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.wrapgrid.aspx