具有对象作为图像的列表框

Question

我想将我的对象从observablecollection形式显示为带有标签的图像。 对象包含名称和图像路径作为字符串。 我的问题是此图像不在解决方案中。 我创建了类似的东西，但是它显示对象成行且没有图像。 我想在框中显示它们。

我编辑了源代码：

<ListBox Name="lb_drinki" HorizontalAlignment="Left" VerticalAlignment="Top" Height="650" Width="1254" Margin="10,10,0,0" 
                         ItemTemplate="{StaticResource MyImagesItemTemplate}"/> 
...

<UserControl.Resources>
    <DataTemplate x:Key="MyImagesItemTemplate">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <Image Grid.Row="0" Source="{Binding imgpath}" />
            <Label Grid.Row="1" Content="{Binding name}" />
        </Grid>
    </DataTemplate>
</UserControl.Resources>

Answer 1

嗨，我怀疑您的问题可能是您的数据模型未实现INotifyPropertyChanged ，或者imgPath和name是属性 。 或者您可能错误地将图像添加到了项目中。 确保它们是“资源”而不是“复制”，如果不希望复制，则对“内容”满意，如果要在装配体中或外部使用，请不要使用它们。

我认为，此方法有效，我更改了您的属性名称，创建了一个基本的ViewModel，其中包含您所描述的一组数据项。 我已将您的商品绑定到此收藏中。

XAML：

<Window x:Class="LBImage.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lbImage="clr-namespace:LBImage"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <lbImage:MainViewModel/>
</Window.DataContext>
<Window.Resources>               
<DataTemplate x:Key="MyImagesItemTemplate">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"  />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Image Grid.Row="0" Source="{Binding ImagePath}" MaxHeight="100" />
        <Label Grid.Row="1" Content="{Binding Name}" />
    </Grid>
</DataTemplate>
</Window.Resources>

<Grid>
    <ListBox HorizontalAlignment="Left" VerticalAlignment="Top" Height="650" Width="1254" Margin="10,10,0,0" 
             ItemsSource ="{Binding Items}" SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
             ItemTemplate="{StaticResource MyImagesItemTemplate}"/>

</Grid>

数据模型，请在此处注意INotifyPropertyChanged的实现。 也许图像路径应改为URI类型？

public class ModelBase
{
    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

public class SomeItem : ModelBase
{
    private string name;
    private string imagePath;
    public String Name
    {
        get { return name; }
        set
        {
            if (value == name) return;
            name = value;
            OnPropertyChanged("Name");
        }
    }
    public String ImagePath
    {
        get { return imagePath; }
        set
        {
            if (value == imagePath) return;
            imagePath = value;
            OnPropertyChanged("ImagePath");
        }
    }
}

最后是您的viewmodel：

public class MainViewModel : INotifyPropertyChanged
{
    // assuming you have the images
    private ObservableCollection<SomeItem> items = new ObservableCollection<SomeItem>
    {
        new SomeItem{ImagePath = "Images/a.jpg", Name= "sdfgsdfgsdfgdfsg"},
        new SomeItem{ImagePath = "Images/b.jpg", Name= "sdfgsdfgsdfgsdfg"},
        new SomeItem{ImagePath = "Images/c.jpg", Name= "sdfsdfgsdfgsdfgsdfgssdfg"},
    };
    private SomeItem selectedItem;
    public ObservableCollection<SomeItem> Items
    {
        get { return items; }
        set
        {
            if (Equals(value, items)) return;
            items = value;
            OnPropertyChanged("Items");
        }
    }

    public SomeItem SelectedItem
    {
        get { return selectedItem; }
        set
        {
            if (Equals(value, selectedItem)) return;
            selectedItem = value;
            OnPropertyChanged("SelectedItem");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    [NotifyPropertyChangedInvocator]
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}