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.