Question

我想制作一幅可以适配的图片库（因为我不知道每次必须显示多少张图片）。

目前我有类似的东西：

<ItemsControl ItemsSource="{Binding}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" Height="100" Width="100" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

那可以正确显示我的照片。但是我想在滚动画廊中显示图片，例如使用ItemsControl和ListView的WrapPanel。

我在网上找到了一个带有颜色方块的示例，该示例可以满足我的要求：http://mark-dot-net.blogspot.com/2012/09/using-wrappanel-with-itemscontrol-and.html

但是如何修改代码以使用DataContext中的数据？（从另一个窗口接收图片）：

public partial class Gallery : Window
    {
        public Gallery(List<BitmapSource> bitmaps)
        {
            InitializeComponent();
            DataContext = bitmaps;
        }
    }

Answer 1

您可以简单地将ItemPanel更改为使用WrapPanel，并将ItemsPresenter包裹在ScrollViewer中。您仍然可以使用原始的DataContext。

<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Template>
        <ControlTemplate>
            <ScrollViewer x:Name="ScrollViewer" 
                Padding="{TemplateBinding Padding}"
                VerticalScrollBarVisibility="Visible"
                HorizontalScrollBarVisibility="Visible">
                <ItemsPresenter />
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Height="100" Width="100" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 2

鉴于您还希望能够选择图像，请尝试以下操作：

<ListBox ItemsSource="{Binding}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Height="100" Width="100" Margin="5" />
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

ListBox增加了滚动以及选择每个项目的能力。我还为每个Margin添加了Image，以便您实际上可以看到周围的选择。

如何使用ItemsControl包含来自DataContext的图像的WrapPanel？

2 个答案: