windows phone 7 wrappanel is not working

Question

I want to wrap my controls in horizontally in wp7 application. Thats Why I am Using Silverlight toolkit Wrap Panel. Its working fine until first row but after First Row my second control goes to second line.

After first line my textbox controls goes below that is wrong as its in wrappanel so it must be going right to my listbox items.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,0,0">
            <StackPanel>
                <toolkit:WrapPanel Orientation="Horizontal">
                <ListBox Name="lstDemo" SelectionChanged="lstDemo_SelectionChanged">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel>
                        </toolkit:WrapPanel>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" Margin="5,0,0,0"></TextBlock>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
                    <TextBox Name="txtHello" Margin="5,0,0,0" FontSize="20" />
            </toolkit:WrapPanel>

            </StackPanel>
        </Grid>

Please tell me how to fix that so my second control is coming always after listbox item as its in wrappanel and control are wrapping horizontally.

Answer 1

The wrap panel is working just as it is suppose to. The wrap panel takes its children and displays them side by side. So, in your example the outside panel is displaying the two children [ListBox][TextBox] side by side. Because you have the ListBox.ItemsPanel as a WrapPanel, it tries to shrink to the left. When your listbox has enough items to wrap, the width of the ListBox is now the width of the control. So the WrapPanel is still displaying the children side by side, but now the first child (ListBox) has a larger width.

So, your first example looks something like (using the side by side example from above_ [ListBox width:300][TextBlock] The second example: [ListBox width:480][TextBlock]

I'm sorry to say that there is no easy* way to do what you are asking.

*I always say that anything is possible in xaml. If you are willing to write a custom control you can accomplish this.