Skip to content

Commit 01b39e9

Browse files
authored
ReadME file updated
1 parent eb2716a commit 01b39e9

File tree

1 file changed

+83
-2
lines changed

1 file changed

+83
-2
lines changed

README.md

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,83 @@
1-
# text-color-for-listview-xamarin
2-
How to apply the ListView item text color in Xamarin.Forms (SfListView)
1+
# How to apply the ListView item text color in Xamarin.Forms (SfListView)
2+
You can apply different text color to the element loaded inside the [ItemTemplate](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfListView.XForms~Syncfusion.ListView.XForms.SfListView~ItemTemplate.html) by using the [TextColor](https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.label.textcolor) property with converter in Xamarin.Forms [SfListView](https://help.syncfusion.com/xamarin/listview/overview).
3+
4+
**XAML**
5+
6+
Define converter for **TextColor** of the [Label](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label).
7+
8+
``` xml
9+
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
10+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
11+
xmlns:local="clr-namespace:ListViewXamarin"
12+
xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
13+
x:Class="ListViewXamarin.MainPage">
14+
<ContentPage.BindingContext>
15+
<local:ContactsViewModel/>
16+
</ContentPage.BindingContext>
17+
18+
<ContentPage.Resources>
19+
<ResourceDictionary>
20+
<local:ColorConverter x:Key="ColorConverter"/>
21+
</ResourceDictionary>
22+
</ContentPage.Resources>
23+
24+
<ContentPage.Content>
25+
<StackLayout>
26+
<syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}">
27+
<syncfusion:SfListView.ItemTemplate >
28+
<DataTemplate>
29+
<Grid x:Name="grid">
30+
<Grid.ColumnDefinitions>
31+
<ColumnDefinition Width="70" />
32+
<ColumnDefinition Width="*" />
33+
<ColumnDefinition Width="100" />
34+
</Grid.ColumnDefinitions>
35+
<Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/>
36+
<Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center">
37+
<Label LineBreakMode="NoWrap" TextColor="{Binding .,Converter={StaticResource ColorConverter},ConverterParameter={x:Reference Name=listView}}" Text="{Binding ContactName}"/>
38+
<Label Grid.Row="1" Grid.Column="0" TextColor="{Binding .,Converter={StaticResource ColorConverter},ConverterParameter={x:Reference Name=listView}}" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/>
39+
</Grid>
40+
<Label Grid.Column="2" TextColor="{Binding .,Converter={StaticResource ColorConverter},ConverterParameter={x:Reference Name=listView}}" LineBreakMode="NoWrap" Text="{Binding ContactType}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>
41+
</Grid>
42+
</DataTemplate>
43+
</syncfusion:SfListView.ItemTemplate>
44+
</syncfusion:SfListView>
45+
</StackLayout>
46+
</ContentPage.Content>
47+
</ContentPage>
48+
```
49+
50+
**C#**
51+
52+
Returns **TextColor** based on the **ContactType**.
53+
54+
``` c#
55+
public class ColorConverter : IValueConverter
56+
{
57+
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
58+
{
59+
if (value == null)
60+
return false;
61+
var itemdata = value as Contacts;
62+
if (itemdata.ContactType == "HOME")
63+
return Color.RoyalBlue;
64+
else if (itemdata.ContactType == "WORK")
65+
return Color.PaleGreen;
66+
else if (itemdata.ContactType == "MOBILE")
67+
return Color.HotPink;
68+
else if (itemdata.ContactType == "OTHER")
69+
return Color.DarkGoldenrod;
70+
else
71+
return Color.BlueViolet;
72+
}
73+
74+
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
75+
{
76+
throw new NotImplementedException();
77+
}
78+
}
79+
```
80+
81+
**Output**
82+
83+
![TextColorListView](https://github.com/SyncfusionExamples/text-color-for-listview-xamarin/blob/master/ScreenShot/TextColorListView.png)

0 commit comments

Comments
 (0)