Представляем список шагов

Question

Я работаю над приложением Windows 8 в C#/XAML.

У меня есть список шагов для показа, и список может иметь один-много шагов.

Я пробовал элементы управления GridView и ListView, но с ними невозможно, чтобы каждый элемент имел собственную высоту (поскольку один шаг может иметь только одну строку текста, а следующие три строки, например). VariableSizedGridview тоже не помогает.

То, что я пытаюсь достичь, - это что-то вроде способа приготовления шагов в Microsoft Bing Food & Напиток. Итак, шаги показаны в строках в первом столбце, и когда конец страницы достигнут, он создает второй столбец и так далее. Например:

Может ли кто-нибудь помочь мне найти способ добиться этого?

Какой контроль над использованием и каким образом?

Это выглядит очень просто, но я не смог найти решение во время поиска в Интернете.

Спасибо

Вот что я сделал с контролем 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 с ориентацией, установленной на горизонтальную, и я добавляю к ней 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); 
      } 
     } 

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, который четко показывает, что вы пробовали, объясняя, что именно делает этот код и как это отличается от того, что вы хотите.