Silverlight ItemsPanel - WrapPanel

Question

    <ItemsPanelTemplate x:Key="lbWrapPanelItemsPanelTemplate">
        <wp:WrapPanel Margin="2" Background="Beige" HorizontalAlignment="Stretch">
        </wp:WrapPanel>
    </ItemsPanelTemplate>

.....

<Grid Background="LightCoral" MinWidth="500" MinHeight="500">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <sdk:GridSplitter Grid.Column="0" Background="AliceBlue" />

    <StackPanel Grid.Column="0" FlowDirection="LeftToRight">
        <Button Width="40">Left</Button>
        <Button Width="40">Right</Button>
    </StackPanel>

    <Grid Background="Bisque" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
        </Grid.RowDefinitions>

        <ListBox ItemsPanel="{StaticResource lbWrapPanelItemsPanelTemplate}" x:Name="bookListBox" HorizontalAlignment="Stretch"  Grid.Row="0" ItemsSource="{Binding Path=BookSource}" ItemTemplate="{StaticResource dirtSimple}"  />

        <wp:WrapPanel Grid.Row="1">
            <Button Width="200" Command="{Binding Path=AddItemCommand}">Bottom</Button>
            <Button Width="200" Command="{Binding ChangeTemplateCommand}" CommandParameter="{StaticResource vmDataTemplate}">White</Button>
            <Button Width="200" Command="{Binding ChangeTemplateCommand}" CommandParameter="{StaticResource vmDataTemplate2}">Lavender</Button>
        </wp:WrapPanel>
    </Grid>

</Grid>

The ListBox works perfectly, except that the (Beige) WrapPanel seems to extend off into infinity. As more items are added to the ListBox, it just scrolls to the right instead of wrapping. If I add a concrete size to the WrapPanel, that causes things to wrap, but (obviously) causes the items in the LB to be shown in a subset of all available space.

Is there a way to tell the WrapPanel to take up all available space and no more?

Answer 1

I always have trouble getting the WrapPanel to work correctly inside ListBoxes (likely something in the template related to the ScrollViewer in it). If you take your code and put it inside an ItemsControl instead of a ListBox you'll see it work perfectly as-is.

You can affect the ScrollViewer inside your WrapPanel and force it to wrap:

<ListBox HorizontalAlignment="Stretch" ItemsSource="{Binding foo}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <tk:WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Note the ScrollViewer.HorizontalScrollBarVisibility set on the ListBox - this prevent a horizontal scrollbar, which forces your WrapPanel to wrap.

Answer 2

You can fix this by binding the WrapPanel's width to the ActualWidth of the ListBox:

<WrapPanel Width="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=ActualWidth"}

(unless, of course, that's something that only works in WPF and not Silverlight, which I dunno.)

The curious thing, though, is why the ListBox does this and the ItemsControl doesn't. The WrapPanel has the correct margin, and the items it contains wrap correctly, in this page:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="700"/>
    </Grid.ColumnDefinitions>
    <ItemsControl 
      Background="Azure"
      Margin="5">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapPanel 
            Background="Lavender"
            Margin="10"/>
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj</ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj</ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj flaksjf laskjf aslkjf alsjkf lsafdkj </ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj flaksjf laskjf aslkjf alsjkf lsafdkj </ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj flaksjf laskjf aslkjf alsjkf lsafdkj </ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj flaksjf laskjf aslkjf alsjkf lsafdkj </ListBoxItem>      
    </ItemsControl>
  </Grid>
</Page>

Change the ItemsControl to a ListBox and it doesn't.