Master/Details 绑定 MVVM

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>

所以，它工作正常，我看到我的文件夹在页面上有图像 enter image description here

看起来不错，我认为这一切。但是当我想从 MVVM 模型向 AdaptiveGridView 添加事件和 SelectedItem 时，我发现它看不到它们。 Visual Studio 让我知道我可以在模型 "AppFolder" 中编写它们，但这是胡说八道....

那么，我的问题是：如何从 UserPhotosViewModel 向自适应网格添加事件（绑定 command/method）？

感谢您的宝贵时间。

更新 enter image description here

Answer 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 class 中添加命令属性，如下所示：

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)

关于这个需求，我建议你最好添加一个按钮来绑定删除选中项的命令。

Master/Details 绑定 MVVM

Master/Details binding MVVM

mvvm

binding

uwp

master-detail