CODEWITHSUNDEEP
c#.netwindowswindows-store-appswindows-8.1
suvish valsan
suvish valsan

Reputation: 869

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>

Upvotes: 6

Views: 6802

Answers (2)

Frank Sposaro
Frank Sposaro

Reputation: 8531

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

Upvotes: 3

suvish valsan
suvish valsan

Reputation: 869

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

Upvotes: 3

Related Questions