将列表绑定到 WrapPanel 流答案

【问题标题】：Binding a list to a flow of WrapPanels将列表绑定到 WrapPanel 流
【发布时间】：2012-01-30 14:30:50
【问题描述】：

我正在尝试在 WPF 中创建一个显示项目列表的界面，尽可能少地占用垂直空间：

我的直觉是使用 ItemsControl 来绑定我的列表，并将每个项目的 UI 放入 WrapPanel。不幸的是，默认情况下，无论窗口大小如何，每个项目都从新行开始。添加带有Orientation="Horizontal" 的 StackPanel 使所有项目都在一行中，无论大小如何...

    <!--<ScrollViewer Grid.Row="0" Grid.Column="0"
          VerticalScrollBarVisibility="Auto">-->
        <ItemsControl  Margin="0,4" ItemsSource="{Binding Path=Watchers}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"></StackPanel>
            </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.Resources>
                <DataTemplate DataType="{x:Type Core:Watcher}">
                    <WrapPanel Orientation="Horizontal">
                        <TextBlock Margin="0,2" Text="{Binding Path=Name}"
                        Width="250px" />
                        <TextBox Text="{Binding Path=Value, Mode=OneWay}" 
                        Width="300px">
                        </TextBox>
                    </WrapPanel>
                </DataTemplate>
            </ItemsControl.Resources>
        </ItemsControl>
    <!--</ScrollViewer>-->

任何指针？

加分项：我应该在哪里添加 ScrollViewer 才能在我的模型中显示行为？

非常感谢！

【问题讨论】：

标签： c# wpf data-binding scrollview itemscontrol

【解决方案1】：

WrapPanel 和StackPanel 一样，还有一个Orientation 属性，默认为Vertical。所以如果你的ItemsPanelTemplate 看起来像这样，你的列表应该换行（假设你手头有足够的空间）：

<ItemsPanelTemplate>
    <WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>

关于 ScrollViewer：

应该通过如下定义来实现所需的行为（虽然没有测试，我省略了这个例子中所有不必要的东西）：

<ScrollViewer HorizontalAlignment="Stretch">
    <ItemsControl MinWidth="550" Width="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollViewer}}}" />
</ScrollViewer>

【讨论】：

谢谢！滚动查看器几乎可以工作（即使显示所有内容，滚动条仍然存在，但我希望这是调整值的问题）

【解决方案2】：

我想你想要ItemsPanel 中的WrapPanel 和ItemTemplate 中的StackPanel。

【讨论】：

非常感谢，这就是问题所在！

【解决方案3】：

为什么不将 WrapPanel 用作 ItemsPanelTemplate？

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
 </ItemsControl.ItemsPanel>

只要项目的左侧有空间，它们就会水平排列。

【讨论】：