I had recently investigated the use of WrapPanel for Silverlight. You can download it along with other controls as part of Silverlight Toolkit. Example on the web site does not demonstrate the binding to it, so here is how you would do it.
You cannot bind to WrapPanel directly because it does not have property to bind a list of items to. So, you have to use it as part or a control that inherits from ItemsControl. In the following example we are setting up ItemsPanel for ItemsControl to be WrapPanel. Then we also define a template for each individual items contained within the list. I am binding to SelectedItems property of a an object that ItemsControl’s DataContext property is pointing to. This property contains a list of items as List<T>. Each item has properties MyImage1, MyImage2, MyImage3, Name. So each item within the wrap panel has a title (Name) and three pictures. Here is the XAML for it:
<ItemsControl ItemsSource="{Binding SelectedItems}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <toolkit:WrapPanel> </toolkit:WrapPanel> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Grid Margin="5,5,5,5" > <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <PersonalysisSilverlightApplication:SLBackBoxUserControl /> <TextBlock FontSize="12" Foreground="#FFFFFFFF" Text="{Binding Path=Name}" TextWrapping="NoWrap" FontFamily="Arial" VerticalAlignment="Top" Grid.Row="0" Margin="5,5,5,0" HorizontalAlignment="Left" /> <Image Source="{Binding Path=MyImage1, Converter={StaticResource ConvertImage}}" Grid.Row="1" Margin="5,0,5,2" VerticalAlignment="Top" HorizontalAlignment="Left" /> <Image Source="{Binding Path=MyImage2, Converter={StaticResource ConvertImage}}" Grid.Row="2" Margin="5,0,5,2" VerticalAlignment="Top" HorizontalAlignment="Left" /> <Image Source="{Binding Path=MyImage3, Converter={StaticResource ConvertImage}}" Grid.Row="3" Margin="5,0,5,2" VerticalAlignment="Top" HorizontalAlignment="Left" /> </Grid> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>
Hi, nice tips.
Btw, have you tried binding to a custom UserControl instead of say TextBlock ? It just throws exception. haven’t yet figured out why.
Pingback: Windows Phone: WrapPanel | wp7appdevelopment