Implement a View Item (WinForms)

• Feb 02, 2024
• 5 minutes to read

This topic demonstrates how to implement a custom View Item and display it on all Detail Views. This View Item shows an image that corresponds to a specific business object type. You can specify this image in the Application Model. To display this View Item, we use a WinForms-specific control for demonstration purposes.

A custom View Item’s implementation process consists of the following parts:

• Implement a View Item (WinForms)
• Create a View Item
• Add the Custom View Item on a Detail View

Create a View Item

1. Create a ViewItem class descendant and name it “ClassIconDetailItem” in the WinForms module project (MySolution.Module.Win). If your solution does not contain this project, add this View Item to the WinForms application project (MySolution.Win).
2. Override the CreateControlCore method to create a control that represents the View Item in a UI.
3. Create a custom interface that implements the IModelViewItem and name it “IModelClassIcon”.
4. In this interface, define properties that coincide with View Item’s properties you want to use in the Application Model. Do not define any properties in this interface if you do not want to specify a View Item’s properties in the Application Model.
5. Pass this interface to the View Item’s constructor as the the model parameter. This allows to initialize and configure the View Item using the data from the corresponding Application Model’s node.
6. Decorate the ClassIconDetailItem class with the ViewItemAttribute and pass the IModelClassIcon interface as an attribute’s parameter. This displays a new child node in the Application Model’s ViewItems node after the solution rebuilds.

The following code demonstrates the custom View Item:

C#

using System;
using System.Drawing;
using System.Windows.Forms;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.Utils;
//...
public interface IModelClassIcon : IModelViewItem { }

[ViewItemAttribute(typeof(IModelClassIcon))]
public class ClassIconDetailItem : ViewItem {
    private IModelClassIcon Info;
    public ClassIconDetailItem(IModelClassIcon info, Type classType)
        : base(classType, info.Id) {
        Info = info;
    }
    protected override object CreateControlCore() {
        PictureBox imageControl = new PictureBox();
        string imageName = ((IModelDetailView)Info.Parent.Parent).ImageName;
        ImageInfo imageInfo = ImageLoader.Instance.GetLargeImageInfo(imageName);
        if(imageInfo.IsEmpty) {
            imageControl.Visible = false;
        }
        else {
            Image image = imageInfo.Image;
            imageControl.Image = image;
            imageControl.Width = image.Width;
            imageControl.Height = image.Height;
        }
        return imageControl;
    }
}

VB.NET

Imports Microsoft.VisualBasic
Imports System
Imports System.Drawing
Imports System.Windows.Forms
Imports DevExpress.ExpressApp.Editors
Imports DevExpress.ExpressApp.Model
Imports DevExpress.ExpressApp.Utils
'...
Public Interface IModelClassIcon
Inherits IModelViewItem
End Interface

<ViewItemAttribute(GetType(IModelClassIcon))> _
Public Class ClassIconDetailItem
    Inherits ViewItem
    Private Info As IModelClassIcon
    Public Sub New(ByVal info As IModelClassIcon, ByVal classType As Type)
        MyBase.New(classType, info.Id)
        Me.Info = info
    End Sub
    Protected Overrides Function CreateControlCore() As Object
        Dim imageControl As New PictureBox()
        Dim imageName As String = (CType(Info.Parent.Parent, IModelDetailView)).ImageName
        Dim imageInfo As ImageInfo = ImageLoader.Instance.GetLargeImageInfo(imageName)
        If imageInfo.IsEmpty Then
            imageControl.Visible = False
        Else
            Dim image As Image = imageInfo.Image
            imageControl.Image = image
            imageControl.Width = image.Width
            imageControl.Height = image.Height
        End If
        Return imageControl
    End Function
End Class

Add the Custom View Item on a Detail View

1. Implement the ModelNodesGeneratorUpdater<T> descendants (Generator Updaters) for the ModelDetailViewLayoutNodesGenerator and ModelDetailViewItemsNodesGenerator Node Generators in the WinForms module project (MySolution.Module.Win). If your solution does not contain this project, add these updaters to the WinForms application project (MySolution.Win). Name them “MyDetailViewLayoutUpdater” and “MyDetailViewItemUpdater”.
2. Register these Updaters in the WinForms module class descendant’s overridden ModuleBase.AddGeneratorUpdaters method.

The following code shows how to do this:

C#

using System.ComponentModel;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.Model.NodeGenerators;
using DevExpress.ExpressApp.Model.Core;
using DevExpress.ExpressApp.Layout;
//...
public class MyDetailViewLayoutUpdater : ModelNodesGeneratorUpdater<ModelDetailViewLayoutNodesGenerator> {
    public override void UpdateNode(ModelNode node) {
        IModelViewLayout layoutNode = (IModelViewLayout)node;
        IModelLayoutGroup mainGroup = 
            layoutNode.GetNode(ModelDetailViewLayoutNodesGenerator.MainLayoutGroupName) as IModelLayoutGroup;
        mainGroup.Direction = FlowDirection.Horizontal;
        IModelLayoutViewItem myItem = mainGroup.AddNode<IModelLayoutViewItem>("Icon");
        myItem.Index = int.MinValue;
        myItem.MaxSize = new System.Drawing.Size(64, 64);
        myItem.SizeConstraintsType = XafSizeConstraintsType.Custom;
        myItem.ViewItem = ((IModelCompositeView)layoutNode.Parent).Items.GetNode("Icon") as IModelViewItem;
    }
}

public class MyDetailViewItemUpdater : ModelNodesGeneratorUpdater<ModelDetailViewItemsNodesGenerator> {
    public override void UpdateNode(ModelNode node) {
        IModelViewItems itemsNode = (IModelViewItems)node;
        itemsNode.AddNode<IModelClassIcon>("Icon");
    }
}

[ToolboxItemFilter("Xaf.Platform.Win")]
public sealed partial class MySolutionWindowsFormsModule : ModuleBase {
    // ...
    public override void AddGeneratorUpdaters(ModelNodesGeneratorUpdaters updaters) {
        base.AddGeneratorUpdaters(updaters);
        updaters.Add(new MyDetailViewLayoutUpdater());
        updaters.Add(new MyDetailViewItemUpdater());
    }
}

VB.NET

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.ComponentModel
Imports DevExpress.ExpressApp
Imports DevExpress.ExpressApp.Model
Imports DevExpress.ExpressApp.Model.NodeGenerators
Imports DevExpress.ExpressApp.Model.Core
Imports DevExpress.ExpressApp.Layout
'...
Public Class MyDetailViewLayoutUpdater
    Inherits ModelNodesGeneratorUpdater(Of ModelDetailViewLayoutNodesGenerator)
    Public Overrides Sub UpdateNode(ByVal node ModelNode)
        Dim layoutNode As IModelViewLayout = CType(node, IModelViewLayout)
        Dim mainGroup As IModelLayoutGroup = TryCast(layoutNode.GetNode(ModelDetailViewLayoutNodesGenerator.MainLayoutGroupName), IModelLayoutGroup)
        mainGroup.Direction = FlowDirection.Horizontal
        Dim myItem As IModelLayoutViewItem = mainGroup.AddNode(Of IModelLayoutViewItem)("Icon")
        myItem.Index = Integer.MinValue
        myItem.MaxSize = New System.Drawing.Size(64, 64)
        myItem.SizeConstraintsType = XafSizeConstraintsType.Custom
        myItem.ViewItem = TryCast(CType(layoutNode.Parent, IModelCompositeView).Items.GetNode("Icon"), IModelViewItem)
    End Sub
End Class

Public Class MyDetailViewItemUpdater
    Inherits ModelNodesGeneratorUpdater(Of ModelDetailViewItemsNodesGenerator)
    Public Overrides Sub UpdateNode(ByVal node As ModelNode)
        Dim itemsNode As IModelViewItems = CType(node, IModelViewItems)
        itemsNode.AddNode(Of IModelClassIcon)("Icon")
    End Sub
End Class

<ToolboxItemFilter("Xaf.Platform.Win")> _
Public NotInheritable Partial Class MySolutionWindowsFormsModule
    Inherits ModuleBase
    ' ...
    Public Overrides Sub AddGeneratorUpdaters(ByVal updaters As ModelNodesGeneratorUpdaters)
        MyBase.AddGeneratorUpdaters(updaters)
        updaters.Add(New MyDetailViewLayoutUpdater())
        updaters.Add(New MyDetailViewItemUpdater())
    End Sub
End Class

Run the application and ensure that all the Detail Views contain class icons.