Click here to Skip to main content
15,885,914 members
Articles / Desktop Programming / WPF

Custom ListBox Layout in WPF

Rate me:
Please Sign up or sign in to vote.
4.98/5 (59 votes)
26 Apr 2007CPOL5 min read 402.2K   11.9K   108  
A step-by-step review of how to customize the arrangement of items in a ListBox.
<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)


Written By
Software Developer (Senior)
United States United States
Josh creates software, for iOS and Windows.

He works at Black Pixel as a Senior 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[^].

See his website Josh Smith Digital[^].

Comments and Discussions