Wrappanel Not Updating After Drag&Drop Files

Question

I have a View that has ItemsControl and Wrappanel inside it. By using Drag&Drop files I am trying to update the Wrappanel. I have all data related to files in a JsonFile. There is no problem with appending data to json file. It is working. When I redebug the solution I can see the list of files in Wrappanel.

 public partial class StorageView : Window
{
    readonly StorageViewModel _storageViewModel;
    public StorageView()
    {
        _storageViewModel = new StorageViewModel();            
        InitializeComponent();
    }

    private void TopMenuBorder_MouseDown(object sender, MouseButtonEventArgs e)
    {
        if (e.ChangedButton == MouseButton.Left)
        {
            this.DragMove();
        }
    }

    // Wrappanel Drop
    private void StorageBrowser_Drop(object sender, DragEventArgs e)
    {
        string[] files = (string[])e.Data.GetData(DataFormats.FileDrop);

        List<string> files2 = new List<string>();

        foreach (var file in files)
        {
            files2.Add(file);
        }

        _storageViewModel.TempFiles = files2;
    }

    // Drag Enter
    private void StorageBrowser_DragEnter(object sender, DragEventArgs e)
    {
        if (e.Data.GetDataPresent(DataFormats.FileDrop))
            e.Effects = DragDropEffects.Move;
        else
            e.Effects = DragDropEffects.None;
    }

    private void CreateNewFolder_Click(object sender, RoutedEventArgs e)
    {


    }
}




 <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
                <StackPanel Orientation="Vertical">
                    <Button Command="{Binding AddFileCommand}" Content="Add File"/>
                    <ItemsControl ItemsSource="{Binding Files, UpdateSourceTrigger=PropertyChanged}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel Name="StorageBrowser" Background="White" Drop="StorageBrowser_Drop" DragEnter="StorageBrowser_DragEnter" VerticalAlignment="Stretch" AllowDrop="True" Orientation="Horizontal"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Label Content="{Binding FileName}"/>
                                <!--<comp:FileCard/>-->
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </StackPanel>                   
            </ScrollViewer> 





public class StorageViewModel : Screen, INotifyPropertyChanged
{
    #region Commands

    private ICommand _addFileCommand;
    private bool canExecute = true;
    public bool CanExecute
    {
        get
        {
            return this.canExecute;
        }

        set
        {
            if (this.canExecute == value)
            {
                return;
            }

            this.canExecute = value;
        }
    }
    public ICommand AddFileCommand
    {
        get
        {
            return _addFileCommand;
        }

        set
        {
            _addFileCommand = value;
        }
    }

    #endregion

    #region Notify
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    #endregion

    #region FileModel

    private int _id;
    private string _fileName;
    private string _fullFileName;
    private decimal _fileSize;
    private string _fileType;
    private string _fileIcon;
    private string _fileExtension;
    private string _fileSizeType;
    private string _fileImage;
    private string _fullFileSize;
    private string _fileOwner;
    private DateTime? _created;
    private DateTime? _modified;
    private DateTime? _lastAccessed;
    private bool _isVersionFile;
    private List<FileModel> _fileVersions;

    public List<FileModel> FileVersions
    {
        get { return _fileVersions; }
        set { _fileVersions = value; OnPropertyChanged(nameof(FileVersions)); }
    }
    public bool IsVersionFile
    {
        get { return _isVersionFile; }
        set { _isVersionFile = value; OnPropertyChanged(nameof(IsVersionFile)); }
    }
    public DateTime? LastAccess
    {
        get { return _lastAccessed; }
        set { _lastAccessed = value; OnPropertyChanged(nameof(LastAccess)); }
    }
    public DateTime? Modified
    {
        get { return _modified; }
        set { _modified = value; OnPropertyChanged(nameof(Modified)); }
    }
    public DateTime? Created
    {
        get { return _created; }
        set { _created = value; OnPropertyChanged(nameof(Created)); }
    }
    public string FileOwner
    {
        get { return _fileOwner; }
        set { _fileOwner = value; OnPropertyChanged(nameof(FileOwner)); }
    }
    public string FullFileSize
    {
        get { return _fullFileSize; }
        set { _fullFileSize = value; OnPropertyChanged(nameof(FullFileSize)); }
    }
    public string FileImage
    {
        get { return _fileImage; }
        set { _fileImage = value; OnPropertyChanged(nameof(FileImage)); }
    }
    public string FileSizeType
    {
        get { return _fileSizeType; }
        set { _fileSizeType = value; OnPropertyChanged(nameof(FileSizeType)); }
    }
    public string FileExtension
    {
        get { return _fileExtension; }
        set { _fileExtension = value; OnPropertyChanged(nameof(FileExtension)); }
    }
    public string FileIcon
    {
        get { return _fileIcon; }
        set { _fileIcon = value; OnPropertyChanged(nameof(FileIcon)); }
    }
    public string FileType
    {
        get { return _fileType; }
        set { _fileType = value; OnPropertyChanged(nameof(FileType)); }
    }
    public decimal FileSize
    {
        get { return _fileSize; }
        set { _fileSize = value; OnPropertyChanged(nameof(FileSize)); }
    }
    public string FullFileName
    {
        get { return _fullFileName; }
        set { _fullFileName = value; OnPropertyChanged(nameof(FullFileName)); }
    }
    public string FileName
    {
        get { return _fileName; }
        set { _fileName = value; OnPropertyChanged(nameof(FileName)); }
    }
    public int Id
    {
        get { return _id; }
        set { _id = value; OnPropertyChanged(nameof(Id)); }
    }

    #endregion

    #region Collections

    private List<string> _tempFiles { get; set; }
    public List<string> TempFiles { get { return _tempFiles; } set { _tempFiles = value; OnPropertyChanged("TempFiles"); } }


    private ObservableCollection<FileModel> _files { get; set; }
    public ObservableCollection<FileModel> Files { get { return _files; } set { _files = value; OnPropertyChanged("Files"); } }

    #endregion

    public StorageViewModel()
    {
        AddFileCommand = new RelayCommand(AddFile, param=>this.canExecute);
        Files = new ObservableCollection<FileModel>(Documentive.GCS.DataAccess.GCSDataAccess.GetDataFromJson());
    }

    public void AddFile(object o)
    {          
        foreach (var file in TempFiles)
        {
            Documentive.GCS.DataAccess.GCSDataAccess.AppendDataToFileJson(file);
        }

        Files.Clear();
        Files = Documentive.GCS.DataAccess.GCSDataAccess.GetDataFromJson();
    }
}

There is all my codes. I need to update ItemsControl and list new files' data in wrappanel. There is no problem with the FileCard UserControl, I just tried to list data by using label.(just a test)

I don't know if there is a problem with Drag&Drop event and its codes or not.

Thanks.

Answer 1

I think you might actually have a few problems here.

First of all, implement DragOver instead of DragEnter, otherwise you won't be able to drop files into it.

Secondly, get rid of the ScrollViewer, and let ItemsControl manage the scrolling itself. There are a number of reasons for this (not the least of which is virtualization), but just trust me: never put an ItemsControl inside a ScrollViewer.

Next, get rid of the vertical StackPanel. By placing everything in a stack panel you're making your ItemsControl size itself according to the number of items it's already bound to, so dropping files into that big blank area underneath it won't do anything. Set your WrapPanel's background to a color you can actually see, and make sure it's covering the area of the page you think it is. Best way to do that is to use a parent Grid to do layout and then populate that with your Button and ItemsControl, setting your alignment properties accordingly.

The biggest problem with this code though is that your TopMenuBorder_MouseDown handler is updating TempFiles, but your ItemsControl is binding to Files.