代码之家 › 专栏 › 技术社区 › Georgi Koemdzhiev

如何构造动态(由db决定的UI控件)XAML页?

xamarin.forms-layout xamarin.forms xaml

1

Georgi Koemdzhiev · 技术社区 · 6 年前

我正在努力解决下列问题。在我的XF应用程序中,我有一个页面必须是动态的——页面上呈现的控件(对于每个类别“位置”、“性别”)是由数据库表决定的。

数据库表具有类似的架构:

如何用尽可能少的C(主要是XAML)以“更好”的方式实现页面设计?我正在寻找任何建议和想法。提前谢谢你!

1 回复 | 直到 6 年前

1

Markus Michel 6 年前

没有简单的解决办法。我也做过类似的事情,虽然它需要很多代码,甚至不能简单地复制/粘贴。

不过,我会尽量给你一个简短的概述,我的解决方案看起来是什么样子的。

如果我看对了,您希望有一个TabbedPage,其中包含从数据源生成的动态子页面。

1)型号 您将需要某种类型的工厂类,它将获取您的数据并从中构建一些UIElementModels。这些模型应该以抽象的方式描述您的UI,以便它们包含您想要使用的UI元素的所有信息,例如显示的文本和实际值。

public class UIElementModel
{
    public object ElementValue {get;set;}
    public string Text {get;set;}
}

然后导出特定元素的改进模型

public class UIButtonModel : UIElementModel
{
    public Command ClickAction {get;set;}
}

public class UIEntryModel : UIElementModel
{
    public string Placeholder {get;set;}
}

public class UIPickerModel : UIElementModel
{
    public List<string> Items {get;set;}
}

等等。您可以随时添加定义要显示的元素内容和视觉效果所需的内容。

2)要素和页面

接下来,必须创建从基本UI元素派生的自定义UI元素。例如,如果您有一个按钮,那么创建一个DynamicButton类,该类将接受UIButtonModel作为绑定上下文。我还建议您提供一个构造函数,您可以在其中移交这样的模型。

然后创建一个从ContentPage派生的DynamicPage,它将在其构造函数中接受一个列表。创建此页的新实例时,可以通过编程遍历ui模型列表,创建相关自定义ui元素的实例并将其放入页中:

伪码:

public DynamicPage(List<UIElementModel> uiElements) : ContentPage
{
    InitializeComponent();
    foreach (UIElementModel model in uiElements)
    {
        if (model.Type == UIEntryModel)
        {
            DynamicEntry entry = new DynamicEntry(model);
            this.ElementStackLayout.Children.Add(entry);
        }
        if (model.Type == UIButtonModel)
        {
            DynamicButton button = new DynamicButton(model);
            this.ElementStackLayout.Children.Add(button );
        }
        ...
        // add more elements as needed
    }
}

一旦你创建了你的屏幕,你可以把它们放到一个标签页,你应该准备好去。