将 ObservableCollection 绑定到列表框中的网格答案

【问题标题】：Binding ObservableCollection to Grid Inside a Listbox将 ObservableCollection 绑定到列表框中的网格
【发布时间】：2012-03-20 22:28:03
【问题描述】：

现在我有一个列表框，其中放置了一个滚动查看器和一个堆栈面板，数据绑定到 imagelist 的 observablecollection。

我有一个 photolist 类，它保存图像和路径并将其绑定到列表框。

<Style TargetType="{x:Type ListBox}">
  <Setter Property="Foreground" Value="White" />
  <Setter Property="Margin" Value="100"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ListBox}" >
          <ScrollViewer>
            <StackPanel IsItemsHost="True" Orientation="Horizontal" HorizontalAlignment="Center"/>
          </ScrollViewer>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

上面的代码可以很好地显示带有滚动条的列表框和托管多个图像的堆栈面板。

现在我想修改列表框以具有滚动查看器和网格而不是堆栈面板，以便图像像矩阵形式一样定位。

请提供一个代码 sn-p 将照片列表绑定到网格（在列表框内的滚动查看器内）。

任何帮助将不胜感激。

【问题讨论】：

标签： c# wpf

【解决方案1】：

您可以尝试使用 WrapPanel，如果您要求所有单元格的大小相同，请使用此处的答案：WPF WrapPanel - all items should have the same width

【讨论】：

嗨 scroog，我确实将 stackpanel 更改为 wrappanel，但是如果我有滚动查看器，则 wrappanel 就像 stackpanel 一样工作。如果我删除滚动查看器，图像将以网格方式填充。我如何让滚动查看器和包装面板都表现得像网格一样。
@Scrogg，更改滚动查看器的可见性后，一切正常。感谢您的帮助。
您可以尝试指定 WrapPanel 的宽度。

【解决方案2】：

您需要更改样式才能使用 WrapPanel：

<Style TargetType="{x:Type ListBox}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Margin" Value="100"/>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border BorderThickness="1" Margin="6">
                    <Image Source="{Binding Path=ImageUri}" Stretch="Fill" Width="100" Height="120" />
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"  />
</Style>

【讨论】：