Creating a List box simliar to WrapPanel

09-25-2008 8:05 AM |

hiii

 I need to create a list box such that its item are able to align Vertically and when the space ends the items take up next column horizontally.

i have used the wrap panel a littlle so was thinking of using WrapPanel as the itemspanel, but found out that it is not supported in  the SilverLight.

I found out a sample code for wrap panel for silverlight, i used it in the ItemsPanel of the List Box but I am Unable to get the Horiznotal Scroll Bar.

 Can Any one help me on this matter, any solution other then the wrap panel usage is also welcome.

Re: Creating a List box simliar to WrapPanel

09-25-2008 8:55 AM |

A true WrapPanel is coming soon:

http://blogs.msdn.com/sburke/archive/2008/09/17/control-freak.aspx

Re: Creating a List box simliar to WrapPanel

09-25-2008 10:02 AM |

Hi,

I had the exact same requirement. Let me save you weeks of hassle! What you want to do can work - it works in WPF, I've tested it. I don't think there is a better solution to your problem other than a wrap panel.

If each listbox item has more than one element you can even put all those elements inside a stack panel, orientated vertically, then put the wrap panel around that.

I have tried 3 different custom wrap panels in Silverlight, and although they work inside the listbox the SCROLLBAR never works properly or does not appear.

The only wrap panel I have found that will work inside the listbox or a scrollviewer (ie. the scroll bar appears and works) is the AnimatedWrapPanel found here:

http://blogs.msdn.com/devdave/archive/2008/07/17/layout-transitions-an-animatable-wrappanel.aspx

Demo is here: http://scorbs.com/silverlight/wrappanel/

Its a great wrap-panel and works wonders!

Regards,

Richard

PS Please mark this as answer if it is!

Re: Re: Creating a List box simliar to WrapPanel

09-26-2008 1:30 AM |

Hello rmcsharry,

The application you have refeered is quite nice but my requirement is to have a listbox whose ItemsPanel is like this wrapPanel so when i select an item from it I can do my custom work.

e.g. on clicking the employee pic i want to show the Employee Details.

If you have any other suggestion to do the same thing in some other way then your suggestions will be welcome.

Re: Re: Creating a List box simliar to WrapPanel

09-26-2008 11:18 AM |

Hi again,

I wasn't saying that you use that application. That application is just a DEMO of how the animated wrap panel works.

To build a listbox with the wrap-panel inside, you can use code below.

Add the namespace reference at the top of your file (make sure you have the animatedwrappanel.cs code added to your project also in its own class file). The bold can be pretty much any name you choose:

xmlns:awpanel="clr-namespace:AnimatedWrapPanel"

<ListBox x:Name="myList" Margin="5,5,5,5">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <awpanel:AnimatedWrapPanel>

                    </awpanel:AnimatedWrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

            <ListBox.ItemTemplate>
            <DataTemplate>

                    <Image x:name="imgEmployee" Width="100" Height="100"
                                  Source="{Binding EmployeePicture}"
                                  MouseLeftButtonDown="imgEmployee_MouseLeftButtonDown"/>

            </DataTemplate>         
          </ListBox.ItemTemplate>      
           
        </ListBox>

Then in your event handler in code-behind you can react to the user clicking the image.

If you want more than just an image as each listbox item then your data template can include that inside, for example, a stack panel:

<StackPanel Orientation="Vertical" Margin="5" Width="110" Height="150">                      
      <TextBlock Text="{Binding EmployeeID}"/>
       <Image x:name="imgEmployee" Width="100" Height="100"
                                  Source="{Binding Picture1, Converter={StaticResource ImageConverter}}"
                                  MouseLeftButtonDown="imgEmployee_MouseLeftButtonDown"/>
      <TextBlock Text="{Binding EmployeeName}"/>                    
</StackPanel>

Although in this situation you might want the mouse event to fire if they click anywhere in the stack panel.

Don't forget to bind the list with the employee data, eg:

this.myList.ItemsSource = <your list of employees>;

Regards,

Richard

PS Don't forget to mark as answer please.

Re: Re: Re: Creating a List box simliar to WrapPanel

09-29-2008 1:08 AM |

My problem is that I am not getting any scroll bar for the items that are not visible inside the wrap panel in a single screen. eg i have 100 items in list box and i can only show 10 at a time in the wrap panel. Now I dont know how to see the other items.

Re: Re: Re: Creating a List box simliar to WrapPanel

09-30-2008 7:54 AM |

murtaza.dharwala:

My problem is that I am not getting any scroll bar for the items that are not visible inside the wrap panel in a single screen. eg i have 100 items in list box and i can only show 10 at a time in the wrap panel. Now I dont know how to see the other items.

Yes I understand that. It is the exact same problem I had:

http://silverlight.net/forums/t/28349.aspx

Have you tried using the animated wrap panel? If not, then probably it's the wrap panel that is the problem. If you don't believe me, then try creating a WPF application that does the same thing and you will see that it works in WPF (since WPF has a default wrap panel). If you have not tried the animated wrap panel, please try that in Silverlight.

Or you can wait till the full release of Silverlight (probably in October) since it will come with a wrap panel as default.

Regards,

Richard