XAF Usability: Show Expand Button in Layout groups

Our second post on Usability in XAF will show you how to improve user experience while using complex layouts where Property Editors have been organized in Layout Groups.

When entities have a large number of properties or one or more of its properties require large Property Editors, layout design for such entities soon become uncomfortable to read, navigate and edit by users. XAF's provides two solutions for this situation: tabs and layout item groups.

While tabs allow developers to arrange a larger number of controls on a form, they have two main drawbacks. First, if more than one tab is used vertical space consumed is that of the taller tab. Second, they are somewhat old-fashion looking. You can overcome all this using layout item groups. But once at runtime, you should realize that XAF’s item groups have fixed vertical size and that they don’t provide any user interface to collapse nor expand them.


That’s because item groups’ ExpandButtonVisible property is set to true by default, so it’s hidden for every group you create. You can switch it to true by means of a ViewController targeted to ViewType.DetailView as shown in the following code:

public partial class CustomDetailViewGroupBehaviour : ViewController
{
public CustomDetailViewGroupBehaviour()
{
InitializeComponent();
RegisterActions(components);
// Target ViewController to any DetailView in your application
TargetViewType = ViewType.DetailView;
}

protected override void OnActivated()
{
base.OnActivated();
// Suscribe LayoutManager’s ItemCreated event handler to be able to check for every item created in the DetailView
((WinLayoutManager)((View as DetailView).LayoutManager)).ItemCreated += new EventHandler(CustomDetailViewGroupBehaviour_ItemCreated);
}

protected override void OnDeactivating()
{
// Unsuscribe LayoutManager’s ItemCreated event handler
((WinLayoutManager)((View as DetailView).LayoutManager)).ItemCreated -= new EventHandler(CustomDetailViewGroupBehaviour_ItemCreated); base.OnDeactivating();
}

void CustomDetailViewGroupBehaviour_ItemCreated(object sender, ItemCreatedEventArgs e)
{
// For every new item created in the DetailView, check if it’s a layout item group
if (e.Item is LayoutControlGroup)
{
LayoutControlGroup lLayoutControlGroup = (LayoutControlGroup)e.Item;

//If a group is being created, check if ExpandButtonVisible needs to be visible
//(i.e. only for non-nested groups with text located on top)
if (((lLayoutControlGroup.TextLocation == DevExpress.Utils.Locations.Default
lLayoutControlGroup.TextLocation == DevExpress.Utils.Locations.Top))
&& !(lLayoutControlGroup.Parent != null))
lLayoutControlGroup.ExpandButtonVisible = true;
}
}
}

On the other hand, you can check for specific groups too, by checking its Text property replacing previous If block with the following code:

if (lLayoutControlGroup.Text.StartsWith("ContactDetails"))

And that’s what you get when you run your application with the new ViewController in place:

Expanded groups:

Contact groups collapsed: