提供步骤列表

Question

我正在使用C＃/ XAML中的Windows 8应用程序。

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

我曾尝试GridView和ListView控制，但这些，就不可能使每个元件具有其自身的高度（因为一个步骤可能只有一个文本行，以及下一个3行，例如）。 VariableSizedGridview也没有帮助。

我想实现的东西像微软Bing食品饮料&应用显示烹饪步骤的方式。因此，步骤显示在第一列中的行中，当到达页面的末尾时，它会创建第二列，依此类推。像这样：

任何人都可以请帮助我找到一种方法来实现这一目标吗？

什么控制使用和如何？

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

谢谢

以下是我与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

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

简而言之，将方向设置为水平的StackPanel，然后向其添加一个网格，并为每个项目添加行到该网格。当达到最大高度时（基于屏幕高度），我向StackPanel添加一个新的Grid，依此类推。

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

// 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); 
      } 
     } 

Answer 2

您可能要张贴你已经尝试了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 3

我试图在GridView和ListView控件，但这些，就不可能有每个元素都有其自身的高度

我的回忆是，事实上你可以使用这些控件拥有不同高度的元素。这两种类型的ItemsControl都支持数据模板，从而可以自定义每个项目的外观，包括其高度。

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

你应该阅读MSDN的Data Templating Overview，里面有整个过程的深入讨论，你可以做一些很好的例子一起。请特别注意名为“根据数据对象的属性选择DataTemplate”的部分。虽然单个模板的高度仍然可以变化，但根据您的特定需求，显然可以使用不同的模板，您可以根据自己的内容定制每个项目的样式。

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