CODEWITHSUNDEEP
windows-phone-7xaml
Jerodev
Jerodev

Reputation: 33206

Stretch stackpanel

I want to create a list of songs using a listbox, but I got an issue with the layout.

Currently I use the following xaml:

<ListBox x:Name="lstHistory" HorizontalAlignment="Stretch" Margin="12,284,0,90" Width="460">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                        <StackPanel Orientation="Horizontal">
                            <Image Margin="5" VerticalAlignment="top" Source="{Binding Image}" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <TextBlock Margin="8"
                                  TextWrapping="Wrap"
                                  VerticalAlignment="Top"
                                  HorizontalAlignment="Left"
                                  Text="{Binding Name}" />
                            <TextBlock Margin="8"
                                  VerticalAlignment="Top"
                                  HorizontalAlignment="Left"
                                  Text="{Binding Artist}" />
                            <TextBlock Margin="8,0,8,8"
                                  VerticalAlignment="Bottom"
                                  HorizontalAlignment="Right" Text="{Binding Time}" Opacity="0.25" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

I would like to have the time on the far right bottom corner of the list item, but every time it ends up in the middle of the screen.

This is an example of what I get: enter image description here

Can anyone tell me how to get the time there?

Upvotes: 0

Views: 3690

Answers (2)

Matt Lacey
Matt Lacey

Reputation: 65586

HorizontalAlignment="Stretch" won't work on a StackPanel. You should set an explicit Width (probably 432) instead.

Also, the Image doesn't need to be in a StackPanel all by itself.

Upvotes: 0

Shawn Kendrot
Shawn Kendrot

Reputation: 12465

By default the ListBoxItem takes up as little space as possible. This is also true for a StackPanel. In order to have it span you must set the HorizontalContentAlignment of the ListBox to Stretch, and set the HorizontalAlignment of the StackPanel to Stretch (which you are already doing). You'll also need to set the ItemContainerStyle for the ListBox

<ListBox x:Name="lstHistory" HorizontalContentAlignment="Stretch" Margin="12,284,0,90">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                    <Image Margin="5" VerticalAlignment="top" Source="{Binding Image}" />
                    <StackPanel Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                        <TextBlock Margin="8"
                              TextWrapping="Wrap"
                              VerticalAlignment="Top"
                              HorizontalAlignment="Left"
                              Text="{Binding Name}" />
                        <TextBlock Margin="8"
                              VerticalAlignment="Top"
                              HorizontalAlignment="Left"
                              Text="{Binding Artist}" />
                        <TextBlock Margin="8,0,8,8"
                              VerticalAlignment="Bottom"
                              HorizontalAlignment="Right" Text="{Binding Time}" Opacity="0.25" />
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>

Upvotes: 5

Related Questions