I am new to xamarin and I have one listview which contains two label and one string array. How can I bind this items in listview? Items may be 1 to 5 based on data.
Add a comment
|
2 Answers
You can create a ContentView to act as a container for the StackLayout. Then you can bind the string[] property to the ContentView's Content property. And finally, you can use a value converter to convert the string[] value into a horizontal StackLayout.
For example:
<ContentPage
...
xmlns:local="clr-namespace:MyProject.MyValueConverters">
<ContentPage.Resources>
<ResourceDictionary>
<local:ArrayToStackLayoutConverter x:Key="arrayToStackLayout" />
</ResourceDictionary>
</ContentPage.Resources>
...
... place the ContentView wherever you want the labels to appear ...
<ContentView
Margin="0"
Padding="0"
Content="{Binding MyStringArray,
Converter={StaticResource arrayToStackLayout}}" />
...
</ContentPage>
Just place the <ContentView /> inside of your ListView's DataTemplate, wherever you want the array of items to appear.
And then for the value converter:
namespace MyProject.MyValueConverters
{
public class ArrayToStackLayoutConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var strArray = (string[])value;
var layout = new StackLayout()
{
Orientation = StackOrientation.Horizontal
};
foreach (var item in strArray)
{
var label = new Label()
{
Text = item
};
var frame = new Frame()
{
Content = label,
HasShadow = false,
Padding = 4,
OutlineColor = Color.Black,
CornerRadius = 2
};
layout.Children.Add(frame);
}
return layout;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
7 Comments
Srusti Thakkar
Thank you very much. It works fine. Can you please tell me how can I display border around label as in image?
sme
@SrustiThakkar I updated the answer, to show the label being wrapped in a frame with a border (because labels don't have a
Border property). It might have a negative impact on performance though, but I'm not sure.Srusti Thakkar
Somehow border is not displaying.
sme
If its on Android, it looks like it might be a bug bugzilla.xamarin.com/show_bug.cgi?id=27460 It looks like there are a few workarounds there
Srusti Thakkar
Ok. then how can we display border for android?
|
class MyItem {
public string Label1 {get; set;}
public string Label2 {get; set;}
public string[] Subitems {get; set;}
}
//viewmodel is something like List<MyItem>
List<MyItem> viewModel = GetDataFromService(...);
//xaml
<ListView BindingContext="viewModel"> //i can't remember exactly, maybe use <ListView.ItemSource>
<ListView.ItemTemplate>
<DataTemplate>
<Label Text="{Binding Label1}" />
<Label Text="{Binding Label2}" />
<ListView BindingContext="Subitems">
<ListView.ItemTemplate>
<DataTemplate>
<BoxView ...> //set height, weight, border
<Label
</BoxView>
</DataTemplate>
</ListView>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
all in all, use an inner ListView inside the outer ListView.
