添加圖像以及文本（Metro App）

據我所知你只需要圖像的URL來顯示圖像。我的東西的工作方式是我每個項目添加到列表視圖項是這樣的：添加圖像以及文本（Metro App）

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>

因此，任何想法，爲什麼它只是添加網址作爲文本？我是不是正確設置圖像？

來源

2014-01-10 AndyOHart

通過網址，你的意思是圖像？代碼隱藏中還有PopulateTopicsListView？如果是這樣，圖像類型是Windows.UI.Xaml.Control.Image，它不能用於等待。關於爲什麼等待不能在這裏使用請參閱以下MSDN documentation。

首先，要回答你的問題：在一個ListView，

默認情況下，數據項顯示在列表或網格的數據串表示它一定反對。

欲瞭解更多信息，請參閱ListView here（在備註下）。由於GetImage無法返回Windows.UI.Xaml.Control.Image，因此圖像的字符串表示形式就是顯示內容。刪除「異步」和「等待」，實際上只需將縮略圖屬性設置爲圖像的網址（完成）即可。

所以，我們要做什麼呢？現在

，目前還不清楚是否要在這種情況下綁定到CollectionViewSource或ListView的，因爲它們都具有相同的名稱。我會改變他們中的一個的名字。如果綁定ListView控件到CollectionViewSource和填充後的代碼隱藏，那麼所有你需要做的顯示的項目是結合pTopics與itemsViewSource：

<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由（我稱其爲主題），並綁定到：

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

下面是完整的代碼，其他人誰希望看到它在行動，首先是主題類：

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/[email protected]", 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圖像對象已經被分離出來了。我知道這是一箇舊帖子，但我花了一些時間在自己的自我教育上，並且它很有用。我努力盡可能少地改變原始代碼以保持OP解決方案和他的意圖。您應該能夠啓動Visual Studio並將其粘貼到任何Windows Metro商店應用程序中，然後查看它是如何工作的。

來源

2014-10-13 19:49:27 Will

添加圖像以及文本（Metro App）

回答

相關問題