Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Custom ListBox Layout in WPF

, 26 Apr 2007 CPOL
A step-by-step review of how to customize the arrangement of items in a ListBox.
customitemspanel.zip
CustomItemsPanel
CustomItemsPanel
Properties
Settings.settings
Robots
colorful robot.jpg
reflected robot.jpg
Robot up close.jpg
Robot.jpg
space robot.jpg
Steelbot.jpg
Weird Robot.jpg
Wooden Robot.jpg
<Window x:Class="CustomItemsPanel.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:CustomItemsPanel" 
    Title="Custom ItemsPanel" Height="600" Width="280"
    WindowStartupLocation="CenterScreen"
    >
  <Window.Resources>
    <Style TargetType="{x:Type ListBox}">
      <!-- Set the ItemTemplate of the ListBox to a DataTemplate 
           which explains how to display an object of type BitmapImage. -->
      <Setter Property="ItemTemplate">
        <Setter.Value>
          <DataTemplate>
            <Border 
              BorderBrush="Black" 
              BorderThickness="4" 
              CornerRadius="5"
              Margin="6"
              >
              <Image 
                Source="{Binding Path=UriSource}" 
                Stretch="Fill"
                Width="100" Height="120" 
               />
            </Border>
          </DataTemplate>
        </Setter.Value>
      </Setter>

      <!-- Swap out the default items panel with a WrapPanel so that
           the images will be arranged with a different layout. -->
      <Setter Property="ItemsPanel">
        <Setter.Value>
          <ItemsPanelTemplate>
            <WrapPanel />
          </ItemsPanelTemplate>
        </Setter.Value>
      </Setter>

      <!-- Set this attached property to 'Disabled' so that the 
           ScrollViewer in the ListBox will never show a horizontal 
           scrollbar, and the WrapPanel it contains will be constrained 
           to the width of the ScrollViewer's viewable surface. -->
      <Setter 
        Property="ScrollViewer.HorizontalScrollBarVisibility" 
        Value="Disabled" 
        />
    </Style>
  </Window.Resources>

  <Window.DataContext>
    <ObjectDataProvider 
      ObjectType="{x:Type local:RobotImageLoader}" 
      MethodName="LoadImages" 
      />
  </Window.DataContext>

  <!-- This ListBox is the Content of the Window. 
       Normally you would have a panel of some type
       as the Window's Content, but let's keep it simple. -->
  <ListBox ItemsSource="{Binding}" />
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Josh Smith
Software Developer (Senior) Cynergy Systems
United States United States
Josh creates software, for iOS and Windows.
 
He works at Cynergy Systems as a Senior Experience Developer.
 
Read his iOS Programming for .NET Developers[^] book to learn how to write iPhone and iPad apps by leveraging your existing .NET skills.
 
Use his Master WPF[^] app on your iPhone to sharpen your WPF skills on the go.
 
Check out his Advanced MVVM[^] book.
 
Visit his WPF blog[^] or stop by his iOS blog[^].
Follow on   Twitter

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 26 Apr 2007
Article Copyright 2007 by Josh Smith
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid