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>

除了(米色的) WrapPanel似乎延伸到无限之外，ListBox运行得很好。当更多的项目被添加到ListBox中时，它只会向右滚动，而不是换行。如果我向WrapPanel添加一个具体的大小，就会导致换行，但(显然)会导致LB中的项显示在所有可用空间的子集中。

有没有办法告诉WrapPanel占用所有可用空间而不是更多？

Answer 1

在ListBoxes中，我总是很难让WrapPanel正常工作(可能是模板中与其中的ScrollViewer相关的内容)。如果您将代码放在ItemsControl中而不是ListBox中，您将看到它按原样完美地工作。

您可以影响WrapPanel中的ScrollViewer并强制其包装：

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

注意ListBox上的ScrollViewer.HorizontalScrollBarVisibility设置--这可以防止水平滚动条强制WrapPanel换行。

Answer 2

您可以通过将WrapPanel的宽度绑定到ListBox的ActualWidth来修复此问题

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

(当然，除非它只适用于WPF，而不适用于Silverlight，我不知道这一点。)

奇怪的是，为什么ListBox可以做到这一点，而ItemsControl却不能做到这一点。在下面的页面中，WrapPanel的页边距正确，其中包含的项也正确换行：

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <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>

将ItemsControl更改为ListBox，但它不起作用。