Question

如何在windows store app xaml中编辑GRIDVIEW，以便我们可以使其垂直滚动而不是水平滚动。我使用XAML应该使用滚动视图手动创建一个新的用户元素，还是有任何简单的方法来实现这一点与Windows商店应用程序。

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

Answer 1

解决了创建的自定义网格视图模板

 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>

很好的教程：custom grid view tutorial

Answer 2

我发现最简单的方法就是使用ListView并将项目设置为包裹网格。

这对我有用

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

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

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

垂直滚动gridview XAML windows商店应用程序

2 个答案: