Add image and entry by adding toolbaritem

[HannahC]

Hi all,

I want to add an icon(magnifier)and the search entry by adding toolbaritem, but toolbaritem only support Text or Image.

I want to know how to achieve this function?

I also want to do the info below as the picture shows.

It seems like it needs to build a data template, right?

How to implement it with Syncfusion's package?

Can anyone provide a demo code for me?

Thanks in advance.

[Lakshmi Natarajan]

Hi HannahC, 

 

Thank you for using Syncfusion products. 

 

#Regarding I want to add an icon(magnifier)and the search entry by adding toolbaritem 

You can achieve your requirement by customizing the NavigationPage.TitleView in the application. Please refer to the following threads regarding the same, 

Reference: 

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar 

https://forums.xamarin.com/discussion/179069/custom-item-in-toolbar 

 

#Regarding How to implement templated view with Syncfusion's package 

We would like to inform you that you can achieve your requirement using SfListView control. You can achieve your UI by defining the SfListView.ItemTemplate. Please refer to our user guidance document from the following link, 

UG links: 

https://help.syncfusion.com/xamarin/listview/getting-started 

https://help.syncfusion.com/xamarin/listview/getting-started#binding-data-to-the-sflistview 

 

Also, the SfListView allows you to sort the items by using DataSource.SortDescriptors property. Please refer to our documentation regarding the same, 

UG link: https://help.syncfusion.com/xamarin/listview/sorting 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

[HannahC]

Hi Lakshmi Natarajan,

Thank you for telling me what package I should use.

I have two problems

(1) if I want to tap the pictures to trigger different messages.

(For example, tap the first pic, then APP will popup "This is A", tap the second one, APP will popup "This is B", and so on...)

(2) As the code is found to be abnormal when checking the data in the background regularly, APP needs automatically change the text color without any click behavior. 

(For example, to change the text color of  "[email protected]")

How to use sfListView to achieve these goals?

[Lakshmi Natarajan]

Hi Hannah, 

 

Thank you for the update. 

 

We have checked the reported queries. 

 

#Regarding if I want to tap the pictures to trigger different messages 

 

You can achieve your requirement by using GestureRecognizers for the Image and add bind the ViewModel command to show the text using TapGestureRecognizer. Please find the code snippets to achieve your requirement, 

 

XAML: Bind the ViewModel command to the gesture command and bind the ItemData to the CommandParameter. 

<syncfusion:SfListView x:Name="listView" AutoFitMode="Height" ItemSpacing="1" ItemsSource="{Binding ContactsInfo}"> 

    <syncfusion:SfListView.ItemTemplate > 

        <DataTemplate> 

            <Grid x:Name="grid"> 

... 

                    <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="70" WidthRequest="70"> 

                        <Image.GestureRecognizers> 

                            <TapGestureRecognizer Command="{Binding Path=BindingContext.ImageTappedCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}"/> 

                        </Image.GestureRecognizers> 

                    </Image> 

                    <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> 

... 

                    </Grid> 

                </Grid> 

                <BoxView BackgroundColor="LightGray" HeightRequest="1" Grid.Row="1"/> 

            </Grid> 

        </DataTemplate> 

    </syncfusion:SfListView.ItemTemplate> 

</syncfusion:SfListView> 

 

ViewModel: In the command execution method, get the item info and display the details. 

public class ContactsViewModel : INotifyPropertyChanged 

{ 

     

    public Command<object> ImageTappedCommand { get; set; } 

 

    public ContactsViewModel() 

    { 

        ImageTappedCommand = new Command<object>(OnImageTapped); 

        ContactsInfo = new ObservableCollection<Contacts>(); 

        GenerateInfo(); 

    } 

 

    private void OnImageTapped(object obj) 

    { 

        //You can get the tapped item info from the parameter. 

        var item = obj as Contacts; 

        App.Current.MainPage.DisplayAlert("This is " + item.ContactType, "", "Ok"); 

    } 

} 

 

#Regarding As the code is found to be abnormal when checking the data in the background regularly, APP needs automatically change the text color without any click behavior 

 

You can customize the TextColor of the label by using Converters. Please refer to the following code snippets to achieve your requirement, 

 

XAML: Define the converter and set it for the TextColor property of the Label to check the data. 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 

             xmlns:local="clr-namespace:ListViewXamarin" 

             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" 

             x:Class="ListViewXamarin.MainPage"> 

... 

 

    <ContentPage.Resources> 

        <ResourceDictionary> 

            <local:TextColorConverter x:Key="textColorConverter"/> 

        </ResourceDictionary> 

    </ContentPage.Resources> 

     

             <ContentPage.Content> 

        <StackLayout> 

            <syncfusion:SfListView x:Name="listView" AutoFitMode="Height" ItemSpacing="1" ItemsSource="{Binding ContactsInfo}"> 

                <syncfusion:SfListView.ItemTemplate > 

                    <DataTemplate> 

                        <Grid x:Name="grid"> 

                            ... 

                                <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> 

                                    <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> 

                                    <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> 

                                    <Label Grid.Row="3" Text="{Binding EmailID}" TextColor="{Binding EmailID, Converter={StaticResource textColorConverter}}" HorizontalOptions="StartAndExpand" VerticalOptions="Center"/> 

                                </Grid> 

                            </Grid> 

                            <BoxView BackgroundColor="LightGray" HeightRequest="1" Grid.Row="1"/> 

                        </Grid> 

                    </DataTemplate> 

                </syncfusion:SfListView.ItemTemplate> 

            </syncfusion:SfListView> 

        </StackLayout> 

    </ContentPage.Content> 

</ContentPage> 

 

Converter: Return the color based on validation. 

public class TextColorConverter : IValueConverter 

{ 

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

    { 

        var email = (string)value; 

 

        return IsValidEmail(email) ? Color.Green : Color.Red; 

    } 

 

    public static bool IsValidEmail(string email) 

    { 

        if (string.IsNullOrWhiteSpace(email)) 

            return false; 

 

        return Regex.IsMatch(email, @"^[^@\s]+@[^@\s]+\.[^@\s]+$", RegexOptions.IgnoreCase, TimeSpan.FromMilliseconds(250)); 

    } 

} 

 

We have prepared a sample and attached in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewXamarin-667861905 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DemoVideo1080883245 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan