呈现步骤列表

Question

我正在使用 C#/XAML 开发 Windows 8 应用程序。

我有一个要显示的步骤列表，该列表可以包含一对多步骤。

我已经尝试过GridView 和ListView 控件，但是使用这些控件，不可能让每个元素都有自己的高度（因为一步可能只有一行文本，而下一步可能只有 3 行， 例如）。 VariableSizedGridview 也无济于事。

我想要实现的是类似于 Microsoft Bing Food & Drink 应用程序中显示烹饪步骤的方式。因此，步骤显示在第一列的行中，当到达页面末尾时，它会创建第二列，依此类推。像这样：

谁能帮我找到实现这一目标的方法？

使用什么控件以及如何使用？

看起来很简单，但我在网上搜索时找不到任何解决方案。

谢谢

这是我对Gridview 控件所做的（Listview 非常相似）：

<Grid Name="gridSteps" Grid.Column="3" Margin="25,69,25,69">
                   <Grid.RowDefinitions>
                      <RowDefinition Height="Auto"/>
                      <RowDefinition Height="*"/>
                   </Grid.RowDefinitions>

                   <TextBlock Text="ÉTAPES" FontSize="22" FontWeight="Bold"></TextBlock>
                   <GridView Grid.Row="1" Name="gvGroupSteps" SelectionMode="None" IsHitTestVisible="False" VerticalAlignment="Top">
                      <GridView.ItemTemplate>
                         <DataTemplate>
                            <StackPanel Width="400">
                               <TextBlock Text="{Binding Order}" Margin="0,15,0,0" FontSize="20" Foreground="Bisque"></TextBlock>
                               <TextBlock Text="{Binding Description}" Margin="0,5,0,0" FontSize="18" TextWrapping="Wrap"></TextBlock>
                            </StackPanel>
                         </DataTemplate>
                      </GridView.ItemTemplate>

                      <GridView.GroupStyle>
                         <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                               <DataTemplate>
                                  <StackPanel Background="#FFC9C9C9">
                                     <TextBlock Text="{Binding GroupName}" FontSize="20" FontWeight="SemiBold"></TextBlock>
                                  </StackPanel>
                               </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                         </GroupStyle>
                      </GridView.GroupStyle>

                   </GridView>
                </Grid>

Answer 1

您可能希望发布您尝试过的 XAML。在我看来，您需要嵌套视图项。考虑这个非常简单的例子：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>  
<ListView>
<ListViewItem>Step 1</ListViewItem>
<ListViewItem>
<ListView>
<ListViewItem>Step 1a</ListViewItem>
<ListViewItem>Step 1b</ListViewItem>
<ListViewItem>Step 1c</ListViewItem>
</ListView>
</ListViewItem>
<ListViewItem>Step 2</ListViewItem>
</ListView>
</Grid>

Answer 2

我已经尝试过 GridView 和 ListView 控件，但是使用这些控件，不可能让每个元素都有自己的高度

我的回忆是，您实际上可以使用这些控件来创建具有不同高度的元素。这两种类型都是ItemsControl，它支持数据模板化，进而允许您自定义每个项目的外观，包括其高度。

也就是说，在这种情况下，您可能会发现更简单的ListBox 适合您的需求。没有代码示例或其他细节很难说。

您应该阅读 MSDN 的 Data Templating Overview，其中对整个过程进行了彻底的讨论，并提供了一些很好的示例来说明您可以做什么。请特别注意名为“根据数据对象的属性选择数据模板”的部分。虽然单个模板仍然可以具有可变高度，但显然通过根据您的特定需求使用不同的模板，您可以根据自己的需要自定义每个项目的样式。

如果这不能解决您的问题，请提供更详细的问题。您应该包含a good, minimal, complete code example，它清楚地显示了您尝试过的内容，准确地解释了该代码的作用以及它与您希望它做的不同之处。

Answer 3

我一直在互联网上寻找解决方案，但找不到任何东西。 所以我决定自己用 C# 代码做所有事情。

简而言之，在 StackPanel 中，Orientation 设置为 Horizo​​ntal，然后我向它添加一个 Grid，并为我拥有的每个项目添加行到该 Grid。当达到最大高度时（基于屏幕高度），我将一个新的 Grid 添加到 StackPanel，依此类推。

如果有人需要，这是我的代码：

// Nombre de lignes maximal (16 lignes à 1080p)
         int maxCharCount = (int)Window.Current.Bounds.Height * 16 / 1080;

         spIngredients.Children.Clear();
         foreach (var groupIngredient in db.Table<GroupIngredient>().Where(x => x.RecipeId == _currentRecipe.Id))
         {
            int linesCount = 0;
            int row = 0;
            var gGroup = new Grid();
            spIngredients.Children.Add(gGroup);
            gGroup.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });

            var groupName = new TextBlock() { Text = groupIngredient.Name, FontSize = 20, FontWeight = FontWeights.SemiBold, Margin = new Thickness(10) };
            gGroup.Children.Add(groupName);
            Grid.SetRow(groupName, row);

            foreach (var ingredient in db.Table<Ingredient>().Where(x => x.GroupIngredientId == groupIngredient.Id))
            {
               // Nombre de lignes, split à 45 char
               linesCount += 1 + ingredient.IngredientFull.Length / 45;

               if (linesCount >= maxCharCount)
               {
                  var gCol = new Grid();
                  spIngredients.Children.Add(gCol);
                  gCol.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
                  var col = new TextBlock() { Text = "", FontSize = 20, FontWeight = FontWeights.SemiBold, Margin = new Thickness(10) };
                  gCol.Children.Add(col);
                  gGroup = gCol;

                  row = 0;
                  linesCount = 0;
                  Grid.SetRow(col, row);
               }

               row++;
               ingredient.Quantity = ingredient.Quantity * multiplier;

               gGroup.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });

               var ingredientName = new TextBlock() { Text = ingredient.IngredientFull, Margin = new Thickness(10), FontSize = 18, TextWrapping = TextWrapping.Wrap, MaxWidth = 300 };
               gGroup.Children.Add(ingredientName);
               Grid.SetRow(ingredientName, row);
            }
         }