Мастер / Детали привязки МВВМ

Question

У меня возникла проблема с правильной привязкой моей папки с изображениями к основным данным и другими операциями с ними.Итак, у меня есть модель папки и изображения

public class AppFolder
{
    private long id;
    private List<AppImage> appImages;

    public AppFolder() { }

    public List<AppImage> AppImages { get => appImages; set => appImages = value; }
    public long Id { get => id; set => id = value; }
}

public class AppImage
{
    private int id;
    private string title;
    private ImageSource appImageURL;

    public AppImage() { }
    public AppImage(string title, ImageSource imageSource)
    {
        Title = title;
        AppImageURL = imageSource;
    }
    public int Id { get => id; set => id = value; }
    public string Title { get => title; set => title = value; }
    public ImageSource AppImageURL { get => appImageURL; set => appImageURL = value; }

}

И я связываю List с Master / Details.

    public class UserPhotosViewModel : ViewModelBase
{
    private readonly IDataService dataService;
    private readonly INavigationService navigationService;

    public UserPhotosViewModel(IDataService dataService, INavigationService navigationService)
    {
        this.dataService = dataService;
        this.navigationService = navigationService;

        Initialize();

    }

    private async Task Initialize()
    {         
        var item = new List<AppFolder>();
        try
        {
            item = await dataService.GetDataList();
            FolderList = item;
        }
        catch (Exception ex)
        {
        }      
    }

    private List<AppFolder> folderList;
    public List<AppFolder> FolderList
    {
        get { return folderList; }
        set
        {
            folderList = value;
            RaisePropertyChanged(nameof(FolderList));

        }
    }
}

Пример файла xaml

    <controls:MasterDetailsView ItemsSource="{Binding FolderList}">
            <controls:MasterDetailsView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Id}"></TextBlock>
                </DataTemplate>
            </controls:MasterDetailsView.ItemTemplate>

            <controls:MasterDetailsView.DetailsTemplate>
                <DataTemplate>
                    <controls:AdaptiveGridView ItemsSource="{Binding AppImages}"
                                                OneRowModeEnabled="False"
                                                       ItemHeight="205"                                                      
                                                       DesiredWidth="205"     
                                                       SelectionMode="Multiple"     

                                                       Margin="0 6 0 0"    
                                               >
                        <controls:AdaptiveGridView.ItemTemplate>
                            <DataTemplate >
                                <Grid Background="White" Margin="10">
                                    <Image                                                   
                                            Source="{Binding AppImageURL}"                 
                                            HorizontalAlignment="Center"                  
                                            VerticalAlignment="Center"
                                            Stretch="Uniform"
                                            />
                                    <TextBlock Text="{Binding TextTitle}"></TextBlock>
                                </Grid>
                            </DataTemplate>
                        </controls:AdaptiveGridView.ItemTemplate>
                    </controls:AdaptiveGridView>
                </DataTemplate>
            </controls:MasterDetailsView.DetailsTemplate>
        </controls:MasterDetailsView>

Итак,Это работает правильно, и я видел мои папки с изображениями на странице введите описание изображения здесь

Выглядит хорошо, и я думаю, что все это.Но когда я хочу добавить событие и SelectedItem в AdaptiveGridView из модели MVVM, я увидел, что он их не видит.Visual Studio показывает мне, что я могу написать их в модели "AppFolder", но это бессмысленно ....

Итак, мой вопрос: как я могу добавить событие (команда / метод привязки) в адаптивную сетку из UserPhotosViewModel?

Спасибо за ваше время.

ОБНОВЛЕНИЕ введите описание изображения здесь

Answer 1

2) Пользователь дважды щелкает изображение и программа отправляет папку с этим изображением и другими на страницу и привязывает их к FlipView (имитатор полноэкранного просмотра)

Я пытаюсь добавить, но этот способ также предлагает записать событие и свойство в модель. Я использую этот способ для настроек в панели навигации (родительский элемент управления для мастера / деталей)

Вам просто нужно добавить свойство команды в ваш класс AppFolder, как показано ниже:

public class AppFolder:ViewModelBase
{
    private long id;
    private List<AppImage> appImages;

    public AppFolder() { }

    public List<AppImage> AppImages { get => appImages; set => appImages = value; }
    public long Id { get => id; set => id = value; }

    public RelayCommand<object> relayCommand { get; set; }
}

Затем в вашем UserPhotosViewModel вы можете объявить метод для инициализации этой команды.

Так как я не знаю, что такое dataService.GetDataList(). Я просто поменяю это место в вашем коде и сделаю простой пример кода для вас.

private void Initialize()
{
    var item = new List<AppFolder>();
    try
    {
        List<AppImage> ls = new List<AppImage>();
        ls.Add(new AppImage() { Id = 1, Title = "aaa", AppImageURL = new BitmapImage(new Uri("ms-appx:///Assets/1.jpg")) });
        ls.Add(new AppImage() { Id = 2, Title = "bbb", AppImageURL = new BitmapImage(new Uri("ms-appx:///Assets/2.jpg")) });
        item.Add(new AppFolder() { Id = 1, AppImages = ls,relayCommand=new RelayCommand<object>(DoubleTapCommand) });
        FolderList = item;
    }
    catch (Exception ex)
    {
    }
}

private void DoubleTapCommand(object obj)
{
    //the obj will be an AppFolder object
}

<controls:MasterDetailsView.DetailsTemplate>
            <DataTemplate>
                <controls:AdaptiveGridView x:Name="grid" ItemsSource="{Binding AppImages}"
                                            OneRowModeEnabled="False"
                                                   ItemHeight="205"                                                      
                                                   DesiredWidth="205"     
                                                   SelectionMode="Multiple"     
                                                   Margin="0 6 0 0">
                    <Interactivity:Interaction.Behaviors>
                        <Interactions:EventTriggerBehavior EventName="DoubleTapped">
                            <Interactions:InvokeCommandAction Command="{Binding relayCommand}" CommandParameter="{Binding}"></Interactions:InvokeCommandAction>
                        </Interactions:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                    <controls:AdaptiveGridView.ItemTemplate>
                        <DataTemplate >
                            <Grid Background="White" Margin="10">
                                <Image                                                   
                                        Source="{Binding AppImageURL}"                 
                                        HorizontalAlignment="Center"                  
                                        VerticalAlignment="Center"
                                        Stretch="Uniform"
                                        />
                                <TextBlock Text="{Binding TextTitle}"></TextBlock>
                            </Grid>
                        </DataTemplate>
                    </controls:AdaptiveGridView.ItemTemplate>
                </controls:AdaptiveGridView>
            </DataTemplate>
        </controls:MasterDetailsView.DetailsTemplate>

1) Пользователь выбирает N изображений и удаляет их (пример)

Об этом требовании я предложил вам добавить кнопку для привязки команды для удаления выбранных элементов.