Posted by: Cirilo Meggiolaro | 12/7/2008

Tip of the day #54 – Customizing layout of WPF ListBox controls

Let’s check today how to customize a Windows Presentation Foundation (WPF) listbox control.

If you haven’t worked with WPF yet but you have any experience with web development you’ll find some similarities between both on how to handle controls properties and layouts.

The following picture displays a regular form for a WPF application.

The form designer on the top and the XAML code on the bottom.

Picture 1 - The WPF form designer.

You may notice two different sections: A regular form designer on the top and the XAML code on the bottom.

Just to create a link, imagine the XAML code for WPF applications as the html code for web applications. You have the ability to drag and drop controls and set properties on the Properties Windows or change directly the XAML code.

So, let’s check now how to create a WPF listbox control that displays customer information with customized layout:

1. Open Visual Studio 2008;
2. Click on File > New > Project;
3. Select Windows > WPF Application;
4. Choose a name and a location for your new application and click OK;
5. From the Toolbox, drag and drop a ListBox control to your form;
6. Using either the properties window or the XAML window, change the property name to lstEmployees;
7. This example uses an entity object named Employee that stores the items that will be displayed in our listbox control. The following code defines the employee class:

public class Employee
{
  public string FirstName { get; set; }
  public string LastName { get; set; }
  public string Branch { get; set; }
  public string Department { get; set; }
}

8. Back to our layout, let’s define the orientation of our listbox control. It’s true. You can have a listbox control that instead of piles items up, it puts side by side and add a horizontal scrollbar. To accomplish that we are going to define the template for the ItemsPanel object that is the base where the items are added. The following XAML code performs that:

<ListBox x:Name=”lstEmployees”>
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation=”Horizontal” />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

9. To define the layout for each item we are going to use the ListBox.ItemTemplate and the DataTemplate blocks. For our example, the following items will be customized:

  • Add a border for each item;
  • Define text properties as size, color and background.
  • Bind properties from our customer class to our customized item on both vertical and horizontal flow.

Start creating a ListBox.ItemTemplate block;

<ListBox.ItemTemplate></ListBox.ItemTemplate>

Define a DataTemplate block inside the ItemTemplate block;

<DateTemplate></DateTemplate>

The border will be around the entire item, so let’s define a border and the rest of the settings will be inside it. The following XAML defines the border color, thickness, margin and a corner radius to make it round.

<Border BorderBrush=”Black” Margin=”2,0,2,0″ BorderThickness=”1″ CornerRadius=”4″></Border>

Now that we have the basic structure for our item, let’s create our layout. The idea is to display the data in some layout similar to the one described below:

FirstName LastName

Branch: Branch Name

Department: Department Name

To accomplish that and to make easier for you to understand, there are several controls that may act as containers for other controls. One of the most important containers is the StackPanel that is used to arrange controls in either vertical or horizontal flow in a single line.

For our example we will need one Vertical stack panel to pile up the lines and one horizontal StackPanels for each line. The code for the StackPanels must be similar to the next code snippet:

<StackPanel Orientation=”Vertical”>
  <StackPanel Orientation=”Horizontal”></StackPanel>
  <StackPanel Orientation=”Horizontal”></StackPanel>
  <StackPanel Orientation=”Horizontal”></StackPanel>
</StackPanel>

To finish our example we need to add the controls to display text. The TextBlock tag can be used to set static or binding texts and set text properties as font size, color, weight and so on.

<TextBlock FontSize=”12″ Text=”Branch:” FontWeight=”Bold” />

To bind text, you must define the Binding Path value inside the Text property like the following code that binds the Branch property to the TextBlock.

<TextBlock FontSize=”12″ Text=”{Binding Path=Branch}” />

The final XAML code must be similar to the following code:

<ListBox x:Name=”lstEmployees”>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Border BorderBrush=”Black” BorderThickness=”1″ CornerRadius=”6″ Background=”LightGray”>
        <StackPanel Orientation=”Vertical”>
          <StackPanel Orientation=”Horizontal”>
            <TextBlock FontSize=”12″ FontWeight=”Bold” Text=”{Binding Path=FirstName}” />
            <TextBlock FontSize=”12″ FontWeight=”Bold” Text=” ” />
            <TextBlock FontSize=”12″ FontWeight=”Bold” Text=”{Binding Path=LastName}” />
          </StackPanel>
          <StackPanel Orientation=”Horizontal”>
            <TextBlock FontSize=”10″ Text=”Branch:” FontWeight=”Bold” />
            <TextBlock FontSize=”10″ Text=”{Binding Path=Branch}” />
          </StackPanel>
          <StackPanel Orientation=”Horizontal”>
            <TextBlock FontSize=”10″ Text=”Department:” FontWeight=”Bold” />
            <TextBlock FontSize=”10″ Text=”{Binding Path=Department}” />
          </StackPanel>
        </StackPanel>
      </Border>
    </DataTemplate>
  </ListBox.ItemTemplate>
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation=”Horizontal” />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

10. Add an item to our listbox is exactly the same from Windows Forms application. The following code executes the task and is pretty straightforward:

lstEmployees.Items.Add(new Employee() { FirstName = “Bill”, LastName = “Smith”, Branch = “Toronto”, Department = “IT” });
lstEmployees.Items.Add(new Employee() { FirstName = “Michael”, LastName = “Mayers”, Branch = “Toronto”, Department = “IT” });
lstEmployees.Items.Add(new Employee() { FirstName = “George”, LastName = “Wilson”, Branch = “New York”, Department = “Accounting” });
lstEmployees.Items.Add(new Employee() { FirstName = “William”, LastName = “Moore”, Branch = “New York”, Department = “Accounting” });
lstEmployees.Items.Add(new Employee() { FirstName = “Anthony”, LastName = “Hun”, Branch = “Toronto”, Department = “HR” });
lstEmployees.Items.Add(new Employee() { FirstName = “Brian”, LastName = “Harper”, Branch = “New York”, Department = “Sales” });

The final result is shown on the following picture:

Picture 2 - The horizontal list box control

Picture 2 - The horizontal list box control

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: