Access List Control Properties

This topic describes how to customize the default List View List control (that is an XAF wrapper for the DevExtreme List widget) in Mobile applications by implementing a new View Controller to change the background color of List Views the built-in MobileListEditor displays.

Follow the steps below to access the List control's settings:

  • Add a View Controller to the MySolution.Module.Mobile project's Controllers folder as described in the Comprehensive Tutorial's Add a Simple Action lesson. Name this Controller "MobileListBackgroundColorController".
  • Replace the default Controller's code with the following code:

    using DevExpress.ExpressApp;
    using DevExpress.ExpressApp.Mobile.Editors;
    using System.Collections.Generic;
    using System.Drawing;
    // ...
    public partial class MobileListBackgroundColorController : ViewController {
        public MobileListBackgroundColorController() {
            TargetViewType = ViewType.ListView;
            TargetObjectType = typeof(Department);
            InitializeComponent();
            RegisterActions(components);
        }
        protected override void OnViewControlsCreated() {
            base.OnViewControlsCreated();
            MobileListEditor listEditor = ((ListView)View).Editor as MobileListEditor;
            if (listEditor != null) {
                Dictionary<string, string> styles = (Dictionary<string, string>)listEditor.Control["style"];
                styles["background-color"] = ColorTranslator.ToHtml(Color.FromArgb(244, 244, 244));
            }
        }
    }
    

    The code above gets the ListEditor using the ListView.Editor property to access the List View's List control. List Editors are used to bind data to a List View's control. XAF provides several types of built-in Mobile List Editors; the MobileListEditor is used to show a simple list of objects by default. The List Editor's Control property returns the List control which displays data using the List widget.

  • Run the Mobile application and open the Department List View. Ensure that it has a custom background color.

    MobileListBackgroundColorController

Next Lesson: Customize the Mobile UI

See Also