Windows Phone 7 - ListBox and Stackpanel sizes

Question

I Have a little problem with a ListBox and its elements. As you can see in my code, the stackpanel for both textblocks is set to 250. This is set like this because otherwise the text expands in 1 line and you cannot see the button. As obvious the problem is that setting this parameter as static, if the resolution or the orientation changes wont fit the screen completely. I would like to know if there is a way to set this width dynamically.

<ListBox x:Name="attractionsListbox" Margin="0,0,-12,0" ItemsSource="{Binding Attractions}" Loaded="attractionsListbox_Loaded">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Tag="{Binding Name}" Tap="AttractionListBoxItem_Tap">
                <Image Height="140" Width="140" Margin="0,5,0,0" Source="{Binding Thumbnail}" MaxWidth="140" MaxHeight="140" Stretch="Fill" />
                <StackPanel Width="250">
                    <TextBlock x:Name="AttractionName" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}" FontSize="20" Foreground="Black" FontWeight="Bold" />
                    <TextBlock Text="{Binding ShortDescription}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSmallStyle }" Foreground="Black" />
                </StackPanel>
                <Button Width="80" Height="80" Padding="10,3,10,5" BorderBrush="Black" Click="Add_Todo_Click" Tag="{Binding Name}">
                    <Button.Background>
                        <ImageBrush ImageSource="/SundsvallWP7;component/Images/appbar.add.rest.png"/>
                    </Button.Background>
                </Button>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

(In android there is weights, where you can assign the weight of each control, don't know if this exists in Windows Phone).

Thank you very much.

As far as I know, if I use it, when I click on the button it will fire that event and that's not what I want, as the button has its own specific function. — Jatago, May 19 '12 at 18:26
The button will absorb the event - seems like you have virtually the same setup as SelectionChanged would be, b/c you have a button inside of a container which has a Tap event. — William Melani, May 19 '12 at 18:31
True, just realized. Trying to fix the main problem I changed that. I added an extra stackpanel with horizontal orientation and got the button out of the stackpanel with the Tap event. That way its works fine. — Jatago, May 19 '12 at 18:40
The solution to your problem is to make a grid with 3 ColumnDefinitions: Auto, * (fill), and Auto. Put the image in Grid.Column="0", your StackPanel in Grid.Column="1" (remove the width also), and your Button in Grid.Column="2". — William Melani, May 19 '12 at 19:11
Thanks Willmel. The problem with that solution is that depending on how it fits the lines of the description text, the button will move to the left. I need the button in a static position on the right. I am thinking the best solution is going to be using the dockpanel. Thanks for the response! — Jatago, May 20 '12 at 08:03
If you give the button ColumnDefinition a Auto width, it will be forced to fit on the screen. so, the Image & Button will be forced to fit, and the remaining space will be given to your textboxes. — William Melani, May 20 '12 at 16:48

score 0 · Answer 1 · answered May 19 '12 at 18:33

0

A DockPanel may work better for your scenario than a StackPanel. Put the button on the right and the image on the left, then your middle StackPanel content will flow to fill.

http://www.windowsphonegeek.com/articles/Using-DockPanel-in-WP7.

Alternatively, there are only the two orientations and resolution shouldn't be changing. You could just bind the Width to the Orientation with a value converter.

answered May 19 '12 at 18:33

Joe Castro

2,181
18
24

That was also my idea. I saw that link before, but I though maybe there was an "standar" way to do it. I'll give it a try and tell you how did it go. Thanks! – Jatago May 19 '12 at 18:42

Windows Phone 7 - ListBox and Stackpanel sizes

1 Answers1