将图像绑定到VB.net中的ListView（Windows应用商店）

时间：2013-01-19 17:57:36

标签： vb.net listview windows-8 windows-runtime windows-store-apps

我在VB.net中将图像绑定到ListView时遇到问题。我正在构建一个可以调整大小，转换和压缩图像的应用程序，但我希望所选图像与ListView一起显示在图像名称旁边。

这是ListView的XAML代码：

<ListView x:Name="ListView" ItemsSource="{Binding Image}" HorizontalAlignment="Left" Height="481" Margin="10,275,0,0" VerticalAlignment="Top" Width="1069" BorderBrush="#FF003859" Foreground="White" Background="#42FFFFFF" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" BorderThickness="6,0,6,6" FontSize="16" SelectionMode="Multiple">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="vertical">
                        <Grid Height="160" Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Width="160" Height="160">
                                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding ImageID}" Stretch="Uniform" />
                            </Border>
                            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0">
                                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

以下是Image类的代码：

Imports System.Collections.ObjectModel

Public Class Image</code>

    Private _Title As String
    Private _ImageID As BitmapImage

    Public ReadOnly Property Title() As String
        Get
            Return _Title
        End Get
    End Property
    Public ReadOnly Property Image() As BitmapImage
        Get
            Return _ImageID
        End Get
    End Property

    Public Sub New(ByVal Title As String, ByVal ImageID As BitmapImage)
        _Title = Title
        _ImageID = ImageID
    End Sub

End Class

以下是在ListView中添加图像的按钮代码：

Private Async Sub AddImage_Click(sender As Object, e As RoutedEventArgs) Handles AddImage.Click

        Dim picker As New FileOpenPicker()

        picker.SuggestedStartLocation = PickerLocationId.Desktop
        picker.ViewMode = PickerViewMode.Thumbnail
        picker.FileTypeFilter.Add(".jpg")
        picker.FileTypeFilter.Add(".jpeg")
        picker.FileTypeFilter.Add(".bmp")
        picker.FileTypeFilter.Add(".gif")
        picker.FileTypeFilter.Add(".png")
        picker.FileTypeFilter.Add(".tiff")
        picker.FileTypeFilter.Add(".tga")

        Dim files As IReadOnlyList(Of StorageFile) = Await picker.PickMultipleFilesAsync

        Dim imagearray(10000000) As BitmapImage
        Dim i = 0
        If files.Count > 0 Then
            For Each file In files
                imagearray(i) = New BitmapImage(New Uri(file.Path))
                i += 1
            Next
            Dim j = 0
            For Each file In files
                ListView.Items.Add(New Image(file.Name, imagearray(j)))
                j += 1
            Next
        End If

    End Sub

请帮我解决这个问题。

编辑：

ListView XAML代码：

<ListView x:Name="ListView" HorizontalAlignment="Left" Height="481" Margin="10,275,0,0" VerticalAlignment="Top" Width="1069" BorderBrush="#FF003859" Foreground="White" Background="#42FFFFFF" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" BorderThickness="6,0,6,6" FontSize="16" SelectionMode="Multiple">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="vertical">
                        <Grid Height="160" Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Width="160" Height="160">
                                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding ImageID}" Stretch="Uniform" />
                            </Border>
                            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0">
                                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

图片类：

Imports System.Collections.ObjectModel

Public Class Image

    Private _Title As String
    Private _Image As BitmapImage

    Public ReadOnly Property Title() As String
        Get
            Return _Title
        End Get
    End Property
    Public ReadOnly Property ImageID() As BitmapImage
        Get
            Return _Image
        End Get
    End Property

    Public Sub New(ByVal Title As String, ByVal ImageID As BitmapImage)
        _Title = Title
        _Image = ImageID
    End Sub

End Class

按钮：

Dim ImageCollection As New Collection(Of Image)

     Private Async Sub AddImage_Click(sender As Object, e As RoutedEventArgs) Handles AddImage.Click

            Dim picker As New FileOpenPicker()

            picker.SuggestedStartLocation = PickerLocationId.Desktop
            picker.ViewMode = PickerViewMode.Thumbnail
            picker.FileTypeFilter.Add(".jpg")
            picker.FileTypeFilter.Add(".jpeg")
            picker.FileTypeFilter.Add(".bmp")
            picker.FileTypeFilter.Add(".gif")
            picker.FileTypeFilter.Add(".png")
            picker.FileTypeFilter.Add(".tiff")
            picker.FileTypeFilter.Add(".tga")

            Dim files As IReadOnlyList(Of StorageFile) = Await picker.PickMultipleFilesAsync

            Dim imagearray(10000000) As BitmapImage
            Dim i = 0
            If files.Count > 0 Then
                For Each file In files
                    imagearray(i) = New BitmapImage(New Uri(file.Path))
                    i += 1
                Next
                Dim j = 0
                For Each file In files
                    ImageCollection.Add(New Image(file.Name, imagearray(j)))
                    j += 1
                Next
                For Each file In files
                    ListView.ItemsSource = ImageCollection
                Next

            End If

        End Sub

