Xamarin.Forms 中的动态 UI [英] Dynamic UI in Xamarin.Forms

问题描述

我想向移动应用页面添加一个可滚动菜单.
这里的转账、账户、付款和交易是从 XML 文件生成的.
其余部分是静态布局.

我正在使用 Xamarin.Forms.
我想知道如何动态生成 UI 组件并将它们附加到使用 Xamarin.Forms 的占位符.

I would like to add a scrollable menu to a mobile app page.
Here Transfer, Accounts, Payment and Transaction are generated from an XML file.
The rest is static layout.

I am using Xamarin.Forms.
I would like to know how to generate UI components dynamically and attach them to a placeholder using Xamarin.Forms.

推荐答案

动态 UI 创建就像人们说的那样简单，并且有很多示例.但我认为问题在于根据您的需要创建自己的控件.例如，我最终编写了自己的带有图像的按钮，如下所示:

Dynamic UI creation is simple like the people said and there are many examples. But i think the problem is creating your own control according to your needs. For example i ended up with writing my own button with image in it like this:

因此，您必须编写一种方法来创建垂直堆栈布局(假设为外部容器)，并向该外部容器"(假设为内部容器)添加一个水平容器，而不是向该外部容器"添加图像和标签内部容器"并制作innerContainer.Horizo​​ntalOptions = LayoutOptions.Center"等.如果你想要边框它会变得复杂:)

So you have to write a method that creates a vertical stack layout (lets say outer container),and add a horizontal container to that "outer container" (lets say inner container) than add an image and a label to this "inner container" and make "innerContainer.HorizontalOptions = LayoutOptions.Center" etc. If you want border it goes complicated :)

Vertical Stack (whole container)
->Vertical Stack (height 2px) upper border
->Horizontal Stack (to hold middle controls,left border,inner image and text holder, right border etc.)
    ->Horizontal Stack (width 2 px) left border
    ->Vertical Stack (layoutOptions=Fillandexpand)
        ->Image (layoutOptions=Center)
        ->Label (layoutOptions=Center)
    ->Horizontal Stack (width 2 px) right border
->Vertical Stack (height 2px) lower border

所以你必须加入这样的层级控制.首先考虑如何使用现有控件绘制控件而不是编写代码 :) 希望我说清楚了.

So you have to join the controls like this hierarcy. First think how can you draw your control with existing controls than code it :) Hope i made my self clear.

这篇关于Xamarin.Forms 中的动态 UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！