Связывание Master / Details MVVM

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

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?

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

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

Мне непонятно, чего вы пытаетесь достичь. Не могли бы вы опубликовать "неработающий" код, чтобы помочь нам понять?

Martin Zikmund 09.05.2018 17:48

Вы пробовали EventTriggerBehavior в UWP?

Xie Steven 10.05.2018 08:56

@MartinZikmund Я пытаюсь добавить событие doubleTapped и выбранный элемент для AdaptiveGridView для взаимодействия с изображениями. 1) Пользователь выбирает N изображений и удаляет их (пример) 2) Пользователь дважды щелкает изображение и программа отправляет папку с этим изображением и другими на страницу и привязывает их к FlipView (имитация полноэкранного просмотра) Я добавляю экран в сообщение, когда VS предлагает me метод или свойство из модели папки

Stanislav Zinoviev 10.05.2018 11:40

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

Stanislav Zinoviev 10.05.2018 11:44
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
4
110
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

2) User double click on image and program send folder with this image and other to page and binding them to FlipView (imitation full screen viewer)

I try to add, but that way also offers to write event and property in model. I use this way for settings in navigation panel (parent control for master/details)

Вам просто нужно добавить свойство команды в свой класс 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) User select N images and delete them (example)

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

Спасибо большое, мне это помогло!

Stanislav Zinoviev 22.05.2018 17:56

Другие вопросы по теме