这是我现在的代码，但图像仍未显示。有什么问题？

以下是新修改：

ListView XAML代码： 

<ListView x:Name="ListView" DataContext="{Binding Image}" HorizontalAlignment="Left" Height="481" Margin="10,275,0,0" VerticalAlignment="Top" Width="1069" BorderBrush="#FF003859" Foreground="White" Background="#42FFFFFF" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" BorderThickness="6,0,6,6" FontSize="16" SelectionMode="Multiple">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="vertical">
                        <Grid Height="160" Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Width="160" Height="160">
                                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding ImageProperty}" Stretch="Uniform" />
                            </Border>
                            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0">
                                <TextBlock Text="{Binding TitleProperty}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

图片类： 

Imports System.Collections.ObjectModel

Public Class Image

    Implements INotifyPropertyChanged

    Private ImageX As BitmapImage
    Private TitleX As String

    Public ReadOnly Property ImageProperty() As BitmapImage
        Get
            Return ImageX
        End Get
    End Property

    Public ReadOnly Property TitleProperty() As String
        Get
            Return TitleX
        End Get
    End Property

    Public Sub New(ByVal ImageTitle As String, ByVal ImageID As BitmapImage)
        TitleX = ImageTitle
        ImageX = ImageID
    End Sub

    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    Public Sub NotifyPropertyChanged(ByVal propertyName As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
    End Sub

End Class

带有ImageCollection类的Button： 

 Dim ImageCollection As New ImageCollectionClass

    Private Async Sub AddImage_Click(sender As Object, e As RoutedEventArgs) Handles AddImage.Click

        Dim picker As New FileOpenPicker()

        picker.SuggestedStartLocation = PickerLocationId.Desktop
        picker.ViewMode = PickerViewMode.Thumbnail
        picker.FileTypeFilter.Add(".jpg")
        picker.FileTypeFilter.Add(".jpeg")
        picker.FileTypeFilter.Add(".bmp")
        picker.FileTypeFilter.Add(".gif")
        picker.FileTypeFilter.Add(".png")
        picker.FileTypeFilter.Add(".tiff")
        picker.FileTypeFilter.Add(".tga")

        Dim files As IReadOnlyList(Of StorageFile) = Await picker.PickMultipleFilesAsync

        Dim imagearray(10000000) As BitmapImage
        Dim i = 0
        If files.Count > 0 Then
            For Each file In files
                imagearray(i) = New BitmapImage(New Uri(file.Path))
                i += 1
            Next
            Dim j = 0
            For Each file In files
                ImageCollection.AddImage(file.Name, imagearray(j))
                j += 1
            Next
            For Each file In files
                ListView.ItemsSource = ImageCollection
            Next

        End If

    End Sub

Public Class ImageCollectionClass

    Public ImageCollectionClass As New ObservableCollection(Of Image)

    Public Sub AddImage(ByVal ImageTitleInClass As String, ByVal ImageIDInClass As BitmapImage)
        ImageCollectionClass.Add(New Image(ImageTitleInClass, ImageIDInClass))
    End Sub

End Class

但它不起作用。请告诉我，现在有什么问题！

1 个答案:

答案 0 :(得分：0)

您的原始循环相当复杂（认为这不是程序的直接原因）。所有这些代码：

    Dim imagearray(10000000) As BitmapImage
    Dim i = 0
    If files.Count > 0 Then
        For Each file In files
            imagearray(i) = New BitmapImage(New Uri(file.Path))
            i += 1
        Next
        Dim j = 0
        For Each file In files
            ImageCollection.AddImage(file.Name, imagearray(j))
            j += 1
        Next
        For Each file In files
            ListView.ItemsSource = ImageCollection
        Next
    End If

可能会崩溃为：

    For Each file In files
        ImageCollection.AddImage(file.Name, New BitmapImage(New Uri(file.Path)))
    Next
    ListView.ItemsSource = ImageCollection.ImageCollectionClass

请注意，您需要ImageCollectionClass作为ItemsSource。

从那里，您可以合并XAML Images Sample的方案2中的代码并修改以通过SetSourceAsync获取图像：

    Dim fileStream As IRandomAccessStream
    For Each file In files
        fileStream = Await file.OpenAsync(Windows.Storage.FileAccessMode.Read)

        Dim bitmapImage As New BitmapImage()
        Await bitmapImage.SetSourceAsync(fileStream)

        ImageCollection.AddImage(file.Name, bitmapImage)
    Next
    ListView.ItemsSource = ImageCollection.ImageCollectionClass
相关问题
最新问题