MVVM 动态添加元素到滚动视图 [英] MVVM add elements dynamically to scrollview

问题描述

如果之前有人问过这个问题，请提前道歉.我发现的最接近的是 (如何使用垂直滚动查看以显示绑定数据)，这看起来很有希望，但我不确定它是否会起作用，因为我的理解是模板，正如名称和定义所暗示的那样，必须遵循特定的模式，因此可以'是动态的.

Apologies ahead of time if this was asked before. The closest thing I found was (How to use vertical Scroll view to show binding data), which looks promising, though I am not sure if it will work because my understanding is that a template, as the name and definition would imply, has to follow a specific pattern and thus can't be dynamic.

我的问题:我正在尝试重写我们的一些代码以更紧密地遵循 MVVM 模式，这当然意味着尽可能使视图变得愚蠢.在我看来 (xaml.cs) 我有执行以下操作的代码:

My issue: I am trying to rewrite some of our code to more closely follow MVVM patterns, this of course means making the view as dumb as possible. In my view (xaml.cs) I have code that does the following:

 foreach(var tuple in itemsToAdd)
            {
                var formEntry = formEntries.First(x => x.FormEntryId == tuple.Item1);
                var controlType = formatting.GetControlType(formEntry.FormAnswerName,
                                                         formEntry.CustomEntryIdentifier);

                if (formEntry.Type == 0) {
                    switch (controlType) {
                        case CustomControl.Duration:
                            CustomFields.Children.Add(new DurationView(formEntry.FormEntryId, viewModel));
                            break;
                        case CustomControl.TextField:
                        case CustomControl.InputField:

                            CustomFields.Children.Add(new InputFieldView(formEntry.FormEntryId, viewModel));
 .....//continues like this for different controls.

列表 itemsToAdd 是在我的视图模型中定义的，它的工作是找出用户生成的模板中的哪些元素需要显示.这当然很好，因为根据我对 MVVM 的理解，视图模型需要控制行为(在这种情况下，显示什么)，而 UI 只是处理显示字段.

The list itemsToAdd is defined in my view model, its job is to figure out which elements from a user generated template need to be displayed. This is of course fine, since per my understanding of MVVM, the view model is what needs to control the behaviors (in this case, what to display) and the UI simply handles displaying the fields.

我想知道是否还有可能让视图模型处理，本质上，设置滚动视图的项目源，就像我们为列表视图创建项目源时所做的那样(比如一个列表可用模板)，因为每个控件都是我们制作的自定义视图，我看不到实现此目的的可行方法，因为它不能(据我了解)遵循模板，因为每个控件都不同，并且我不想让我的视图模型返回一个实际的视图对象，因为这会违反 MVVM 原则.

I was wondering though if it could be possible to also let the view model handle, in essence, setting the item source of the scroll view as we do when we create an item source for a list view (say like a list of available templates), as since each of the controls is a custom view that we made, I don't see a doable way of achieving this as since it can't (from my understanding) follow a template since each control is different, and I don't want to have my view model returning an actual view object as that would violate MVVM principles.

本质上是:我是否误解了 Xamarin 中的 MVVM，后面的 xaml 代码是否可以添加类似我在代码片段中显示的元素.

Really in essence is: Am I misunderstanding MVVM in Xamarin, and is it alright for the xaml code behind to add elements like what I show in the code snippet.

如果不清楚我的要求，我深表歉意！

Apologies if it is unclear what I am asking for!

推荐答案

我不确定我是否理解真正的问题，您是否试图根据 itemsToAdd 元素为每个 itemsToAdd 元素显示不同的 UI代码>类型属性?

I am not sure I understand the real problem, are you trying to show a different UI for each itemsToAdd element according to the Type property?

如果是问题，您可以将整个集合绑定到 ListView 控件(或您正在使用的任何控件)并使用 DataTemplateSelector 来选择您想要的 UI.参考

If it is the problem, you can bind the entire collection to the ListView control (or whatever you are using) and use a DataTemplateSelector to choose the UI you want. Reference

查看你可以参考之前的链接.它会像:

View You can refer to the previous link. It would be like:

<ListView ItemsSource="{Binding FormEntries}" DataTemplateSelector="{StaticResource dataTemplateSelectorName}"/>

确保您的页面数据上下文设置为视图模型

Ensure your page data context is set to the view model

视图模型假设您的对象类型名为 FormEntry

ViewModel Assuming your object type is named FormEntry

private ObservableCollection<FormEntry> _formEntries;
public ObservableCollection<FormEntry> FormEntries
{
    get => _formEntries;
    set
    {
        _formEntries = value;
        // Call the 'RaisePropertyChanged' of the framework you are using
    }
}

...
FormEntries = new ObservableCollection<FormEntry>(itemsToAdd);
...

DataTemplateSelector参考链接构建一个扩展DataTemplateSelector的类并覆盖OnSelectTemplate方法来确定业务逻辑来选择你想要的UI模板

DataTemplateSelector Refer to the link to build a class that extends DataTemplateSelector and override the OnSelectTemplate method to determine the business logic to choose the UI template you want

这篇关于MVVM 动态添加元素到滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！