Question

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

我有一个要显示的步骤列表，列表可以有一个到多个步骤。

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

我想要达到的目标就像烹饪步骤在微软Bing Food＆amp;喝app。因此，步骤显示在第一列的行中，当到达页面末尾时，它会创建第二列，依此类推。像这样： 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，其中详细讨论了整个过程，以及您可以做的一些很好的例子。请特别注意名为“基于数据对象的属性选择DataTemplate”的部分。虽然单个模板仍然可以具有可变高度，但根据您的特定需求使用不同的模板，您可以根据自己的内容自定义每个项目的样式。

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

Answer 3

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

简而言之，在一个StackPanel的Orientation设置为Horizontal，我向它添加一个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);
            }
         }

提出步骤列表

3 个答案: