Skip to content

UIDescriptor

Jump to bottom
ElbyFross edited this page Dec 14, 2019 · 1 revision

Description

A class derived from the UIDescriptor becomes compatible with a Autolayout handlers of the WPFH. In such class you can define your

Remarks

  • Some ILayoutOption attributes can be applied to the derived class. In that case they will applied to the every declared member (if the member is compatible).
  • A class derived from the UIDescriptor can containes nested UIDescriptor members. Such members will be shifted by horizontal and applied as the sub layouts in case if their types haven't binded controls.
  • Members of the descriptor have unstable order in case if you use not only fields/proprties members but the both at the same time. In that case you should define the order of every member by the Order attribute. Members without attribute will be handled after ordered group.
  • For be the part of autolayout a IGUIField element must be defined into the handler like a binded to the some types. The default Type to IGUIField bindings you can find here.

How to use

Capter 1 : A simple descriptor

In that example we will consider a simple UI panel descriptor.

Let's declare used namespaces. Here provided the recommended using heder for the every class derived from the UIDescripotor

using System.Collections.Generic;
using System.Windows.Controls;
using WpfHandler.UI.AutoLayout.Configuration;
using WpfHandler.UI.AutoLayout.Controls;
using WpfHandler.UI.AutoLayout.Options;
using WpfHandler.UI.AutoLayout;

Now declare the class, that will inherit the Descriptor.

public class ExampleDescriptor: UIDescriptor
{
   // Here will be declared members.
}

Let's add the common collor for foreground property of the elements. The IGUILayoutOption arguments applied to the class will affect all the elements.

[Foreground("WhiteSmoke")]
public class ExampleDescriptor: UIDescriptor
...

Declare the few simple elements into the class bounds.

// Prperty that will attached to the UI like the string field.
[Order(100)]
public string stringField = "sample text";

// Prperty that will attached to the UI like the int field.
[Order(200)]
public int IntProperty { get; set; } = 0;

The order attribute defines the position of the element into the UI elements colleciton.

In case if all the members of the descriptor is fields only (or properties only) the Order attribute is unnecessary, because elements can be sorted by declaring order. In other case order will be unstable and should be redefined.

The good practice in defining of the orders is use the numbers multiplied to 100 or 1000. That allow you to insert other members in future without affecting old ones.

Chapter 2 : A complex descriptor

In that example we will modify previous one and add a new markups and elements.

List start form adding the switcher that will do something.

// The enum that will be used as the source for the toggle element.
public enum SwitcherState
{
    On,
    Off
}

// Adding the space from the previous element.
[Space(30)]

// Set the content for the `state` element.
[Content("Highlight")]

// Moving the next UI element to the center.
[HorizontalAlign(Alignment = HorizontalAlignment.Center)]

// Defining the SwitcherState member.
public SwitcherState state = SwitcherState.Off;

Now we'll add the handler that will react on the state changes. For that in the construtor we shold subscribe on the Loaded event, that will occurs when UI based on that descriptor will be ready to use.

In the loaded callback we looking for the UI element binded to the state member. After receiving the instance we can subscribe on the IGUIField.ValueChanged event to handle UI update.

// Descriptor's costructor.
public ExamplePanelDescriptor()
{
    // Subscribing on the event that occurs when UI based on that descriptor will be loaded.
    Loaded += ExamplePanelDescriptor_Loaded;
}

// Callback that occurs whe UI is ready.
private void ExamplePanelDescriptor_Loaded(UIDescriptor obj)
{
    // Receiving the IGUIField generated from the state member.
    var stateField = GetFieldByMember("state");

    // Subscribing on the state value changes.
    stateField.ValueChanged += delegate (IGUIField objw)
    {
        // Do someting.
    };
}

Now you know how to make your UI more interactive and how to get the generated GUI elements from the code behind.

Chapter 3: Headers

It's time to make you more structured and ergonomic. For that we will add the Header attributes to the members.

// Defining the default title for header.
// Adding `pi_loc` as the localization key for that header.
[Header("Default Personal info", null, "pi_loc")]
public string firstName = "";
public string lastName = "";

// Set the end of the group started by previous header.
// In case of skip the End the next header and its relative
// elements will be added as subgroup of the previous header.
[EndGroup]
[Header("Advanced", null, "adv_lov")]
public string city;
public string country;

Links

Projects

Relative pages

Getting started

Auto layout

Controls

Clone this wiki locally