How to: Implement a View Item
- 4 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. In this topic, we use a Windows control to display this View Item, so this example applies to WinForms applications only.
Tip
A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/e242/how-to-implement-a-detail-view-item.
A custom View Item’s implementation process consists of two parts:
Create a View Item
- In the WinForms module project, create a ViewItem class descendant and name it “ClassIconDetailItem”.
- Override the CreateControlCore method to create a control that represents the View Item in a UI.
- Create a custom interface that implements the IModelViewItem and name it “IModelClassIcon”.
- 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.
- 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.
- 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:
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;
}
}
Add the Custom View Item on a Detail View
- In the WinForms module project, implement the ModelNodesGeneratorUpdater<T> descendants (Generator Updaters) for the ModelDetailViewLayoutNodesGenerator and ModelDetailViewItemsNodesGenerator Node Generators. Name them “MyDetailViewLayoutUpdater” and “MyDetailViewItemUpdater”.
- Register these Updaters in the WinForms module class descendant’s overridden ModuleBase.AddGeneratorUpdaters method.
The following code shows how to do this:
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());
}
}
Run the application and ensure that all the Detail Views contain class icons.
See Also