提供步驟列表

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，它清楚地顯示了您嘗試過的內容，準確解釋代碼的作用以及與您希望執行的操作有何不同。