在 Xamarin 的 ViewModel 中绑定来自 Bindablelayout.ItemTemplate 的数据

Question

我在Dynamically adding Entry Controls 中遇到了一个问题，Wendy Zang - MSFT 帮助并解决了它。

从API获取条目列表的代码写在.xml.cs页面中，在.xml页面中，StackLayout的Bindablelayout.ItemTemplate用于设置条目模板。

它运行良好，但提交表单的代码写在ViewModel。

当我将.xml.cs 页面的代码粘贴到ViewModel 时，我无法获取条目，并且当代码在xml.cs 中时，我必须在ViewModel 中设置this.BindingContext = this; 代码没有执行。

.xml

<StackLayout BindableLayout.ItemsSource="{Binding forms}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Entry Name="{Binding name}" Placeholder="{Binding label}" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

xml.cs

RootObject list = JsonConvert.DeserializeObject<RootObject>(fields);

forms = new List<Form>();
forms = list.data.FirstOrDefault().Form.ToList();

this.BindingContext = this;

XAML 和 ViewModel 中的按钮

<Button
x:Name="SubmitButton"
Text="Submit"
Command="{Binding FormCommand}">

public ICommand FormCommand=> new Command(async (x) => await FormButton(default, default));

更新

从服务器获取动态字段的代码。

public async Task CreateCollection()
{
    Uri uri = new Uri(string.Format("http://example.com/entry"));

    HttpClient httpClient = new HttpClient(new NativeMessageHandler());

    HttpResponseMessage response = await httpClient.GetAsync(uri);
    string entries = await response.Content.ReadAsStringAsync();

    RootObject list = JsonConvert.DeserializeObject<RootObject>(entries);

    form = new List<Form>();
    form = list.data.FirstOrDefault().form.ToList();
}

Answer 1

如果你想用 ViewModel 做这个，你可以参考下面的代码。

Xaml：

      <StackLayout>
        <Button
    x:Name="SubmitButton"
    Text="Submit"
    Command="{Binding FormCommand}"></Button>
        <StackLayout x:Name="DynamicEntry" BindableLayout.ItemsSource="{Binding forms}">
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <Entry Placeholder="{Binding label}" MaxLength="{Binding max_length}" />

                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </StackLayout>

后面的代码：

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();

        this.BindingContext = new ViewModel();
    }
}

视图模型：

public class ViewModel
{
    public List<Form> forms { get; set; }
    public ICommand FormCommand { get; set; }
    public ViewModel()
    {
        CreateCollection();
        FormCommand = new Command(async (x) => await FormButton(default, default));
    }

    private Task FormButton(object p1, object p2)
    {
        return Task.Delay(2000);
    }

    public void CreateCollection()
    {
        var json = @"{
'success': 'true',
'data': [
{
    'form': [
        {
            'label': 'Name',
            'name': 'name',
            'type': 'text',
            'max_length': '15',
            'required': 'true'
        },
        {
            'label': 'Email',
            'name': 'email',
            'type': 'email',
            'max_length': '30',
            'required': 'true'
        }
    ]
}
]
}";
        var list = JsonConvert.DeserializeObject<Rootobject>(json);

        forms = new List<Form>();
        forms = list.data.FirstOrDefault().form.ToList();
    }
}

输出：

Answer 2

要全面了解，请查看@Wendy's 解决方案。问题是，打开页面时表单没有出现，但是当我处于调试模式并刷新 .xml 页面时，它出现了。

@Shaw 建议使用ObservableCollection<> 而不是List<>，但在list.data.FirstOrDefault().form.ToList(); 上它说无法将'System.Collection.Generic.List' 转换为'System.Collections.ObjectModel.ObservableCollection '.

我修好了..这是完整的解决方案。

private ObservableCollection<Form> _forms = new ObservableCollection<Form>();
public ObservableCollection<Form> Forms
{
    get
    {
        return _forms;
    }
    set
    {
        this.RaiseAndSetIfChanged(ref _forms, value);
    }
}

var list = JsonConvert.DeserializeObject<Rootobject>(json);

foreach (var i in list.data.Where(c => c.id == ""))
{
    _forms.Add(i.form.ToList());
}