列表框中的項目對齊

Question

我正在用C＃製作Windows Phone 8應用程序，我試圖用多個列表框來顯示XML到帶有幾個列表框的數據透視頁面的輸出，唯一的障礙是我的方式在配料框中的項目，他們似乎是這樣的：

• 食鹽
• 捏

當我真正希望他們能夠出現這樣的

• 食鹽
• 1撮

基本上每個項目將出現在單獨一行，並通過與疊板亂搞我似乎無法得到任何東西出現在同一行，這是我正在使用的xaml代碼：

  <Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0"> 
       <ListBox Height="600" HorizontalAlignment="Left" Margin="21,6,0,0" Name="ingredientsList" VerticalAlignment="Bottom" Width="413"> 
        <ListBox.ItemTemplate> 
         <DataTemplate> 
           <StackPanel> 
            <TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/> 
            <TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/> 
            <TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/> 
          </StackPanel> 
         </DataTemplate> 
        </ListBox.ItemTemplate> 
       </ListBox> 
      </Grid> 

任何人都可以提出修復建議嗎？提前致謝！

Answer 1

StackPanel堆棧包含垂直項目。你可以使用一個單一的TextBlock有兩個運行要素：

<StackPanel> 
    <TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/> 
    <TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Foreground="White"> 
     <Run Text="{Binding IngredientQuantity}" /> 
     <Run Text="{Binding IngredientUnit}" /> 
    </TextBlock> 
</StackPanel> 

Answer 2

如果是我，我會窩在你的數據模板的另一個堆疊面板

<DataTemplate> 
     <StackPanel Orientation="Vertical"> 
      <TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/> 
      <StackPanel Orientation="Horizontal">          
       <TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/> 
       <TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/> 
      </StackPanel> 
     </StackPanel> 
    </DataTemplate> 

Answer 3

可能是這樣

<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0"> 
        <ListBox Height="600" HorizontalAlignment="Left" Margin="21,6,0,0" Name="ingredientsList" VerticalAlignment="Bottom" Width="413"> 
         <ListBox.ItemTemplate> 
          <DataTemplate> 
            <StackPanel> 
             <TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/> 
             <StackPanel Orientation="Horizontal"> 
             <TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/> 
             <TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="10,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/> 
             </StackPanel> 
           </StackPanel> 
          </DataTemplate> 
         </ListBox.ItemTemplate> 
        </ListBox> 
       </Grid> 

Answer 4

使用StackPanel屬性Orientation =「Horizo​​ntal」

<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0"> 
          <ListBox Height="600" HorizontalAlignment="Left" Margin="21,6,0,0" Name="ingredientsList" VerticalAlignment="Bottom" Width="413"> 
           <ListBox.ItemTemplate> 
            <DataTemplate> 
            <StackPanel> 
            <TextBlock x:Name="lbl_Name" TextWrapping="Wrap" FontSize="20" Margin="0,10,0,0" Text="{Binding IngredientName}" Foreground="White" FontWeight="Bold"/> 
            <StackPanel Orientation="Horizontal">           
            <TextBlock x:Name="lbl_Quantity" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientQuantity}" Foreground="White"/> 
            <TextBlock x:Name="lbl_Unit" TextWrapping="Wrap" FontSize="20" Margin="0,0,0,0" Text="{Binding IngredientUnit}" Foreground="White"/> 
            </StackPanel> 
            </StackPanel>  
            </DataTemplate> 
          </ListBox.ItemTemplate> 
         </ListBox> 
        </Grid>