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>

ListBox完美无缺，但（Beige）WrapPanel似乎延伸到无限远。随着更多项目被添加到ListBox，它只是向右滚动而不是包装。如果我在WrapPanel中添加一个具体的大小，这会导致事物被包裹，但（显然）会导致LB中的项目显示在所有可用空间的子集中。

有没有办法告诉WrapPanel占用所有可用空间而不再需要？

Answer 1

我总是无法让WrapPanel在ListBox es内正常工作（可能是模板中与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.Horizo​​ntalScrollBarVisibility - 这会阻止水平滚动条，这会强制您的WrapPanel换行。

Answer 2

您可以通过将WrapPanel的宽度绑定到ActualWidth的{​​{1}}来解决此问题：

ListBox

（当然，除非这只适用于WPF，而不是Silverlight，我不知道。）

但奇怪的是，<WrapPanel Width="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=ActualWidth"} 执行此操作而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，而不是。{/ p>