> For the complete documentation index, see [llms.txt](https://adospace.gitbook.io/reactorui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adospace.gitbook.io/reactorui/native-tree-and-visual-tree.md). # Native Tree and Visual Tree Xamarin Forms app is composed from a tree of visual elements (classes deriving from `Element`). More precisely any page is the root of a controls tree that describe its UI. For example you could have a `ContentPage` that contains a `ScrollViewer` that in turn contains a `StackPanel` with children and so on. \ This kind of visual tree structure is pretty common to many other framework or technologies (think to HTML DOM or WPF visual tree just name a few).\ It's often called "native" visual tree because it represents the lowest layer of abstraction in UI just above pixels on the screen. Framework like ReactorUI (that is freely inspired to React/Flutter libraries) creates a second higher visual tree (sometimes called "ghost" tree). When you create a page with children in ReactorUI, you're actually creating a visual tree of objects deriving from `VisualNode`. Often a visual node in ReactorUI pairs with a corresponding native control. A ReactorUI component is an object that describe its UI in terms of visual nodes. A component itself is a visual node so you can build a tree of components. A few things happen when component calls its `Invalidate` method (`SetState` in components with state) \ 1\) ReactorUI calls its `Render` method and created a second version of the component *ghost* tree\ 2\) Previous tree is compared to the new one: new nodes are "mounted", old ones are "unmounted"\ 3\) Any mounted visual node usually creates its paired native control and add it to the native tree in the correct position; any unmounted node is removed from the native tree\ 4\) Any new or preserved node *usually* updates corresponding properties of the native counterpart This section of articles or tutorials will essentially show you how create ghost visual nodes for any control you want to use in ReactorUI. This could appear complex at first but you'll see that most of the time is mostly a ripetitive process that consists in creating a few small classes that for more clarity are usually contained in a single c# file. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://adospace.gitbook.io/reactorui/native-tree-and-visual-tree.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.