Binding to Silverlight WrapPanel

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>

— Sergey

2 Comments

  1. Pingback: Windows Phone: WrapPanel | wp7appdevelopment

Leave a Reply

Your email address will not be published. Required fields are marked *