Fun with ItemsControl


Url: http://wilderminds.blob.core.windows.net/downloads/notalistbox.zip

Silverlight Logo

I spend a bit of time on the Silverlight forums and I've noticed a trend recently. A number of people are trying to get the ListBox to behave like something other than a ListBox. Most often I find it when someone is trying to handle mouse effects for items in a DataTemplate in a ListBox. What's interesting about that is that many are surprised by the neat little ItemsControl control.

For example, here I have a small little Silverlight app that shows some XBox games in a scrollable horizontal list:

Get Microsoft Silverlight

Notice that in this example I don't care about the 'selected' behavior and/or look and feel of the ListBox. I just want to display a series of items. I might want to do a pop-up when someone hovers over an item or even use things like hyperlinks in the items.  In these cases using a ListBox can become a problem because the ListBox wants to handle mouse events instead of handing them to me.  That's where the ItemsControl comes in.

The ItemsControl element is actually the base class of the ListBox and ComboBox so the API should be familiar:

<ItemsControl ItemsSource="{StaticResource theGames}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <Border BorderBrush="Black"
              CornerRadius="10"
              BorderThickness="2"
              Margin="2"
              Padding="2"
              Background="#80000000">
        <StackPanel Width="150"
                    Height="150">
          <Image Source="{Binding ProductImageUrl}"
                 Height="100"
                 Width="80" />
          <TextBlock Text="{Binding ProductName}"
                     FontWeight="Bold"
                     FontSize="14" />
        </StackPanel>
      </Border>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

Notice the ItemsControl uses the same ItemsSource property and ItemTemplate that you're probably already using in your ListBox. Next we can use the ItemsPanel property to change the orientation of the control to be horizontal instead of vertical (notice the horizontal StackPanel that does this for us):

<ItemsControl.ItemsPanel>
  <ItemsPanelTemplate>
    <StackPanel Orientation="Horizontal"
                VerticalAlignment="Center"
                HorizontalAlignment="Center" />
  </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Lastly, we can surround it all with a ScrollViewer to give it the scrolling effect we might get from the ListBox:

<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible"
              ScrollViewer.VerticalScrollBarVisibility="Hidden">
  <ItemsControl ItemsSource="{StaticResource theGames}">
    <!-- ... -->
  </ItemsControl>
</ScrollViewer>

If your interested in how this all works together at runtime, go grab the source code and play around with it.  But take my advice and if you are looking for something similar to the ASP.NET Repeater control with a lot more power, grab the ItemsControl and go to town! 


Bootstrap 4 is Here!

After a long development cycle, Bootstrap has been completely re-written to improve performance and be more consistent. Learn Bootstrap 4 now with my Wilder Minds course:

Enroll Today


Shawn
Shawn Wildermuth
Author, Teacher, and Coach




My Courses

Wilder Minds Training
Vue.js by Example (Now Available)
Bootstrap 4 by Example
Intro to Font Awesome 5 (Free Course)
Pluralsight
Less: Getting Started (Coupon Available)
Building a Web App with ASP.NET Core, MVC6, EF Core, Bootstrap and Angular (updated for 2.1)
Using Visual Studio Code for ASP.NET Core Projects
Implementing ASP.NET Web API
Web API Design

Application Name WilderBlog Environment Name Production
Application Ver v4.0.30319 Runtime Framework x86
App Path D:\home\site\wwwroot\ Runtime Version .NET Core 4.6.27019.06
Operating System Microsoft Windows 10.0.14393 Runtime Arch X86