|
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 | + |
0 commit comments