dynamically display two grid controls on each list items row in windows phone 8 apps

Question

actually i did some projects for windows phone 8 devices and with the concept of listbox control i have already listed some datas in listbox both statically and dynamically(Binding values to itemsSource).,

i have already know how to display single gridview on each list items like one grid view per list items.,

But my problem is , i want to display Two GridViews side by side on every single List.Items inside listbox Dynamically.,

Statically we can do by desing in XAML page that i know., But i dont know

" How To Dynamically Display 2 GridViews side by side on every List items on listbox control"

so My listBox should exactly look like this image.,

Image ListBox

Some one please help me how to display my contents on listbox items with 2 grid(side by side) on each list items

Or is there any other control there to display two grids side by side in windows phone

Thanks in advance

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

You can try to use <WrapPanel> from Windows Phone toolkit as ListBox's ItemsPanel to achieve that. For example :

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel ItemWidth="150" ItemHeight="250"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    .......
    .......
</ListBox>

<WrapPanel> arranges ListBox item left to right, then to next row when no more space available for next item in current row. Sample result of using <WrapPanel> can be seen in this SO post by @Xin :

enter image description here

edited May 23 '17 at 12:20

Community

1
1

answered Feb 25 '14 at 14:11

har07

88,338
12
84
137

thanks for your reply and is there any sample code link for toolkit wrapPannel control that i can understand more clear – Punniyam Moorthi Feb 25 '14 at 14:22
you can download source code from codeplex link above, it include sample project that demonstrates usage of each toolkit control. Actually, there won't be much codes to add to use WrapPanel other than what already shown here, in Aman's answer, or Xin's post :) – har07 Feb 25 '14 at 14:26
Thank you thousand timews guys, finally i got what i expected exactly – Punniyam Moorthi Feb 26 '14 at 07:13

score 1 · Accepted Answer · answered Feb 25 '14 at 14:23

just a listbox with a wrap panel inside could solve the issue

  <ListBox Width="460" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="402" HorizontalAlignment="Center" Name="lbScans" Margin="0,10,0,10">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel Width="460" HorizontalAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel> 
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>

Thank you thousand timews guys, finally i got what i expected exactly — Punniyam Moorthi, Feb 26 '14 at 07:13

dynamically display two grid controls on each list items row in windows phone 8 apps

2 Answers2