I have a list of files I am displaying that has a text box to input the name of a file, a button to press that allows you to select a file from the file explorer, and a text indicator that updates to let the user know when the file is in the progress of being loaded and when it has finished loading. I want to change the text indicator to a gif/jpg indicator. I would like a loading indicator to appear when the file begins to load and then a check mark to appear when the file has finished loading. I have not been able to find anything on how to bind images/gifs to a list view. Is this possible and if so how can it be done? Is there a better way to try to handle this functionality?
Model
using AuditEfficiencyMVVM.Helpers;
using AuditEfficiencyMVVM.Sources;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace AuditEfficiencyMVVM.Model
{
public class File : INotifyPropertyChanged
{
private Enums.FileType _type;
private string _location;
private SourceBase _source;
private Enums.FileLoadStatus _fileLoadStatus;
private List<Enums.TestType> _tests = new List<Enums.TestType>();
public Enums.FileType Type
{
get
{
return _type;
}
set
{
if (_type != value)
{
_type = value;
RaisePropertyChanged("Type");
}
}
}
public string Location
{
get
{
return _location;
}
set
{
if (_location != value)
{
_location = value;
RaisePropertyChanged("Location");
}
}
}
public List<Enums.TestType> Tests
{
get
{
return _tests;
}
set
{
if (_tests != value)
{
_tests = value;
}
}
}
public SourceBase Source
{
get
{
return _source;
}
set
{
if (_source != value)
{
_source = value;
}
}
}
public Enums.FileLoadStatus FileLoadStatus {
get
{
return _fileLoadStatus;
}
set
{
if (_fileLoadStatus != value)
{
_fileLoadStatus = value;
RaisePropertyChanged("FileLoadStatus");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
}
ViewModel
// Populate the List of Files on startup
public void LoadFiles()
{
ObservableCollection<Model.File> files = new ObservableCollection<Model.File>();
foreach (Model.Test test in IncludedTests)
{
foreach (Enums.FileType type in test.ExpectedSources)
{
Boolean containsType = false;
foreach (Model.File file in files)
{
if (file.Type == type)
{
containsType = true;
break;
}
}
if (!containsType)
{
files.Add(new Model.File { Type = type, Location = "", Source = null, FileLoadStatus = Enums.FileLoadStatus.NotStarted, Tests = new List<Enums.TestType> { test.Type } });
}
else
{
files.Where(t => t.Type == type).First().Tests.Add(test.Type);
}
}
}
Files = files;
}
// Logic to load the files on a button press
private async Task<SortedList<Enums.FileType, DataTable>> LoadFilesAsync()
{
try
{
SortedList<Enums.FileType, DataTable> fileList = new SortedList<Enums.FileType, DataTable>();
foreach (var file in Files)
{
// I want this to be something like LoadStatus = spinner.gif
file.FileLoadStatus = Enums.FileLoadStatus.InProgress;
fileList.Add(file.Type, await file.Source.LoadRecords(file));
// I want this to be something like LoadStatus = checkmark.jpg
file.FileLoadStatus = Enums.FileLoadStatus.Completed;
}
return fileList;
}
catch (Exception)
{
return null;
}
}
View
<ListView Grid.Row="1" Grid.Column="1" Grid.RowSpan="4" Margin="10" ItemsSource="{Binding Path=Files}">
<ListView.View>
<GridView x:Name="file">
<GridViewColumn Header="File Type" DisplayMemberBinding="{Binding Type, Mode=OneWay}"/>
<GridViewColumn Header="File Location" Width="250">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Text="{Binding Path=Location, Mode=TwoWay}" Width="225"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Width="30" Height="20" Command="{Binding Path=DataContext.SelectFileCommand,
RelativeSource={RelativeSource AncestorType=ListView}}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type GridViewRowPresenter}}, Path=DataContext}" Content="..."></Button>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Load Status" DisplayMemberBinding="{Binding FileLoadStatus, Mode=OneWay}"/>
</GridView>
</ListView.View>
</ListView>
