Question

我想创建一个像Android Playstore这样的页面，我必须在运行时根据数据创建多个水平可滚动的Gridview。由于我是Windows手机开发的新手，我不知道如何动态创建它。所以请提供任何类型的帮助或教程。

我使用此代码实现了以下代码我能够生成所需的结果，但gridview项目不是水平堆叠。我想让项目水平滚动所以请提供任何可以获得所需结果的帮助。我附上截图供参考。

 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

我不得不把它作为一个答案，因为评论部分对此非常有限。所以我最好回答这个问题并引导你走向正确的方法

OKAY！有更好的方法来做到这一点。最好的方法也是最简单的方法是通过DataBinding。它会将你的代码减少到几乎没有，并且你会更容易在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>

DataTemplate 要在<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>

您的支持应用类

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 ItemsSource GridView ObservableCollection<AppDataClass> ViewModel属性MVVM可以使用{ObservableCollection<AppDataClass>填充后面的代码1}}方法，每次RasiePropertyChanged更改时，它都会从界面INotifyPropertyChanged引发ViewModel事件，视图会自动更新。这是一个强烈推荐的方法，因为它将您的UI和业务逻辑保持在两个不同的线程上，其中一个不会相互交互，它们将通过List<AppDataClass> MyEntireData = new List<AppDataClass>(); MyEntireData = GetData();获取数据，这是MVVM的方法有关它的更多信息请使用This article
正如你解释说你是电话开发的新手，我会说忘记第一点，因为如果你是平台的新手可能很难掌握，我推荐的是简单的方法，从您的代码背后获取数据到这样的列表，

List<AppDataClass> 其中GetData方法为您返回MyEntireData，现在只需在ViewView.ItemsSource = MyEntireData;不为空或其计数为＆gt;之后0使用，DataTemplate 而且你将拥有一个更有条理的代码，为你提供商店布局。

将来如果你想改变Tiles看起来的方式，你不需要把头包裹到c＃生成的XAML中，你只需要修改ifconfig wlan1 wlan1 Link encap:Ethernet HWaddr 74:DA:EA:C2:63:17 inet addr:192.168.43.1 Bcast:192.168.43.255 Mask:255.255.255.0 inet6 addr: fe80::76da:eaff:fec2:6317%767480/64 Scope:Link UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 RX packets:0 errors:0 dropped:0 overruns:0 frame:0 TX packets:62 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 txqueuelen:1000 RX bytes:0 (0.0 B) TX bytes:12808 (12.5 KiB)。

如果有任何问题请在评论部分告诉我。

如何在运行时在verticallly可伸缩页面内动态创建水平可滚动Gridview

1 个答案:

XAML