CODEWITHSUNDEEP
c#windows-phone-8listbox
BenMcGrath
BenMcGrath

Reputation: 17

Alignment of items in a ListBox

I'm making a Windows Phone 8 App with C# and I'm trying to display the output of XML to a Pivot page with several listboxes, the only hurdle standing in my way is the alignment of the items in the ingredients box, they appear like this:

When I actually want them to appear like this

Basically each item appears on a separate line and through messing around with stack panels I can't seem to get anything to appear on the same line, this is the xaml code I'm using currently:

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

Can anyone suggest a fix? Thanks in advance!

Upvotes: 1

Views: 757

Answers (4)

DotNetRussell
DotNetRussell

Reputation: 9863

If it were me I would nest another stack panel in your Data Template

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

Upvotes: 2

Pradeep Kesharwani
Pradeep Kesharwani

Reputation: 1478

Use StackPanel property 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>

Upvotes: 1

A.K.
A.K.

Reputation: 3331

May be like this

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

Upvotes: 1

christianliebel
christianliebel

Reputation: 506

A StackPanel stacks contained items vertically. You could use one single TextBlock with two run elements:

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

Upvotes: 1

Related Questions