Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vertically scrolling gridview XAML windows store app

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>
like image 802
suvish valsan Avatar asked Oct 20 '13 13:10

suvish valsan


2 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

like image 85
suvish valsan Avatar answered Oct 05 '22 06:10

suvish valsan


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

like image 28
Frank Sposaro Avatar answered Oct 05 '22 06:10

Frank Sposaro