Hi everybody,
I want to use ListView in my app, and on every row i need picture on the left, and title + text on the right next to the picture, aligned to center.
I have basic template done (below), but I dont know how to set RowHeight "dynamically" to wrap its content, and dont show useless empty space..
List references = new List {
new ReferencesDataModel ("ref_1.png", "Title", "Long, very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut neque tincidunt, congue quam at. "),
new ReferencesDataModel ("ref_1.png", "Title 2", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget tellus consequat, imperdiet sapien a, hendrerit lorem. Cras euismod nibh arcu, a egestas ante accumsan non. Morbi in ligula lorem. Vivamus fermentum odio sapien, eget."),
new ReferencesDataModel ("ref_1.png", "Title 3", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ligula ligula, semper eget dolor sed, molestie faucibus arcu. Morbi porta nunc dolor, ac euismod neque consectetur eu."),
};
// Create the ListView.
ListView itemsList = new ListView {
HasUnevenRows = true,
BackgroundColor = Colors.Background,
ItemsSource = references,
// Define template for displaying each item.
// (Argument of DataTemplate constructor is called for
// each item; it must return a Cell derivative.)
ItemTemplate = new DataTemplate (() => {
// Create views with bindings for displaying each property.
Label title = new Label ();
title.SetBinding (Label.TextProperty, "Title");
title.TextColor = Colors.Tint;
title.Font = Fonts.Large;
Label text = new Label ();
text.LineBreakMode = LineBreakMode.WordWrap;
text.SetBinding (Label.TextProperty, "Text");
text.TextColor = Colors.Foreground;
text.Font = Fonts.Normal;
Image image = new Image ();
image.SetBinding (Image.SourceProperty, "ImageSource");
image.Aspect = Aspect.AspectFill;
image.WidthRequest = 150;
image.VerticalOptions = LayoutOptions.CenterAndExpand;
StackLayout separator = new StackLayout ();
separator.BackgroundColor = Colors.Foreground;
separator.HeightRequest = 1;
separator.HorizontalOptions = LayoutOptions.FillAndExpand;
separator.VerticalOptions = LayoutOptions.EndAndExpand;
// Return an assembled ViewCell.
return new ViewCell {
View = new StackLayout {
BackgroundColor = Colors.Red,
Spacing = 0,
Orientation = StackOrientation.Vertical,
VerticalOptions = LayoutOptions.CenterAndExpand,
Children = {
new StackLayout {
BackgroundColor= Colors.Blue,
Padding = new Thickness (10),
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = {
image,
new StackLayout {
BackgroundColor = Colors.Green,
Padding = new Thickness (10, 0, 0, 0),
Orientation = StackOrientation.Vertical,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.FillAndExpand,
WidthRequest = topBar.Width * 1 / 3,
Children = {
title,
text
}
}
}
},
separator
}
}
};
})
};
Maybe screenshots tells more than words - first one is created by code above
Second one is created by code below, and use fixed RowHeight and fixed StackLayout height, which i dont want to use, but looks almost like what im trying to achieve..
List references = new List {
new ReferencesDataModel ("ref_1.png", "Title", "Long, very long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut neque tincidunt, congue quam at. "),
new ReferencesDataModel ("ref_1.png", "Title 2", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget tellus consequat, imperdiet sapien a, hendrerit lorem. Cras euismod nibh arcu, a egestas ante accumsan non. Morbi in ligula lorem. Vivamus fermentum odio sapien, eget."),
new ReferencesDataModel ("ref_1.png", "Title 3", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ligula ligula, semper eget dolor sed, molestie faucibus arcu. Morbi porta nunc dolor, ac euismod neque consectetur eu."),
};
// Create the ListView.
ListView itemsList = new ListView {
RowHeight = 250,
BackgroundColor = Colors.Background,
ItemsSource = references,
// Define template for displaying each item.
// (Argument of DataTemplate constructor is called for
// each item; it must return a Cell derivative.)
ItemTemplate = new DataTemplate (() => {
// Create views with bindings for displaying each property.
Label title = new Label ();
title.SetBinding (Label.TextProperty, "Title");
title.TextColor = Colors.Tint;
title.Font = Fonts.Large;
Label text = new Label ();
text.LineBreakMode = LineBreakMode.WordWrap;
text.SetBinding (Label.TextProperty, "Text");
text.TextColor = Colors.Foreground;
text.Font = Fonts.Normal;
Image image = new Image ();
image.SetBinding (Image.SourceProperty, "ImageSource");
image.Aspect = Aspect.AspectFill;
image.WidthRequest = 150;
image.VerticalOptions = LayoutOptions.CenterAndExpand;
StackLayout separator = new StackLayout ();
separator.BackgroundColor = Colors.Foreground;
separator.HeightRequest = 1;
separator.HorizontalOptions = LayoutOptions.FillAndExpand;
separator.VerticalOptions = LayoutOptions.EndAndExpand;
// Return an assembled ViewCell.
return new ViewCell {
View = new StackLayout {
BackgroundColor = Colors.Red,
Spacing = 0,
Orientation = StackOrientation.Vertical,
VerticalOptions = LayoutOptions.CenterAndExpand,
Children = {
new StackLayout {
BackgroundColor= Colors.Blue,
Padding = new Thickness (10),
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.Center,
HeightRequest = 250,
Children = {
image,
new StackLayout {
BackgroundColor = Colors.Green,
Padding = new Thickness (10, 0, 0, 0),
Orientation = StackOrientation.Vertical,
HorizontalOptions = LayoutOptions.FillAndExpand,
WidthRequest = topBar.Width * 1 / 3,
Children = {
title,
text
}
}
}
},
separator
}
}
};
})
};
My goal would looks like this :
No fixed heights, and both image and texts vertically centered in row..
Any suggestions ? 