locked
Multicolumn panel on windows store app

    Question

  • I want to achieve what i have in the following image:i

    i can print the list of persons for each country , but i can only do so in one column. I want to split the column like the case of Belgium(Bélgica) on the image

    i have made this code, altho its not quite working yet, i set my first ItemsControl source with a

    IEnumerable<IGrouping<string,OtherClass>>


    <StackPanel Background="White" Margin="267,207,0,44" Grid.ColumnSpan="2">
                <ScrollViewer Margin="30,30,0,30" Height="444" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
                    <ItemsControl Name="ListCountries">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="0,0,10,0" Width="150">
                                    <TextBlock Text="{Binding Key}" Foreground="Red" />
                                    <ItemsControl ItemsSource="{Binding}" >
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate>
                                                <StackPanel Margin="0,10,0,0">
                                                    <TextBlock TextWrapping="Wrap" Text="{Binding title}" Foreground="Black" />
                                                    <TextBlock TextWrapping="Wrap" Text="{Binding desc}" Foreground="Gray" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                    </ItemsControl>
                                </StackPanel>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ScrollViewer>
            </StackPanel>

    it displays the persons of each country as i said, but it doesn't split the columns.
    how can i do that?

    i belive i have to use a WrapGrid, but i havent figure it out how.



    • Edited by Thought2 Saturday, February 8, 2014 5:14 PM
    Friday, February 7, 2014 6:39 PM

Answers

  • Instead of a TextBlock use a RichTextBlock and RichTextBlockOverflow combination. Take a look at the remarks in the RichTextBlockOverflow documentation for an example multi-column layout.

    --Rob

    Friday, February 7, 2014 8:02 PM
    Moderator