UI Basics

This first C# intermediate tutorial covers the basics of creating UI with Stride.

Explanation

We will learn about the UI editor, accessing UI page elements and even how to setup UI entirely by code. The Stride editor comes with a UI editor which we can utilize to create UI pages. We can then add UI elements to these pages, like buttons and textfields.

Those UI elements can be referenced in code, so that can set up events like button-clicked or text-changed.

Stride editor UI pages

The code below will look for a Page component that has been added to the current entity. On that page we search for UI elements like buttons and textfields. We than tell those UI elements what happens when we click on them, or that something needs to be done when a text value changes.

// Copyright (c) .NET Foundation and Contributors (https://dotnetfoundation.org/ & https://stride3d.net)
// Distributed under the MIT license. See the LICENSE.md file in the project root for more information.
using Stride.Engine;
using Stride.Graphics;
using Stride.UI;
using Stride.UI.Controls;
using Stride.UI.Events;

namespace CSharpIntermediate.Code
{
    public class UIByEditor : StartupScript
    {
        public SpriteFont Font;

        private TextBlock textBlock;
        private EditText editText;

        public override void Start()
        {
            // Retrieve the page property from the UI component
            var page = Entity.Get<UIComponent>().Page;

            // Retrieve UI elements by Type and name
            textBlock = page.RootElement.FindVisualChildOfType<TextBlock>("MyTextBlock");
            editText = page.RootElement.FindVisualChildOfType<EditText>("MyEditText");

            // When the text changes, update the textblock
            editText.TextChanged += (s, e) =>
            {
                textBlock.Text = "My name is: " + editText.Text;
            };

            // When the button is clicked, we execute a method that clears the textbox
            var button = page.RootElement.FindVisualChildOfType<Button>("MyButton");
            button.Click += ButtonClicked;
        }

        private void ButtonClicked(object sender, RoutedEventArgs e)
        {
            // Changing the text triggers the TextChanged event again
            editText.Text = "";

            // We also want to reset the text in the textblock
            textBlock.Text = "...";
        }
    }
}

UI pages made entirely by code

This script will create everything from scratch: a UI page, a stackpanel, a button, a textfield and the interactive logic behind it.

// Copyright (c) .NET Foundation and Contributors (https://dotnetfoundation.org/ & https://stride3d.net)
// Distributed under the MIT license. See the LICENSE.md file in the project root for more information.
using System;
using Stride.Core.Mathematics;
using Stride.Engine;
using Stride.Graphics;
using Stride.UI;
using Stride.UI.Controls;
using Stride.UI.Panels;

namespace CSharpIntermediate.Code
{
    public class UIByCode : StartupScript
    {
        private SpriteFont font;
        private Button button;
        private TextBlock textBlock;

        public override void Start()
        {
            font = Content.Load<SpriteFont>("UI/OpenSans-font");
            button = CreateButton("Show me the time!");
            textBlock = CreateTextBlock("...");

            //We get or create a UI component and create a page with various elements
            var uiComponent = Entity.GetOrCreate<UIComponent>();

            uiComponent.Page = new UIPage
            {
                RootElement = new StackPanel
                {
                    Height = 200,
                    Width = 400,
                    Margin = new Thickness(0, 0, 10, 10),
                    VerticalAlignment = VerticalAlignment.Bottom,
                    HorizontalAlignment = HorizontalAlignment.Right,
                    BackgroundColor = new Color(0, 1, 0, 0.1f),
                    Children =
                    {
                        button,
                        textBlock
                    }
                }
            };
        }

        private Button CreateButton(string buttonText)
        {
            // We create a new button. The content of the button is a TextBlock
            var button = new Button
            {
                Name = "ButtonByCode",
                HorizontalAlignment = HorizontalAlignment.Center,
                BackgroundColor = Color.DarkKhaki,
                Content = new TextBlock {
                    Text = buttonText, 
                    Font = font,
                    TextSize = 16, 
                    TextColor = Color.Black,
                    VerticalAlignment = VerticalAlignment.Center
                }
            };

            // We send up the click event of the button
            button.Click += (sender, args) =>
            {
                textBlock.Text = $"Date: {DateTime.Now.ToShortTimeString()}";
            };

            return button;
        }

        private TextBlock CreateTextBlock(string defaultText)
        {
            var textBlock = new TextBlock
            {
                Name = "TextBlockByCode",
                Text = defaultText,
                Font = font,
                TextColor = Color.Yellow,
                BackgroundColor = Color.OrangeRed,
                HorizontalAlignment = HorizontalAlignment.Center
            };

            return textBlock;
        }
    }
}