LB-SV-FAQ [Examples, Notes, Tips, and More for Silverlight 2 Beta 1’s ListBox and ScrollViewer controls!]


This blog has moved to a new location and comments have been disabled.

All old posts, new posts, and comments can be found on The blog of dlaa.me.

See you there!

Comments (52)
  1. Here comes the Silverlight 2 Beta 1. Go ahead download here and read about the new features of Silverlight

  2. Here comes the Silverlight 2 Beta 1. Go ahead download here and read about the new features of Silverlight

  3. If you’re digging into Silverlight 2 and the controls available then you should check out Delay’s blog

  4. This is going to be not only BUSY… but is going to take a while on this connection. I think I'm

  5. This is going to be not only BUSY… but is going to take a while on this connection. I think I'm

  6. If you're digging into Silverlight 2 and the controls available then you should check out Delay's

  7. Delay's Blog says:

    In the Silverlight 2 ListBox/ScrollViewer FAQ , I mentioned that I’d done a lot of Silverlight control

  8. In the Silverlight 2 ListBox/ScrollViewer FAQ , I mentioned that I'd done a lot of Silverlight control

  9. Delay's Blog says:

    In my Silverlight 2 ListBox/ScrollViewer FAQ I described some common scenarios and demonstrated how to

  10. In my Silverlight 2 ListBox/ScrollViewer FAQ I described some common scenarios and demonstrated how to

  11. Ux Musings says:

    I wanted to create a quick walkthrough of how to hook data up to both ListBox and Datagrid. In this walkthrough,

  12. CorrinaB says:

    Delay’s blog has some great info on how to use ListBox in various ways (he covers most of the key scenarios for how to use listbox) that will be a great thing to check out as well as this post…

  13. It has been three weeks since we annouced Silverlight 2 at MIX08. Many of you are excited to getting

  14. EranSun says:

    Hi….

    I’ll say 1st that I’m a designer and not a developer, sorry ( can you talk slowly .. ^_^ )

    I can’t seem to find any reference on how to override the default behaviors of the list box such as:

    1.the 1px gray line separator between items on the list box

    2. the on Hover gradient.

    3. the selected item gradient.

    4. margin/padding between items.

    5. *changing the look of the scrollviewer.

    6. scrolling without scrollviewer.

    Thanx a lot..

  15. Delay says:

    EranSun,

    Please have a look at the "Minimally templated ListBox and ListBoxItem with Template and ControlTemplate" example in my blog above for your points 1, 2, 3, 4, and 5. The very basic styling I’ve done there should already demonstrate 1 and 4 – and the general technique is exactly what you’d do for 2, 3, and 5. Briefly, it’s just a matter of providing your own custom template for the control – possibly starting from the default template for reference. For 6, you’d probably want to use ScrollBar directly – it exposes the necessary events to do proper scrolling, though it probably takes a bit of code to hook everything up. In general, ScrollViewer should meet most scrolling needs, but when it doesn’t, ScrollBar should do the trick.

    For more on a few of the techniques I’ve mentioned (total look customization, default template access, etc.), please have a look at some of my other Silverlight posts and samples: http://blogs.msdn.com/delay/archive/tags/Silverlight/default.aspx

    Hope this helps!

  16. EranSun says:

    Thank you very much…

    after I’ve read your post on minimally templated ListBox, I got the syntax of the writing but I don’t understand/know the properties/"setter" for changing the styling,

    like what is the setter for seperator/onhover/selected ..

    Sorry for petty comments

  17. Delay says:

    EranSun,

    I’ve found the MSDN documentation on Silverlight Control customization very helpful for learning about this stuff:

    http://msdn2.microsoft.com/en-us/library/cc278068(vs.95).aspx

    The default styles/templates for ListBox/ListBoxItem are part of that documentation and are here:

    http://msdn2.microsoft.com/en-us/library/cc278062(vs.95).aspx

    To specifically address your questions, you’re probably going to want to specify a custom ListBoxItem template (using the ListBox.ItemContainerStyle property I demonstrate in the FAQ should do nicely):

    * Removing the separator is simply a matter of removing the <Line> element near the bottom of the ListBoxItem template

    * The default selected appearance is specified by the "Normal Selected State" state

    * The default hover state is specified by the "MouseOver State"

    * The "MouseOver Selected State" represents the selected AND hovered appearance

    Good luck!

  18. EranSun says:

    Thank you very much,

    It is a great help..

    ^_^

    More then happy to invite you to our private beta very soon !!!

    http://www.semantinet.com 🙂

  19. I’ll be using this page to link to Silverlight 2 articles and posts (both ones I write as well ones by

  20. jeanf says:

    Just a question, in a ListBox I have among other controls a TaxtBlock with long text, so I configured TextBlock to wrap but in the listbox it’s allways on one line with horizontal scrolling.

    How can I force TextBlock to wrap text at the ListBox width ?

    Thanks for your help

    Jean (jeanf@afp.com)

  21. Delay says:

    Jean,

    By default, ListBoxItems are allowed to grow as large as they want and ListBox introduces ScrollBars if the content gets too big. You’ll see the same behavior you describe on both WPF and Silverlight. If you want to constrain the width of the ListBoxItems, then one easy way is to introduce a Width restriction on them via ListBox.ItemContainerStyle. The following XAML behaves as you want for Silverlight and WPF:

    <ListBox Width="100">

       <TextBlock Text="This is some test text to use for looking at wrapping" TextWrapping="Wrap"/>

       <TextBlock Text="More text to wrap" TextWrapping="Wrap"/>

       <ListBox.ItemContainerStyle>

           <Style TargetType="ListBoxItem">

              <Setter Property="Width" Value="94"/>

           </Style>

       </ListBox.ItemContainerStyle>

    </ListBox>

    (Note that I’ve chosen the value 94 because the ListBox’s border takes up 6 pixels on Silverlight and 100-6=94.)

  22. Delay's Blog says:

    One scenario I’ve seen cause a bit of trouble on the Silverlight Controls Forum is that of putting a

  23. asterite says:

    Please, please, please, add support for multiple selection. In our current application we need to select some elements and drag them somewhere else in order to trigger an action. We also need to be able to select multiple elements and show their common properties. And I can imagine many other scenarios where multiple selection is a must.

    Thanks,

    Ary

  24. Delay's Blog says:

    If you’ve made much use of data binding in WPF or Silverlight, you’ve probably come across the IValueConverter

  25. robmaransky says:

    Multiple selection is important for us as well

  26. One of the features I am missing at the moment from Silverlight 2 is SelectionMode=”Multiple” for Listboxes

  27. Miguel Madero says:

    Delay,

    In the Workaround for the Listbox, shouldnt you unsubscribe of the event (instead of using a flag), Woldnt it cause the static anonymous delegate to hold a reference to the control that will cause it to dont be released properly by the GC.

  28. Delay says:

    Miguel,

    That seems like a great suggestion! When I wrote the workarounds, I was more interested in demonstrating the concept than providing production-ready code and that’s probably why I didn’t complicate the examples with clean-up code. However, as I think about it now in response to your question, I’m not sure unsubscribing would really have added that much complexity, so I’m thinking I should have just done so in the interest of correctness. At any rate, I agree with you – though both workarounds should become unnecessary in an upcoming Silverlight update. 🙂

    Thanks very much for your feedback!

  29. Miguel Madero says:

    Delay,

    It’s great this will be fixed in an next update 🙂 and I like the approach you took to encapsulate it in an Extension Method, that way it can easily be spotted and removed when needed and in the meantime provides ease of use and code reuse.

    I’ll post another comment with a bug (weird behavior) I found.

  30. Miguel Madero says:

    Delay,

    I have more information and workarounds under this topic, but everytime I try to post it, I’m redirected to the homepage of your blog. So I will be brief. If you need greated detail you can check the Silverlight forum:

    http://silverlight.net/forums/p/19509/66596.aspx#66596

    The SelectionChanged event is launched before the item is actually selected. It should be called SelectionChanging to reflect what it’s actually happening. The problem this is causing is that in that event I’m changing the ItemSource, so by the time the control actually sets the selectedItem (after the evenr was fired), the item is not present in its dictionary and fails. This is the exception.

  31. Delay says:

    Miguel,

    Sorry for the trouble with posting to the blog – I rely on the MSDN folks to set things up correctly. 🙂 At any rate, I’ve replied to your forum post just now – we should continue the discussion there.

    Thanks again for your feedback!

  32. Miguel Madero says:

    I know there’s probably a better way to do it, at least there’s in WinForms and ASP.NET. As always the workaround for me has been databinding, but I thinks it’s too much overhead for simple tasks. Probably it all comes down to the fact the SL and WPF are more datacentric rather than controlCentric. Anyway, here’s the issue.

    It’s ok beeing datacentric and sometimes it’s easy to get to the data through the controls, i.e. listBox.SelectedItem and listBox.Items will get you a product and a IEnumerable<Products> instead of controls you could iterate over.

    Imagine I have nested ListBoxes as shown and I need to get to the selectedItem for each of the inner listBoxes. In this case I dont care about the controls, I only care about the selectedItem (product) but I’d to get to each inner listbox to get it.

    <ListBox ItemsSource="{StaticResource Categories}">

       <ListBox.ItemTemplate>

           <DataTemplate>

    <StackPanel>

    <TextBloc Text="{Binding CategoryName}"

               <ListBox Orientation="Horizontal" ItemsSource="{Binding Products}">

       <ListBox.ItemTemplate>

           <DataTemplate>

                   <Image Source="{Binding Image}"/>

                   <TextBlock Text="{Binding Name}"

           </DataTemplate>

    </ListBox.ItemTemplate>

             </StackPanel>

           </DataTemplate>

       </ListBox.ItemTemplate>

    </ListBox>

    I wanted to know, what are your toughts about this.

    Workaround 1. Databinding. 2. Maintain a temporary dictionary<ListBox,Product> that contains the sender as key and the selectedItem as value and update that on each SelecionChanged event.

  33. Delay says:

    Miguel,

    I like both of your workarounds – and don’t have anything more compelling to suggest at the moment. 🙂 For #1, I’m thinking you mean to use a TwoWay Binding to automatically update the source. This seems elegant because when the user is done selecting, your data structure already includes all the selection information you want. For #2, I think this is a bit more work to implement, but I’m more confident that it can be implemented successfully. 🙂

  34. Miguel Madero says:

    Delay,

    What are your toughts about this for future releases? Would there be a way in the future to get to the inner controls?

  35. Delay says:

    Miguel,

    In case you’re not familiar with it, there’s already the VisualTreeHelper class for both Silverlight and WPF. It lets you walk the visual tree and will let you get a reference to any part of it if you know what you’re looking for. It may be useful here, though I didn’t mention it before because it didn’t seem quite what you were looking for. Regarding future innovation, I don’t know where things are headed, so I’m afraid I can’t be too helpful there.

  36. Miguel Madero says:

    Wow, this looks exactly what I was looking for. It would be nice if GetChild has an overview to get the elements by Name instead of index.

    Thanks

  37. (以下内容全部整理自博客堂Scottgu博客中文版)Silverlight技巧,诀窍,教程和链接 【原文地址】SilverlightTips,Tricks,…

  38. Miguel Madero says:

    Delay,

    A nice improvement for LB would be to offer an Empty Template just like the gridView in ASP.NET does.

    🙂

  39. Delay says:

    Thanks, Miguel! I’ll pass this suggestion on to the relevant people.

  40. Miguel Madero says:

    Delay,

    In this post you say an option for investigatin possible bugs is to …’switch to a debug version of System.Windows.Controls.dll so I can set breakpoints’… Can we do this? Is there a version available for this dll?

  41. Delay says:

    Miguel,

    In the blog post above, I provide a link to a download for the "Source Code and Unit Tests for Silverlight 2 Beta 1 Controls" [http://www.microsoft.com/downloads/details.aspx?FamilyID=ea93dd89-3af2-4acb-9cf4-bfe01b3f02d4&DisplayLang=en]. In the Beta 1 timeframe, that download was enough for someone to compile their own System.Windows.Controls.dll (containing Button, ListBox, …), set breakpoints in it, make changes for testing, etc.. With Silverlight Beta 2, most of the controls in that assembly became part of the Silverlight runtime – and the source code for the updated controls was not released by the Silverlight team. However, it’s my understanding that source for those controls WILL be available for the Silverlight RTM – and the approach I describe will again become possible.

    Hope this helps!

  42. Miguel Madero says:

    Too bad 🙁 it would be useful to spot bugs in Beta 2….

    Source server might be another good option, instead of releasing as a download.

  43. Silverlight ListBox SelectedItem/SelectedIndex Visual State Bug Workaround

  44. adamjcooper says:

    Thanks for the ListBox SelectedItem/SelectedIndex workaround. It was just what I needed for a project.

    I did notice though, like Miguel, that your implementation was artificially growing the list of event handlers that needed to be called. So I created a similar version that doesn’t suffer from the same problem. But rather than use extension methods which must be called explicitly, I extended ListBox so that the functionality is always present. Works like a charm. Thanks a million.

    For anyone else who may be interested, I’ve posted my implementation at:

    http://www.adamjcooper.com/blog/post/Silverlight-ListBox-SelectedItemSelectedIndex-Visual-State-Bug-Workaround.aspx

    Adam Cooper

  45. Delay says:

    Thanks, Adam!

  46. I found this blog post invaluable when trying to debug a personal Silverlight project. The ListBox object

  47. truejob says:

    Silverlight技巧,诀窍,教程和链接

    【原文地址】SilverlightTips,Tricks,TutorialsandLinksPage

    我将使用本页链接到有关Silve…

  48. Andrus says:

    The same SelectedIndex bug is present in Silverlight 4 DataGrid:

    forums.silverlight.net/…/185272.aspx

    Your fix seems to fix this also.

  49. Andrus says:

    Adam Cooper's link redirects to his homepage. Where we can find this article?

  50. Delay says:

    Andrus,

    Glad to hear my fix is more generally applicable – thanks for letting me know! 🙂

    Regarding the Adam Cooper link, contacting Adam is probably best; he's more likely to keep track of that stuff than I am.

  51. Kiran Ghanwat says:

    Hey,

    How do I set scroll position to 0 or reset scroll?

  52. Delay says:

    Kiran Ghanwat,

    The ListBox.ScrollIntoView method is probably what you want – just pass the 0th item: msdn.microsoft.com/…/system.windows.controls.listbox.scrollintoview(VS.95).aspx

    Hope this helps!

Comments are closed.