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.

enter image description here

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

score 0 · Accepted Answer · answered May 21 '12 at 05:32

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.

score 0 · Answer 2 · answered May 22 '12 at 07:29

0

I may be misunderstanding the question, but why can't you use a StackPanel?

Just use a StackPanel and set its Orientation property to Horizontal. The WrapPanel isn't suited for what you are trying to do.

answered May 22 '12 at 07:29

Chris Dworetzky

940
4
9

Hi Its Also Not Working For Me. I Have Tried Your Method. Actually I Have Two Controls in My Stack Panel. I Want My Controls Always Float To Right. So Thats Why I Was Using WrapPanel. If You Have Any Idea Do Let me Knw – Arslan Pervaiz May 22 '12 at 07:49

score 0 · Answer 3 · answered Nov 06 '12 at 10:54

You want to use HorizontalAlignment="Right" in the element containing your control list. something like

<Grid HorizontalAlignment="Right">
    <StackPanel>...items...</StackPanel>
</Grid>

might do the trick. Be warned, however, I haven't tried this one out.

windows phone 7 wrappanel is not working

3 Answers3