Skip to main content

C# - Using An ItemsPanel In WPF [Beginner]


One of the most useful things about WPF is how flexible all of the built in controls are. Don't like how the tabs look on a tab control? Restyle them! Need to have images inside your combo box? Sure, no problem! This flexibility extends deep into a number of controls, and today we are going to take a look at controlling layout in an ItemsControl by setting the ItemsPanel.

An ItemsControl? An ItemsPanel? What are those? Well, an ItemsControl "represents a control that can be used to present a collection of items" (according to MSDN). Things like ListBox, ComboBox, and Toolbar all derive from ItemsControl. The ItemsPanel is the the panel used to layout the items in an ItemsControl, and can be anything that derives from the Panel class, even custom panels that you write. The default panel used in an ItemsControl depends on the control - for instance, the ListBox uses a VirtualizingStackPanel.

So the reason that I first looked into ItemsPanel was actually really simple - I wanted to make a ListBox that scrolled horizontally instead of vertically. I initially expected this to just be some sort of property on the ListBox itself, but that is not actually the case. You actually need to change the ItemsPanel of the ListBox to a VirtualizingStackPanel that has the orientation set to Horizontal.

So, while having this code:
<ListBox>
  <Image Source="Images\Aquarium.jpg" Width="100"/>
  <Image Source="Images\Ascent.jpg" Width="50"/>
  <Image Source="Images\Autumn.jpg" Width="200"/>
  <Image Source="Images\Crystal.jpg" Width="75"/>
  <Image Source="Images\DaVinci.jpg" Width="125"/>
  <Image Source="Images\Follow.jpg" Width="100"/>
  <Image Source="Images\Friend.jpg" Width="50"/>
  <Image Source="Images\Home.jpg" Width="150"/>
  <Image Source="Images\Moon flower.jpg" Width="100"/>
</ListBox> 
 
Gives you the standard vertical look:

Standard List Box with images 

To get it horizontal, like this:

Horizontal ListBox

You need to add an ItemsPanel tag:
<ListBox>
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <VirtualizingStackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
  <Image Source="Images\Aquarium.jpg" Width="100"/>
  <Image Source="Images\Ascent.jpg" Width="50"/>
  <Image Source="Images\Autumn.jpg" Width="200"/>
  <Image Source="Images\Crystal.jpg" Width="75"/>
  <Image Source="Images\DaVinci.jpg" Width="125"/>
  <Image Source="Images\Follow.jpg" Width="100"/>
  <Image Source="Images\Friend.jpg" Width="50"/>
  <Image Source="Images\Home.jpg" Width="150"/>
  <Image Source="Images\Moon flower.jpg" Width="100"/>
</ListBox> 
 
Not too terrible, but it is a little wordy. At first I was disappointed at having to write that much just to change a simple orientation property, but then I realized what kind of power this gives you over ItemsControls. Say, for instance, I wanted to use that Animated Wrap Panel as the ItemsPanel inside of a ListBox. Well, it really couldn't be any easier:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <ARP:AnimatedWrapPanel />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
  <Image Source="Images\Aquarium.jpg" Width="100"/>
  <Image Source="Images\Ascent.jpg" Width="50"/>
  <Image Source="Images\Autumn.jpg" Width="200"/>
  <Image Source="Images\Crystal.jpg" Width="75"/>
  <Image Source="Images\DaVinci.jpg" Width="125"/>
  <Image Source="Images\Follow.jpg" Width="100"/>
  <Image Source="Images\Friend.jpg" Width="50"/>
  <Image Source="Images\Home.jpg" Width="150"/>
  <Image Source="Images\Moon flower.jpg" Width="100"/>
</ListBox>
 
Since the AnimatedWrapPanel derives from Panel, I can just drop it in there, and it works. The only other thing that had to be changed is the HorizontalScrollBarVisibility on the list box, and that is because for the AnimatedWrapPanel to work right, the container can't be allowed to scroll horizontally. So with that set, the ListBox ends up looking like this:

List Box with Animated Wrap Panel

Of course, the static picture doesn't really show off the animated nature of the AnimatedWrapPanel, but oh well.

So you can also set the ItemsPanel for an ItemsControl in C# code, although it is even wordier than the XAML. Below is the code to replicate the first example, making a list box list items horizontally:
FrameworkElementFactory factory = 
    new FrameworkElementFactory(typeof(VirtualizingStackPanel))

factory.SetValue(VirtualizingStackPanel.OrientationProperty, Orientation.Horizontal)

specialListBox.ItemsPanel = new ItemsPanelTemplate(factory);
 
The annoying thing here is that you end up having to create a factory - which is happening behind the scenes in the XAML code too, you just didn't have to explicitly write it out. Well, that is it for how to use an ItemsPanel in WPF.
Labels:

Comments

Post a Comment

Popular posts from this blog

C# Snippet - Shuffling a Dictionary [Beginner]

Randomizing something can be a daunting task, especially with all the algorithms out there. However, sometimes you just need to shuffle things up, in a simple, yet effective manner. Today we are going to take a quick look at an easy and simple way to randomize a dictionary, which is most likely something that you may be using in a complex application. The tricky thing about ordering dictionaries is that...well they are not ordered to begin with. Typically they are a chaotic collection of key/value pairs. There is no first element or last element, just elements. This is why it is a little tricky to randomize them. Before we get started, we need to build a quick dictionary. For this tutorial, we will be doing an extremely simple string/int dictionary, but rest assured the steps we take can be used for any kind of dictionary you can come up with, no matter what object types you use. Dictionary < String , int > origin = new Dictionary < string , int >(); ...
1 comment
Read more

C# WPF Printing Part 2 - Pagination [Intermediate]

About two weeks ago, we had a tutorial here at SOTC on the basics of printing in WPF . It covered the standard stuff, like popping the print dialog, and what you needed to do to print visuals (both created in XAML and on the fly). But really, that's barely scratching the surface - any decent printing system in pretty much any application needs to be able to do a lot more than that. So today, we are going to take one more baby step forward into the world of printing - we are going to take a look at pagination. The main class that we will need to do pagination is the DocumentPaginator . I mentioned this class very briefly in the previous tutorial, but only in the context of the printing methods on PrintDialog , PrintVisual (which we focused on last time) and PrintDocument (which we will be focusing on today). This PrintDocument function takes a DocumentPaginator to print - and this is why we need to create one. Unfortunately, making a DocumentPaginator is not as easy as...
Post a Comment
Read more

C# WPF Tutorial - Implementing IScrollInfo [Advanced]

The ScrollViewer in WPF is pretty handy (and quite flexible) - especially when compared to what you had to work with in WinForms ( ScrollableControl ). 98% of the time, I can make the ScrollViewer do what I need it to for the given situation. Those other 2 percent, though, can get kind of hairy. Fortunately, WPF provides the IScrollInfo interface - which is what we will be talking about today. So what is IScrollInfo ? Well, it is a way to take over the logic behind scrolling, while still maintaining the look and feel of the standard ScrollViewer . Now, first off, why in the world would we want to do that? To answer that question, I'm going to take a an example from a tutorial that is over a year old now - Creating a Custom Panel Control . In that tutorial, we created our own custom WPF panel (that animated!). One of the issues with that panel though (and the WPF WrapPanel in general) is that you have to disable the horizontal scrollbar if you put the panel in a ScrollV...
Post a Comment
Read more