XAML 如何在列表视图中显示图像?

azpvetkf  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(137)

我试图从文件夹中获取图像,并将其存储到类名“Project”中。
然后我想在列表视图中显示它们。
因此,我可以在上面的项目名称显示每个项目类中的图像列表。
这是'项目'类

public class Project : INotifyPropertyChanged
    {

        private int id { get; set; }
        private string name { get; set; }

        private bool isChecked;


        public int ProjectId
        {
            get { return id; }
            set
            {
                id = value;
                NotifyPropertyChanged();
            }
        }

        public string ProjectName
        {
            get { return name; }
            set
            {
                name = value;
                NotifyPropertyChanged();
            }
        }

        public bool IsChecked
        {
            get { return isChecked; }
            set
            {
                isChecked = value;
                NotifyPropertyChanged();
            }
        }

        public List<string> projectImages { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(string propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

    }

此功能用于将图像添加到列表中

private void menu_Open_Project(object sender, RoutedEventArgs e)
        {

            
            

            var imageList = GetImageFromDirectory.GetImageFiles(some directory path goes here);

            if (projects.Count > 0)
            {
                var lastIndexNumber = projects.Last().ProjectId + 1;

                projects.Add(new Project() { ProjectId = lastIndexNumber, ProjectName = "Project " + lastIndexNumber.ToString(), projectImages = imageList });
             }
          }

这是带有列表视图的xaml。

<ListView Name="projectListView" Background="LightGray">

                    <ListView.View>
                        <GridView ColumnHeaderContainerStyle="{StaticResource HeaderStyle}">
                            
                            <GridViewColumn>
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical">

                                            <Border BorderBrush="Black" BorderThickness="2, 2, 2, 2">
                                                <Grid>
                                                    <TextBlock Text="{Binding ProjectName}" Background="Gray"/>
                                                </Grid>
                                            </Border>
                                            <Border BorderBrush="Black" BorderThickness="2, 0, 2, 2">
                                                <Grid>
                                                    <Image/>

                                                </Grid>
                                            </Border>
                                        </StackPanel>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            

                        </GridView>

                    </ListView.View>
                </ListView>
4zcjmb1e

4zcjmb1e1#

您可以使用ItemsControl及其衍生控件来显示多个影像。
另外,将图像文件的路径直接设置为Image.Source并不理想,因为这样会锁定该图像文件。相反,建议使用转换器将文件路径转换为BitmapImage。为此,我们可以在Clemens's comment中使用StringToImageConverter
因此,假设每个Image的宽度为100,则这样的ItemsControl将如下:

<!-- Somewhere in xaml such as Window.Resources -->
<local:StringToImageConverter x:Key="StringToImageConverterKey"/>

<!-- Inside DataTemplate of GridViewColumn.CellTemplate -->
<ItemsControl ItemsSource="{Binding projectImages}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Width="100" Source="{Binding Mode=OneWay, Converter={StaticResource StringToImageConverterKey}}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

相关问题