将图像与文本一起添加到列表视图（Metro 应用程序）答案

【问题标题】：Add image to listview along with text (Metro App)将图像与文本一起添加到列表视图（Metro 应用程序）
【发布时间】：2014-01-29 23:14:18
【问题描述】：

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

    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;
    }

我的列表视图的 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 添加为文本？我没有正确设置图像吗？

【问题讨论】：

标签： c# image listview grid microsoft-metro

【解决方案1】：

通过网址，您是指图片吗？ PopulateTopicsListView 也在代码隐藏中吗？如果是，则 Image 类型为 Windows.UI.Xaml.Control.Image，不能与 await 一起使用。请参阅以下MSDN documentation，了解为什么不能在此处使用 await。

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

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

有关详细信息，请参阅 ListView here（在备注下）。因为 GetImage 无法返回 Windows.UI.Xaml.Control.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 所包含的任何类（我称之为 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 语句，因为这里真的没有必要，因为 thumb Image 对象已经被分离出来了。我知道这是一个旧帖子，但我花了一些时间进行自我教育，并且它有效。我努力尽可能少地更改原始代码，以保留 OPs 解决方案和他的意图。您应该能够启动 Visual Studio 并将其粘贴到任何 Windows Metro 商店应用程序中，然后看看它是如何工作的。

【讨论】：