I have a questions about window phones layout

Question

I want to make a 2x2 of Rectangle in my xaml code. (I use a panorama control in windows phone layout) like this..

O O

O O

I use this code.

                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel   FlowDirection="LeftToRight" Orientation="Horizontal" Margin="0,0,0,17">
                            <!--Replace rectangle with image-->
                            <Rectangle Height="100" Width="100" Fill="Orange" Margin="12,0,9,0"/>
                            <StackPanel  Width="311">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PanoramaItem>    

but that makes ...

O

O

O

O

How can I solve this problem? Let me know! please! Thanx! :)

Answer 1

It looks like you're using a listbox in your template, but lists are meant to go straight down. You can do things inside the listbox items that make them look a certain way, but the list box will always create a straight up and down list of items.

If you want a grid pattern, use the grid control and the Grid.RowDefinitions and Grid.ColumnDefinitions to make the correct pattern.

Answer 2

Your problem is with tag or ? Question is not so clear. If I understand correctly, this should solve your problem.

<StackPanel  Width="311" Orientation="Horizontal">

try this for the inner Stackpanel