如何在ListView元素中显示图像?

时间:2012-11-26 01:40:44

标签: c# xaml windows-8 microsoft-metro

我想在每个ListView元素之后显示图像。当然其他图像任何元素。首先是ListView项目的image_1.png,第二个ListView项目的image_2.png等等。我想我应该做绑定。我怎么能实行 ?

<ListView x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <!-- IMAGE IS HERE -->
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
</ListView>

编辑(1):

我尝试了一切,但它不起作用。我现在的代码:

模特课:

public ImageSource image { get; set; }

Page class:

BitmapImage bi = new 
bi.UriSource = new Uri("ms-appx:///Logos/x.png");
c.image = bi;

XAML文件:

<Image Source="{Binding Source=image}"></Image>

为什么它不起作用?

2 个答案:

答案 0 :(得分:2)

您可以绑定到集合中的项目,如下所示:

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Name="UI">
    <Grid>
        <ListView ItemsSource="{Binding ElementName=UI,Path=YourCollection}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Width="200" Height="200">
                        <Image Source="{Binding Image}"/>
                        <TextBlock Text="{Binding Title}"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
 </Window>

假设类/列表

 /// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    private ObservableCollection<MyListItem> _yourCollection = new ObservableCollection<MyListItem>();

    public MainWindow()
    {
        InitializeComponent();
        YourCollection.Add(new MyListItem { Title = "Item 1", Image = new BitmapImage(new Uri("C:\\Users\\Dev\\Pictures\\Picture1.PNG", UriKind.RelativeOrAbsolute)) });
        YourCollection.Add(new MyListItem { Title = "Item 2", Image = new BitmapImage(new Uri("C:\\Users\\Dev\\Pictures\\Picture2.PNG", UriKind.RelativeOrAbsolute)) });
    }

    public ObservableCollection<MyListItem> YourCollection
    {
        get { return _yourCollection; }
        set { _yourCollection = value; }
    }
}

public class MyListItem
{
    public string Title { get; set; }
    public BitmapImage Image { get; set; }
}

答案 1 :(得分:1)

我想我可以回答我自己的问题。我找到了解决方案

Image image = new Image();
image.Source = new BitmapImage(new Uri(@"ms-appx:/Assets/Logos/x.png"));

<Image Source="{Binding Path=image.Source.UriSource.AbsolutePath}" Width="55" Height="40"/>