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
Image may be NSFW.
Clik here to view.
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..
Image may be NSFW.
Clik here to view.
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 :
Image may be NSFW.
Clik here to view.
No fixed heights, and both image and texts vertically centered in row..
Any suggestions ? Image may be NSFW.
Clik here to view.