Question

我正在使用C＃创建一个Windows Phone 8应用程序，我正在尝试将XML的输出显示到带有多个列表框的Pivot页面，阻碍我的唯一障碍是配料盒中的项目对齐，它们看起来像这样：

食盐
1
捏

当我真的希望它们像这样出现时

食盐
1 Pinch

基本上每个项目都出现在一个单独的行上，并且通过使用堆栈面板搞乱，我似乎无法在同一行显示任何内容，这是我目前正在使用的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

如果是我，我会在您的数据模板中嵌套另一个堆栈面板

   <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 2

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 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 =“Horizontal”

 <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>

ListBox中的项目对齐方式

4 个答案: