WPF:从目录加载图像并将它们列在WrapPanel中

时间:2014-02-23 11:03:51

标签: c# wpf image listbox wrappanel

我正在努力学习WPF,今天我正在学习面板。在尝试Wrap Panel时,我得到了从目录中加载图像列表并将其显示在包装面板中的惊人想法。为了练习Binding,我决定动态加载图像列表并根据列表显示。但是图像列表没有通过Binding显示。这是XAML代码:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="28"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="90"/>
        </Grid.ColumnDefinitions>
        <TextBox Grid.Column="0" Name="txtFolderPath" MinWidth="120" Margin="5" Text="C:\Users\Public\Pictures\Sample Pictures"/>
        <Button Grid.Column="1" Name="btnLoadFolderPath" Content="Load" MinWidth="80" Margin="5" Click="btnLoadFolderPath_Click"/>
    </Grid>
    <ListView Grid.Row="1" Margin="0,0.2,-0.4,-242.4" ItemsSource="{Binding lstImages}" Name="lstView">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Image Width="100" Height="100"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

以下是代码的C#部分:

List<Image> lstImages = new List<Image>();

private void btnLoadFolderPath_Click(object sender, RoutedEventArgs e)
{
    Image imgTemp;
    List<string> lstFileNames = new List<string>(System.IO.Directory.EnumerateFiles(txtFolderPath.Text, "*.jpg"));
    foreach (string fileName in lstFileNames)
    {
        imgTemp = new Image();
        imgTemp.Source = new BitmapImage(new Uri(fileName));
        imgTemp.Height = imgTemp.Width = 100;
        lstImages.Add(imgTemp);
    }
}

如果我将图像添加到C#代码的列表框中,我可以看到图像,但它们没有环绕。我不确定我做错了什么。

请注意:我知道这个问题可能已经以不同形式发布了数十次。但我是WPF的新手,因此无法找到用于查找它们的确切术语。我发现的一些解释要么太简单,要么太复杂,我无法弄清楚到底哪里出错了。这是一个已发布的问题,我以此为例:Displaying images in grid with WPF。我不想要文字和东西。但我只需要以类似的布局显示图像。

如果有人能为此提供最简单的解决方案,我将不胜感激。我所需要的只是在包装面板中动态显示图像列表。提前感谢您提供的任何帮助。

1 个答案:

答案 0 :(得分:2)

您需要针对ScrollViewer.HorizontalScrollBarVisibility="Disabled"设置ListView以禁用水平滚动功能:

<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...

正如@HenkHolterman在他的评论中指出的那样,你将ItemsSource绑定到lstImages,但它被声明为私有字段,这将是无效的binding source。我怀疑它适用于你的情况,因为代码中的某处你做了类似的事情:

lstView.ItemSource = lstImages;

如果您想通过绑定使用它,则需要将其转换为公共属性。像这样:

public List<Image> lstImages { get; set; }

并在Window构造函数中执行以下操作:

lstImages = new List<Image>();
this.DataContext = this;