Geek Answers Handbook

Using WrapPanel and ScrollViewer to create a multi-table list in WPF

Im making a simple LOB application that loads data from an XML file and displays it in a list with a few buttons for editing.

In my first attempt, everything was in order, except that the list scrolled down in one long column. I would prefer the data to be wrapped so that at the bottom of the window it launches a second column, etc. - if you resize the window, the data should resize accordingly.

First, I just put the ListBox inside the ScrollViewer. It didn't make any difference.

Then I added a WrapPanel to the ItemTemplate. At this point, I got a long row horizontally, but it was never moved to the second row, despite the fact that my ScrollViewer.HorizontalScrollbar = parameter is disabled.

I searched the Internet for various blogs and forums, but I don’t see the difference between the sentences and my code (see below). Any advice would be highly appreciated.

<Window x:Class="MyApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="My App" Height="300" Width="400" FocusManager.FocusedElement="{Binding ElementName=eventsList}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <ScrollViewer Grid.Row="0" Grid.Column="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"> <ListBox Name="eventsList"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel /> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> </ScrollViewer> <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Center" Visibility="Collapsed"> <Button Name="action1Button" /> <Button Name="action2Button" /> <Button Name="action3Button" /> </StackPanel> </Grid> </Window>
+4
source share
2 answers

It seems that you are on the right track: replace the ItemPanelTemplate in the ListBox with the WrapPanel, setting the WrapPanel orientation to Vertical and setting the ScrollViewer.VerticalScrollBar to Disabled, that’s all you need to do.

This works for me:

 <Window x:Class="ScrollingWrapPanel.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid> <ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel IsItemsHost="True" Orientation="Vertical"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBoxItem> <Rectangle Width="80" Height="80" Margin="10" Fill="Red"/> </ListBoxItem> <ListBoxItem> <Rectangle Width="80" Height="80" Margin="10" Fill="Orange"/> </ListBoxItem> <ListBoxItem> <Rectangle Width="80" Height="80" Margin="10" Fill="Yellow"/> </ListBoxItem> <ListBoxItem> <Rectangle Width="80" Height="80" Margin="10" Fill="Green"/> </ListBoxItem> <ListBoxItem> <Rectangle Width="80" Height="80" Margin="10" Fill="Blue"/> </ListBoxItem> <ListBoxItem> <Rectangle Width="80" Height="80" Margin="10" Fill="Indigo"/> </ListBoxItem> <ListBoxItem> <Rectangle Width="80" Height="80" Margin="10" Fill="Violet"/> </ListBoxItem> </ListBox> </Grid> </Window>

This should make it display the full column vertically, wrap it, and then continue in the next column, scrolling horizontally (but not vertically) as necessary, as in the picture:

ListBox Vertical WrapPanel http://i40.tinypic.com/358dzxj.png

The key elements of this implementation are

  • Orientation Orientation = "Vertical" on the WrapPanel so that things wrap vertically, not horizontally, but
  • Setting ScrollViewer.VerticalScrollBarVisibility = "Disabled" in the ListBox so that the ScrollViewer knows to limit its height to the available space.
+29
source

I believe that for this you need to write your own code - you have the right idea to redefine ItemsPanelTemplate, but WrapPanel does not order the material the way you want it to - it will order the material like:

 ABCD EFGH IJKL

While you probably want this:

 ADGJ BEHK CFIL

Also, putting it in a ScrollViewer, he likes to say that it has a screen with infinite size, so the result will be only one line (because ScrollViewer will give it as much space as it asks). Writing a panel is not difficult, basically these are just two functions (Measure and Arrange).

0
source

More articles:


All Articles