Paged Listbox Design

Customers and users always have good and sometimes facinating ideas about how thier data should be represented on the screen. One of my recent customers did not like the way the standard list box functions finding it frustrating to search through a long list to select an item. The point being that if I move away from the list box it does not keep the focus of where I last visited in the list – a non-selected element found in the list was difficult to navigate back to based only on the scrollbar position. The proposal was to be able to page through the list box items and to be left with a possible page number if the list box had to be left and returned to later.

The code itself is rather simple – basically there is only a need for a Listbox and a DataPager as can be seen below:

            <ListBox x:Name="listBox"
                ItemsSource="{Binding FeedDetails, Mode=OneWay}" 
                ItemTemplate="{StaticResource itemTemplate}" 
                ItemContainerStyle="{StaticResource ListBoxItemStyle1}" 
                Style="{StaticResource ListBoxStyle1}" 
                ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                ItemsPanel="{StaticResource ItemsPanelTemplate}" }" 
                />
            <sdk:DataPager PageSize="5" Source="{Binding FeedDetails, Mode=OneWay}" />

The final paged listbox with all its styling can be seen below:

That’s all Folks…

Advertisements

~ by Intelligence4 on March 26, 2012.

One Response to “Paged Listbox Design”

  1. […] directly from within Blend). I have used this method for trying out custom control design as seen here and here. Although this technique has been covered in a couple of places on […]

Comments are closed.

 
%d bloggers like this: