如何在运行时在垂直可滚动页面内动态创建水平可滚动 Gridview

Question

我想创建一个类似于 Android playstore 的页面，我必须在其中根据运行时的数据创建多个水平可滚动的 Gridview。由于我是 windows phone 开发的新手，我不知道如何动态创建它。因此，请提供与此相关的任何类型的帮助或教程。

我已经用这段代码实现了下面的代码，我能够产生所需的结果，但是 gridview 项目 没有水平堆叠 。我想制作 项目水平滚动所以请提供任何帮助，所需的结果可以是achieved.I我附上截图以供参考。

 public void DesignUi()
        {
            GridViewItem grdItem = new GridViewItem();
            for (int i = 0; i < 20; i++)
            {
                string backgroundColor = string.Empty;


                StackPanel staParent = new StackPanel();

                #region Header
                StackPanel headerStack = new StackPanel(); 

                headerStack.Background = new SolidColorBrush(Colors.Pink);
                TextBlock textHeader = new TextBlock();

                textHeader.Text = "Header  :-" + i;

                headerStack.Children.Add(textHeader);
                #endregion

                #region Body
                StackPanel staBody = new StackPanel(); 
                staBody.Background = new SolidColorBrush(Colors.Green);

                #region Create Grid View
                GridView grd = new GridView();
                grd.SetValue(ScrollViewer.VerticalScrollModeProperty, ScrollMode.Disabled);
                grd.SetValue(ScrollViewer.HorizontalScrollModeProperty, ScrollMode.Enabled);

                ItemsPanelTemplate itmPanel = new ItemsPanelTemplate();
                VirtualizingStackPanel vrStack = new VirtualizingStackPanel();
                vrStack.Orientation = Orientation.Horizontal;
                TextBlock textQ = new TextBlock();
                textQ.Text = "";
                vrStack.Children.Add(textQ);

                itmPanel.SetValue(VirtualizingStackPanel.IsVirtualizingProperty, true);

                itmPanel.SetValue(VirtualizingStackPanel.OrientationProperty, Orientation.Horizontal);
                itmPanel.SetValue(ItemsControl.ItemContainerStyleProperty, Orientation.Horizontal);
                ItemsControl itmCntrl = new ItemsControl();
                itmCntrl.Items.Add(vrStack);

                #region Create Gridview Items
                for (int j = 0; j < 4; j++)
                {
                    grdItem = new GridViewItem();
                    grdItem.Width = 100;
                    grdItem.Height = 150;
                    grdItem.Margin = new Thickness(5, 5, 5, 5);
                    grdItem.Background = new SolidColorBrush(Colors.Red);
                    TextBlock textGrd = new TextBlock();
                    textGrd.Text = "Item :-" + j;
                    grdItem.Content = textGrd;
                    grd.Items.Add(grdItem);
                }
                #endregion

                #endregion

                staBody.Children.Add(grd);
                #endregion

                staParent.Children.Add(headerStack);
                staParent.Children.Add(staBody);

                staLists.Children.Add(staParent);
            }
        }

Current Result Screenshot with the above code:--- Required Result Screenshot

Answer 1

我不得不把这个作为答案，因为评论部分对此限制太多。所以我最好回答这个问题并指导您采取正确的方法

好的！有更好的方法可以做到这一点。最好也是最简单的方法是通过数据绑定。它会将您的代码减少到几乎为零，并且您可以更轻松地在 XAML 中设计 GridView 而不是通过 c# 进行设计。如果您不熟悉数据绑定的概念并且想按照现在的方式实现它，那么我将添加到您的解决方案中，GridView 将通过设置 ItemsWrapGrid.Orientation 属性的 gridview 设置为垂直以水平堆叠元素，并记得将滚动模式也设置为水平。

对于滚动模式：将以下内容添加到您的 GridView XAML

ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Disabled"

用于设置 ItemsWrapGrid 方向属性:

string template =
                "<ItemsPanelTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"><ItemsWrapGrid VerticalAlignment = \"Top\" "
                + " ItemWidth = \""
                + itemWidth
                + "\" Orientation = \"Vertical\"/></ItemsPanelTemplate> ";
yourgridview.ItemsPanel = (ItemsPanelTemplate)XamlReader.Load(template);

请注意： 实现这一目标的更好、更简洁的方法是通过 DataBinding，下面是通过 DataBinding 实现这一目标的代码：

XAML

<GridView Name="ViewView" HorizontalAlignment="Center" ItemTemplate="{StaticResource AllAppsTileData}" IsItemClickEnabled="True" SelectionMode="Single" Margin="10" ItemsSource="{Binding AppsToShow}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Disabled">
                                <GridView.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <ItemsWrapGrid Orientation="Vertical"/>  <--Change this to Horizontal for vertically wrapping the items-->
                                    </ItemsPanelTemplate>
                                </GridView.ItemsPanel>
                                <GridView.ItemContainerStyle>
                                    <Style TargetType="GridViewItem">
                                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                        <Setter Property="Margin" Value="5"/>
                                    </Style>
                                </GridView.ItemContainerStyle>
                            </GridView>

数据模板 要在您的 <Page.Resources>

中定义

<DataTemplate x:Key="AllAppsTileData">
        <Grid>
            <Grid.Background>
                <ImageBrush Stretch="Fill" ImageSource="{Binding AppImage}"/>
            </Grid.Background>
            <Grid>
                <Grid.Background>
                    <SolidColorBrush Color="Black" Opacity="0.3"/>
                </Grid.Background>
                <TextBlock Text="{Binding AppName}" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </Grid>
    </DataTemplate>

您的后备应用程序class

public class AppDataClass
{
    public string AppName { get; set; }

    public string AppImage { get; set; } //The image would be something like ms-appx:///Assets/LOGO.png
}

现在您已经准备好您的体系结构，您可以从这里开始使用两种方法，

你 bind GridView 的 ItemsSource 属性到一个 ObservableCollection<AppDataClass> 可以由你后面的代码填充或者最好是 ViewModel 使用 MVVM 方法，每次 ObservableCollection<AppDataClass> 更改时，它都会从接口 INotifyPropertyChanged 引发 RasiePropertyChanged 事件，并且视图会自动更新自身。这是一种强烈推荐的方法，因为它将您的 UI 和业务逻辑保持在两个不同的线程上，并且它们中的任何一个都不会相互交互，它们将通过 ViewModel 获取数据，这是有关 MVVM 方法的更多信息，请使用 This article
正如您解释说您是 Phone 开发的新手，我想说的是完全忘记第一点，因为如果您是新手，可能很难掌握平台，我推荐的是简单的方法，从你后面的代码中将数据放入像这样的列表中，

List<AppDataClass> MyEntireData = new List<AppDataClass>();<br> MyEntireData = GetData(); GetData 方法返回一个 List<AppDataClass> 并且现在 MyEntireData 不为空或者它的计数 > 0 使用 ViewView.ItemsSource = MyEntireData; 而且您将拥有更有条理的代码，为您提供有点布局的商店方式。

And in future if you want to change the way the Tiles look you don't need to wrap your head to the c# generated XAML, you just need to modify the DataTemplate.

如果有什么可以在评论区告诉我。

如何在运行时在垂直可滚动页面内动态创建水平可滚动 Gridview

How to dynamically create horizontal scrollable Gridview inside verticallly scollable page at Runtime

c#

windows

gridview

windows-phone-8.1

uwp

XAML