Question

现在我有一个列表框，其中放置了一个scrollviewer和一个stackpanel，其中数据绑定到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>

上面的代码很好地显示了列表框，其中包含托管多个图像的滚动条和堆栈面板。

现在我想修改列表框以使用scrollviewer和网格而不是stackpanel，这样图像的位置就像矩阵形式一样。

请提供一个代码片段，将光刻胶绑定到网格（位于列表框内的滚动查看器内）。

任何帮助都将受到高度赞赏。

Answer 1

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

Answer 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>

将ObservableCollection绑定到列表框内的网格

2 个答案: