Question

据我所知，您只需要图片网址即可显示图片。我的工作方式是将每个项目添加到listview项目，如下所示：

    private async void PopulateTopicListView()
    {
        for (int i = 0; i < pTopics.Count; i++)
        {
            //if (String.IsNullOrEmpty(pTopics[i].thumbnail) || pTopics[i].thumbnail.Equals("self") || pTopics[i].thumbnail.Equals("nsfw"))
            //{

            Image thumb;

            if (!String.IsNullOrEmpty(pTopics[i].thumbnail) && pTopics[i].thumbnail.Contains("http"))
            {
                /thumb = await GetImage(pTopics[i].thumbnail);
                topicsListView.Items.Add(thumb + pTopics[i].title + "\n" + pTopics[i].author + " " + pTopics[i].timeposted + " hours ago" + "\n" + pTopics[i].points + " points\t"
                    + pTopics[i].commentCount + " comments\n" + "[" + pTopics[i].subreddit + "]");
            }
            else
            {
                topicsListView.Items.Add(pTopics[i].title + "\n" + pTopics[i].author + " " + pTopics[i].timeposted + " hours ago" + "\n" + pTopics[i].points + " points\t"
                    + pTopics[i].commentCount + " comments\n" + "[" + pTopics[i].subreddit + "]");
            }

        }
        SeperatorOne.Visibility = Visibility.Visible;
        CurrentSubredditTextBlock.Visibility = Visibility.Visible;
        FilterDropdown.Visibility = Visibility.Visible;
    }

我的listview的XAML如下所示：

    <ListView x:Name="topicsListView" ItemsSource="{Binding topicsListView}" FontStretch="Condensed" HorizontalAlignment="Left" Height="1007" VerticalAlignment="Top" Width="546" SelectionChanged="topicsListView_SelectionChanged" Margin="0,73,0,0" FontSize="36"  Style="{StaticResource ListViewStyle1}" Background="#FF1D1C1C">

        <ListView.ItemTemplate>
            <DataTemplate>

                <Grid Height=" 80" Margin="6">
                    <Grid.Resources >
                        <CollectionViewSource x:Name="topicsListView" />
                    </Grid.Resources>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="80" Height="80">
                        <Image Source= "{Binding topicsListView.thumbnail}" Stretch="UniformToFill"/>
                    </Border>
                    <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                        <TextBlock Text="{Binding }" Style="{StaticResource BodyTextBlockStyle}" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>

所以任何想法为什么它只是添加url作为文本？我没有正确设置图像吗？

Answer 1

通过网址，你的意思是形象？代码隐藏中也是PopulateTopicsListView？如果是，则Image类型为Windows.UI.Xaml.Control.Image，不能与等待一起使用。请参阅以下MSDN documentation，了解为何 await 无法在此处使用。

首先，回答你的问题：在ListView中，

默认情况下，数据项在列表或网格中显示为字符串它所绑定的数据对象的表示。

有关详细信息，请参阅ListView here（在备注下）。由于GetImage无法返回Windows.UI.Xaml.Control.Image，因此Image的字符串表示形式将显示。删除'async'和'await'，实际上只是将thumbnail属性设置为图像的url（已完成）。

那该怎么办？

现在，不清楚在这种情况下是否绑定到CollectionViewSource或ListView，因为它们都具有相同的名称。我会改变其中一个的名字。如果将ListView绑定到CollectionViewSource并在代码隐藏中填充后者，那么显示项目所需要做的就是使用itemsViewSource绑定到pTopics：

<CollectionViewSource x:Name="itemsViewSource" Source="{Binding pTopics}" />

然后将ListView绑定到CollectionViewSource：

<ListView x:Name="topicsListView" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" ...

将图像绑定到缩略图属性：

<Image Source="{Binding thumbnail}"  Stretch="UniformToFill" />

最后，但并非最不重要的是，对于TextBlock，我在pTopics组成的任何类中创建了一个text属性（我称之为Topic），并绑定到它：

<TextBlock Text="{Binding text}" Style="{StaticResource BodyTextBlockStyle}" />

这是完整的代码，适用于其他任何想要查看它的人，从Topic类开始：

public class Topic
{
    public string title { get; set; }
    public string thumbnail { get; set; }
    public string author { get; set; }
    public string text { get; set; }
    public int timeposted { get; set; }
    public int points { get; set; }
    public int commentCount { get; set; }
    public int subreddit { get; set; }
}

XAML：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <CollectionViewSource x:Name="itemsViewSource" Source="{Binding pTopics}" />
    </Grid.Resources>
    <ListView x:Name="topicsListView" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" FontStretch="Condensed" HorizontalAlignment="Left" Height="1007" VerticalAlignment="Top" Width="546" Margin="0,73,0,0" FontSize="36" Background="#FF1D1C1C">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Height="80" Margin="6">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"  Width="80" Height="80" >
                        <Image Source="{Binding thumbnail}"  Stretch="UniformToFill" />
                    </Border>
                    <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                        <TextBlock Text="{Binding text}" Style="{StaticResource BodyTextBlockStyle}" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

最后PopulateTopicsListView：

    private void PopulateTopicsListView()
    {
        pTopics = new List<Topic>
        {
            new Topic () { thumbnail = "http://www.google.com/images/srpr/logo11w.png", title = "Google", author = "Larry Page", timeposted = 2, points = 41 },
            new Topic () { thumbnail = "http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png", title = "Stackoverflow", author = "Jeff Atwood", timeposted = 4, points = 45},
            new Topic () { thumbnail = "http://i.msdn.microsoft.com/Areas/Centers/Themes/StandardDevCenter/Content/Images/microsoftLogoForHeader.png", title = "MSDN", author = "Bill Gates", timeposted = 5, points = 60 }
        };

        for (int i = 0; i < pTopics.Count; i++)
        {
            //if (!String.IsNullOrEmpty(pTopics[i].thumbnail) && pTopics[i].thumbnail.Contains("http"))
            //{
                pTopics[i].text = pTopics[i].title +"\n" + pTopics[i].author + " " + pTopics[i].timeposted + " hours ago" + "\n" + pTopics[i].points + " points\t";
            //}
            //else
            //{
            //    pTopics[i].text = pTopics[i].title + "\n" + pTopics[i].author;
            //}
        }
    }

注意我已经注释掉了if语句，因为这里实际上没有必要，因为拇指Image对象已经被分离了。我知道这是一个古老的帖子，但我花了一些时间来进行自我教育，并且它有效。我努力尽可能少地更改原始代码以保留OPs解决方案和他的意图。您应该可以启动Visual Studio并将其粘贴到任何Windows Metro商店应用程序中，并查看它是如何工作的。

将图像添加到listview以及文本（Metro App）

1 个答案: