如何构造一个动态的（由db确定的UI控件）XAML页面？

Question

我正在尝试解决以下问题。在我的XF应用程序中，我的页面必须具有动态性质-将在页面上呈现的控件（对于每个类别“位置”，“性别”）是从数据库表中确定的。

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

如何以尽可能少的C＃（主要是XAML）以“更精细的”方式实现该页面设计？我正在寻找任何建议和想法。预先谢谢你！

Answer 1

没有一个简单的解决方案。 我做了类似的事情，尽管它需要很多代码，甚至不能简单地复制/粘贴。

不过，我将尝试向您简要介绍我的解决方案。

如果我看对了，您想要一个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，该页面将在其构造函数中接受一个List。 创建此页面的新实例时，可以以编程方式遍历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
    }
}

创建屏幕后，可以将它们放到TabbedPage中，然后就可以开始使用了。