Four classes - Scene, Dialog, Panel and ListPanelItem - can be laid out using the UI Composer.
This chapter explains in order, the kinds of scenarios where these four classes are used (Figure 1).
![]()
Figure 1 Four Scenarios
This section explains a Scene layout.
Create a simple screen layout by placing an ImageBox and a Button on a Scene (Figure 2).
![]()
Figure 2 Scene Layout Elements
First, create a new Scene using the UI Composer (Figure 3).
![]()
Figure 3 Creating a New Scene
Place an ImageBox and Button on the created Scene (Figure 4).
![]()
Figure 4 Scene Layout Result
Upon building in this state, the following code will be output.
partial class MyScene { ImageBox ImageBox_1; Button Button_1; private void InitializeWidget() { InitializeWidget(LayoutOrientation.Horizontal); } private void InitializeWidget(LayoutOrientation orientation) { ImageBox_1 = new ImageBox(); ImageBox_1.Name = "ImageBox_1"; Button_1 = new Button(); Button_1.Name = "Button_1"; // ImageBox_1 ImageBox_1.Image = new ImageAsset("/Application/assets/photo05.png"); // Button_1 Button_1.TextColor = new UIColor(0f / 255f, 0f / 255f, 0f / 255f, 255f / 255f); Button_1.TextFont = new UIFont( FontAlias.System, 25, FontStyle.Regular); Button_1.BackgroundColor = new UIColor(255f / 255f, 255f / 255f, 255f / 255f, 255f / 255f); // Scene this.RootWidget.AddChildLast(ImageBox_1); this.RootWidget.AddChildLast(Button_1); SetWidgetLayout(orientation); UpdateLanguage(); } private LayoutOrientation _currentLayoutOrientation; public void SetWidgetLayout(LayoutOrientation orientation) { switch (orientation) { // --snip-- default: this.DesignWidth = 854; this.DesignHeight = 480; ImageBox_1.SetPosition(212, 45); ImageBox_1.SetSize(429, 286); ImageBox_1.Anchors = Anchors.Top | Anchors.Height | Anchors.Left | Anchors.Width; ImageBox_1.Visible = true; Button_1.SetPosition(319, 374); Button_1.SetSize(214, 56); Button_1.Anchors = Anchors.Top | Anchors.Height | Anchors.Left | Anchors.Width; Button_1.Visible = true; break; } _currentLayoutOrientation = orientation; } // --snip-- }
To use the created layout, write as follows within the Main function of Program.cs.
public class AppMain { // --snip-- public static void Initialize () { // Set up the graphics system graphics = new GraphicsContext (); // Initialize UI Toolkit UISystem.Initialize(graphics); // Create scene var scene = new MyScene(); // Set scene UISystem.SetScene(scene, null); } // --snip-- }
By building and executing in this state, Scene operation on the emulator will be exactly as it has been laid out (Figure 5).
![]()
Figure 5 Execution Result on the Emulator
This section explains a Dialog layout and its usage method.
The following is an example of the laid out Dialog being displayed when the Button placed on the Scene is pressed (Figure 6).
![]()
Figure 6 Example of a Dialog Display
In the same manner as the preceding section, create a Scene and a Dialog (Figure 7).
![]()
Figure 7 Dialog Layout Result
Write to MyScene.cs as follows so that a Dialog is displayed when the Button placed on MyScene is pressed.
Add MyDialog to MyScene.
public partial class MyScene : Scene { static private MyDialog dialog; public MyScene() { InitializeWidget(); dialog = new MyDialog(); } }Add an event to display a Dialog to Button_1.
public partial class MyScene : Scene { MyDialog dialog; public MyScene() { InitializeWidget(); dialog = new MyDialog(); Button_1.ButtonAction += HandleButton_1ButtonAction; } void HandleButton_1ButtonAction (object sender, TouchEventArgs e) { dialog.Show(); } }Register an event for the Button of MyDialog in the same manner.
public partial class MyDialog : Dialog { public MyDialog() : base(null, null) { InitializeWidget(); Button_1.ButtonAction += HandleButton_1ButtonAction; } void HandleButton_1ButtonAction (object sender, TouchEventArgs e) { this.Hide(); } }
As in the preceding section, display MyScene and tap on Button to display the Dialog (Figure 8).
![]()
Figure 8 Execution Result on the Emulator
An example to display multiple Panels using PagePanel is explained (Figure 9).
![]()
Figure 9 PagePanel Overview
Create MyScene, MyPanel1 and MyPanel2 (Figure 10).
Place PagePanel on MyScene.
Newly-create MyPanel1 and MyPanel2 according to the size of PagePanel (Figure 11).
![]()
Figure 10 PagePanel Layout Result
![]()
Figure 11 Creating a New Panel
Set MyPanel1 and MyPanel2 to the PagePanel placed on MyScene. Set the Panel created in the PagePanel property window. (Figure 12).
![]()
Figure 12 Specifying the Created Panel
MyPanel1 and MyPanel2 to be displayed by PagePanel will be specified by MyScene.composer.cs.
private void InitializeWidget() { // --snip-- // PagePanel_1 PagePanel_1.AddPageLast(new MyPanel1()); PagePanel_1.AddPageLast(new MyPanel2()); }
Upon building and executing, the PagePanel will operate as it has been laid out (Figure 13).
![]()
Figure 13 Execution Result on the Emulator
This section explains a List layout and its usage method (Figure 14).
![]()
Figure 14 ListPanel Overview
In the same manner as the PagePanel in the preceding section, place ListPanel on MyScene.
Create MyListPanelItem - an element to place on ListPanel (Figure 15).
![]()
Figure 15 List Layout Result
Set MyListPanelItem created to ListPanel (Figure 16).
![]()
Figure 16 Specifying the Created ListPanelItem
MyListPanelItem to be displayed by ListPanel_1 will be specified by MyScene.composer.cs.
private void InitializeWidget(LayoutOrientation orientation) { // --snip-- // ListPanel_1 ListPanel_1.ScrollBarVisibility = ScrollBarVisibility.Visible; ListPanel_1.SetListItemCreator(MyListPanelItem.Creator); }
A Creator method will automatically be created for MyListPanelItem.composer.cs.
partial class MyListPanelItem { // --snip-- public static ListPanelItem Creator() { return new MyListPanelItem(); } }
To update MyListPanelItem and to specify the number of item for ListPanel_1, write to MyScene.cs as follows. Add the code to write regarding the MyListPanelItem update content within ListItemUpdater. An example is indicated here to display numbers as a Label string.
public partial class MyScene : Scene { public MyScene() { InitializeWidget(); ListPanel_1.SetListItemUpdater(ListItemUpdater); ListPanel_1.Sections = new ListSectionCollection { new ListSection("Section", 10) }; } void ListItemUpdater(ListPanelItem item) { Label label = null; foreach (var w in item.Children) { label = w as Label; if (label != null) break; } if (label != null) { label.Text = item.Index.ToString(); } } }
Upon building and executing, the ListPanel will operate as it has been laid out (Figure 17).
![]()
Figure 17 Execution Result on the Emulator