Windows 8 Layout on WPF using listbox or list view with data binding

Question

I'm trying to custom my layout to be like windows 8 layout :

Horizontal scroll
4 rows of elements (one Itemsource)

I'm binding RSS feed to my listbox , when i use a wrappanel i have problems with my DataTemplate .

i want also that the order of my element will be :

1 5 9 ...
2 6 10 ...
3 7 11 ...
4 8 12 ...
[Scroll ]

My Xaml for the listbox :

            <ListBox.ItemTemplate >
                <DataTemplate >
                        <Grid Width="400" Height="100" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="10"/>
                                <ColumnDefinition Width="2*"/>
                            </Grid.ColumnDefinitions>

                            <Image Source="{Binding XPath=enclosure/@url}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top"  />
                            <TextBlock TextWrapping="Wrap" Text="{Binding XPath=title}" FontWeight="Bold" Grid.Column="2"/>
                        </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>

i tried this but it doesn't work their is error on Listbox ItemTemplate :

    <ListBox ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
            </ItemsPanelTemplate>
            <ListBox.ItemTemplate >
                <DataTemplate >
                    <Grid Width="400" Height="100" Cursor="Hand"  >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="10"/>
                            <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding XPath=enclosure/@url}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top"  />
                        <TextBlock TextWrapping="Wrap" Text="{Binding XPath=title}" FontWeight="Bold" Grid.Column="2"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

Perhaps a picture of what you want would be useful. I'm finding it difficult to imagine what you are after. — Mike Eason
@MikeEason i cant post image on stackoverflow i'm new i haven't enough reputation i have tow pic i can't send them via mail — Ahd Bk

Valera Scherbakov Valera Scherbakov · Accepted Answer · 2015-06-04T11:27:01

You need to change WrapPanel Orientation to vertical

<ListBox.Resources>
    <ItemsPanelTemplate>
         <WrapPanel Orientation="Vertical"/>
    <ItemsPanelTemplate>
</ListBox.Resources>

and move DataTemplate section out from ItemsPanel definition

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate >
        <DataTemplate >
            <Grid Width="400" Height="100" Cursor="Hand"  >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding XPath=enclosure/@url}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top"  />
                <TextBlock TextWrapping="Wrap" Text="{Binding XPath=title}" FontWeight="Bold" Grid.Column="2"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Windows 8 Layout on WPF using listbox or list view with data binding

1 Answers