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

Questions:

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}">

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

        </GridView.Resources>

        <GridView.ItemTemplate>

            <StaticResource ResourceKey="DataTemplate1"/>
        </GridView.ItemTemplate>

    </GridView>
Answers:

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;
    }
}

xaml:

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

nice tutorial at:custom grid view tutorial

Questions:
Answers:

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

This works for me

        <ListView 
                  Width="1300"
                  Height="1000"
                  Margin="20,0,20,0">

            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>

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