Hello Mike,
You need to create a SimpleListViewVIsualItem, which will look as you need. In your last screenshot you are using DetailsView, while you need to use the ListView ViewMode. The article I have provided you can see an example how to use different elements to extend the default item. In your case, you will need two stack panels with the desired elements. Here is a sample implementation to put you in the right direction:
public class MyCustomVisualItem : SimpleListViewVisualItem
{
private LightVisualElement headerElement;
private LightVisualElement mainElement;
private LightVisualElement footerElement;
private LightVisualElement imageElement;
private StackLayoutPanel horizotalStackLayoutPanel;
private StackLayoutPanel verticalStackLayoutPanel;
protected override void CreateChildElements()
{
base.CreateChildElements();
this.DrawText = false;
this.verticalStackLayoutPanel = new StackLayoutPanel();
this.verticalStackLayoutPanel.Orientation = Orientation.Horizontal;
this.verticalStackLayoutPanel.ShouldHandleMouseInput = false;
this.verticalStackLayoutPanel.NotifyParentOnMouseInput = true;
this.Children.Add(this.verticalStackLayoutPanel);
this.imageElement = new LightVisualElement();
this.verticalStackLayoutPanel.Children.Add(imageElement);
this.horizotalStackLayoutPanel = new StackLayoutPanel();
this.horizotalStackLayoutPanel.Orientation = Orientation.Vertical;
this.horizotalStackLayoutPanel.ShouldHandleMouseInput = false;
this.horizotalStackLayoutPanel.NotifyParentOnMouseInput = true;
this.verticalStackLayoutPanel.Children.Add(this.horizotalStackLayoutPanel);
this.headerElement = new LightVisualElement();
this.headerElement.Text = "header";
this.headerElement.ShouldHandleMouseInput = false;
this.headerElement.NotifyParentOnMouseInput = true;
this.horizotalStackLayoutPanel.Children.Add(this.headerElement);
this.mainElement = new LightVisualElement();
this.mainElement.Text = "main element";
this.horizotalStackLayoutPanel.Children.Add(this.mainElement);
this.footerElement = new LightVisualElement();
this.footerElement.Text = "footer";
this.horizotalStackLayoutPanel.Children.Add(this.footerElement);
}
protected override void SynchronizeProperties()
{
base.SynchronizeProperties();
this.imageElement.Image = this.Data.Image;
this.headerElement.Text = Convert.ToString(this.Data["Name"]);
this.mainElement.Text = "Call " + Convert.ToString(this.Data["Phone"]);
this.footerElement.Text = "Fax " + Convert.ToString(this.Data["Fax"]);
}
protected override Type ThemeEffectiveType
{
get
{
return typeof(SimpleListViewVisualItem);
}
}
}
I hope that you find this information useful.
Regards,
Stefan
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.