Display one selected value out of multiple values on a Label and retain that delected value while navigation (Pages),

EmDe 21 Reputation points
2020-12-04T05:51:05.51+00:00

47203-screenshot-2020-12-11-004206.png46311-screenshot-2020-12-08-071628.png> Model Class 

    public class Contacts  
    {  
        [PrimaryKey] [AutoIncrement]  
        public int Contact_ID { get; set; }  
        public string Contact_Name { get; set; }  
        public string Contact_Address { get; set; }  
        public string Contact_eMail { get; set; }  
        public string Contact_Mobile { get; set; }  
        public string Contact_DOB { get; set; }  
        public string Contact_Designation { get; set; }  
        public string Contact_JoiningDate { get; set; }  
        public string Contact_MaritalStatus { get; set; }  
        public string Contact_Method { get; set; }  
        public string Value { get; set; }  
        public int Key { get; set; }  
        public string ContactText { get; set;}  
    }

XAML Page 

        <StackLayout>  
            <Label x:Name="LblDisplay" Text="Select a Field" FontSize="Medium" TextColor="Blue" />  
            <Picker Title="Select --" ItemsSource="{Binding ListContacts}" ItemDisplayBinding="{Binding Value}" SelectedItem="{Binding SelectedContact}" />  
            <ListView x:Name="ContactList" HasUnevenRows="True"  IsVisible="True">  
                <ListView.ItemTemplate>  
                    <DataTemplate>  
                        <ViewCell>  
                            <StackLayout Orientation="Vertical" VerticalOptions="Center" >  
                                <Label Text="{Binding Contact_Name}" TextColor="OrangeRed" />  
                                <Label x:Name="LblField" Text="{Binding ContactText}" TextColor="OrangeRed" />  
                            </StackLayout>  
                        </ViewCell>  
                    </DataTemplate>  
                </ListView.ItemTemplate>  
            </ListView>  
        </StackLayout>

Code behind 

    public partial class Page2 : ContentPage  
    {  
        readonly SQLiteAsyncConnection _connection  
    = DependencyService.Get<ISQLite>().GetConnection();  
        public ObservableCollection<Contacts> CList { get; set; }  
  
        public Page2()  
        {  
            BindingContext = new Page2ViewModel();  
  
            InitializeComponent();  
        }  
        protected override void OnAppearing()  
        {  
            base.OnAppearing();  
            _connection.CreateTableAsync<Contacts>();  
            var list = _connection.Table<Contacts>().ToListAsync().Result;  
            CList = new ObservableCollection<Contacts>(list);  
            ContactList.ItemsSource = CList;  
        }  
    }

ViewModel 

    public class Page2ViewModel : BaseViewModel  
    {  
        public List<Contacts> ListContacts  
        {  
            get;  
            set;  
        }  
        public Page2ViewModel()  
        {  
            ListContacts = FieldPicker.GetContacts().OrderBy(c => c.Value).ToList();  
        }  
        private Contacts _selectedContact;  
        public Contacts SelectedContact  
        {  
            get  
            {  
                return _selectedContact;  
            }  
            set  
            {  
                SetProperty(ref _selectedContact, value);  
                    
                ContactText =  _selectedContact.Value; //"Contacts : " +  
            }  
        }  
        private string _contactText;  
        public string ContactText  
        {  
            get  
            {  
                return _contactText;  
            }  
            set  
            {  
                SetProperty(ref _contactText, value);  
            }  
        }  
    }  

    public class BaseViewModel : INotifyPropertyChanged  
    {  
        public event PropertyChangedEventHandler PropertyChanged;  
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)  
        {  
  
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
        }  
  
        protected bool SetProperty<T>(ref T backField, T value,  
            [CallerMemberName] string propertyName = null)  
        {  
            if (EqualityComparer<T>.Default.Equals(backField, value))  
            {  
                return false;  
            }  
            backField = value;  
            OnPropertyChanged(propertyName);  
            return true;  
        }  
    }

Services Class 

    public class FieldPicker  
    {  
        public static List<Contacts> GetContacts()  
        {  
            var contacts = new List<Contacts>()  
            {  
                new Contacts() {Key = 1, Value = "Contact_Address"},  
                new Contacts() {Key = 2, Value = "Contact_eMail"},  
                new Contacts() {Key = 3, Value = "Contact_Mobile"},  
            };  
            return contacts;  
        }  
    }
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
4,919 questions
Accepted answer
  1. JessieZhang-MSFT 7,526 Reputation points
    2020-12-15T03:27:34.477+00:00

    Hello,

    Welcome to our Microsoft Q&A platform!

    Do you want to achieve the following function?If yes, you can try the following steps:
    48140-image.png 48108-image.png

    To make the code structure clearer, we can create a new class for the picker (DataType):

    DataType.cs

    public class DataType  
{  
    public int Contact_ID { get; set; }  
    public int Contact_Type { get; set; }  
    public string Value { get; set; }  
}

    And a enum Type for different types of contacts (Contact_Type ): 

    public enum Type:int  
{  
    Contact_Address,  
    Contact_eMail,  
    Contact_Mobile,  
}

    FieldPicker.cs

     public class FieldPicker  
{  
    public static List<DataType> GetContacts()  
    {  
        var contacts = new List<DataType>()  
         {  
    
          new DataType(){ Contact_ID = 1, Contact_Type = (int)Type.Contact_Address ,Value = "Contact_Address"},  
          new DataType(){ Contact_ID = 1, Contact_Type = (int)Type.Contact_eMail ,Value = "Contact_eMail"},  
          new DataType(){ Contact_ID = 1, Contact_Type = (int)Type.Contact_Mobile ,Value = "Contact_Mobile"}  
        };  
        return contacts;  
    }  
}

    Contacts.cs

    public class Contacts:BaseViewModel  
{  
    public string Contact_Name { get; set; }  
    public string Contact_Address { get; set; }  
   public string Contact_eMail { get; set; }  
    public string Contact_Mobile { get; set; }  
    public string Contact_DOB { get; set; }  
    public string Contact_Designation { get; set; }  
    public string Contact_JoiningDate { get; set; }  
    public string Contact_MaritalStatus { get; set; }  
    public string Contact_Method { get; set; }  
    public string Value { get; set; }  
    public int Key { get; set; }  
  
    private string _contactText;  
    public string ContactText  
    {  
        get  
        {  
            return _contactText;  
        }  
        set  
        {  
            SetProperty(ref _contactText, value);  
        }  
    }  
}

    Page2ViewModel.cs

       public class Page2ViewModel : BaseViewModel  
    {  
        public List<DataType> ListContacts  
        {  
            get;  
            set;  
        }  
        public List<Contacts> contacts { get; set; }  
  
        public Page2ViewModel()  
        {  
            ListContacts = FieldPicker.GetContacts().OrderBy(c => c.Value).ToList();  
            contacts = new List<Contacts>() {  
                new Contacts() {Key = 1, Contact_Name="Test_Name1",Contact_Address ="address1",Contact_eMail="testemail1@gmail.com",Contact_Mobile="Phone1:111111",ContactText="test1"},  
                new Contacts() {Key = 2,  Contact_Name="Test_Name2",Contact_Address ="address2",Contact_eMail="testemail2@gmail.com",Contact_Mobile="Phone1:222222",ContactText="test2"},  
                new Contacts() {Key = 3,  Contact_Name="Test_Name3",Contact_Address ="address3",Contact_eMail="testemail3@gmail.com",Contact_Mobile="Phone1:333333",ContactText="test3"},  
            };  
  
        }  
        private DataType _selectedContact;  
        public DataType SelectedContact  
        {  
            get  
            {  
                return _selectedContact;  
            }  
            set  
            {  
                SetProperty(ref _selectedContact, value);  
  
                refreshSelectedField(SelectedContact);  
            }  
        }  
  
        private void refreshSelectedField(DataType dataType) {  
            if (dataType.Contact_Type == (int)Type.Contact_Address) {  
                foreach (Contacts model in contacts)  
                {  
                    model.ContactText = model.Contact_Address;  
                }  
            } else if(dataType.Contact_Type == (int)Type.Contact_eMail)  
            {  
                foreach (Contacts model in contacts)  
                {  
                    model.ContactText = model.Contact_eMail;  
                }  
            }else if (dataType.Contact_Type == (int)Type.Contact_Mobile)  
            {  
                foreach (Contacts model in contacts)  
                {  
                    model.ContactText = model.Contact_Mobile;  
                }  
            }  
        }  
  
        private string _contactText;  
        public string ContactText  
        {  
            get  
            {  
                return _contactText;  
            }  
            set  
            {  
                SetProperty(ref _contactText, value);  
            }  
        }  
    }

    MainPage.xaml

    <StackLayout>  
    <Label x:Name="LblDisplay" Text="Select a Field" FontSize="Medium" TextColor="Blue" />  
    <Picker Title="Select --" ItemsSource="{Binding ListContacts}" ItemDisplayBinding="{Binding Value}" SelectedItem="{Binding SelectedContact}"   />  
    <ListView x:Name="ContactList" HasUnevenRows="True"  IsVisible="True" ItemsSource="{Binding contacts}">  
        <ListView.ItemTemplate>  
            <DataTemplate>  
                <ViewCell>  
                    <StackLayout Orientation="Vertical" VerticalOptions="Center" >  
                        <Label Text="{Binding Contact_Name}" TextColor="OrangeRed" />  
                        <Label x:Name="LblField" Text="{Binding ContactText}" TextColor="OrangeRed" />  
                    </StackLayout>  
                </ViewCell>  
            </DataTemplate>  
        </ListView.ItemTemplate>  
    </ListView>  
</StackLayout>

    Best Regards,

    Jessie Zhang

    ---
    If the response is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. JessieZhang-MSFT 7,526 Reputation points
    2020-12-08T03:05:39.977+00:00

    Hello,

    Welcome to our Microsoft Q&A platform!

    Do you want to make field Value of the SelectedContact to display in the second Label of all the listview items when you select the picker?

    If yes, you can do as follows:

    1. make your class Contacts extends class BaseViewModel, and do like this: public class Contacts:BaseViewModel
      {
      public int Contact_ID { get; set; }
      public string Contact_Name { get; set; } 
      // public string Contact_Address { get; set; }  
 private string _contact_Address;  
 public string Contact_Address  
 {  
     get  
     {  
         return _contact_Address;  
     }  
     set  
     {  
         SetProperty(ref _contact_Address, value);  
     }  
 }  


 //  public string Contact_eMail { get; set; }  
 private string _contact_eMail;  
 public string Contact_eMail  
 {  
     get  
     {  
         return _contact_eMail;  
     }  
     set  
     {  
         SetProperty(ref _contact_eMail, value);  
     }  
 }  


 //public string Contact_Mobile { get; set; }  
 private string _contact_Mobile;  
 public string Contact_Mobile  
 {  
     get  
     {  
         return _contact_Mobile;  
     }  
     set  
     {  
         SetProperty(ref _contact_Mobile, value);  
     }  
 }  



 public string Contact_DOB { get; set; }  
 public string Contact_Designation { get; set; }  
 public string Contact_JoiningDate { get; set; }  
 public string Contact_MaritalStatus { get; set; }  
 public string Contact_Method { get; set; }  
 public string Value { get; set; }  
 public int Key { get; set; }
      // public string ContactText { get; set; } 
       private string _contactText;  
 public string ContactText  
 {  
     get  
     {  
         return _contactText;  
     }  
     set  
     {  
         SetProperty(ref _contactText, value);  
     }  
 }
      }
    2. Modify class Page2ViewModel as follows: 
      public class Page2ViewModel : BaseViewModel  
 {  
     public List<Contacts> ListContacts  
     {  
         get;  
         set;  
     }  
     public Page2ViewModel()  
     {  
         ListContacts = FieldPicker.GetContacts().OrderBy(c => c.Value).ToList();  
     }  
     private Contacts _selectedContact;  
     public Contacts SelectedContact  
     {  
         get  
         {  
             return _selectedContact;  
         }  
         set  
         {  
             SetProperty(ref _selectedContact, value);  

             // ContactText = _selectedContact.Value; //"Contacts : " +  

             refreshSelectedField(SelectedContact.Value);  
         }  
     }  

     private void refreshSelectedField(string str) {  
         foreach (Contacts model in ListContacts) {  
             model.ContactText = str;  
         }  
     }  




     private string _contactText;  
     public string ContactText  
     {  
         get  
         {  
             return _contactText;  
         }  
         set  
         {  
             SetProperty(ref _contactText, value);  
         }  
     }  
 }
    3. modify class FieldPicker as follows: public class FieldPicker
      {
      public static List<Contacts> GetContacts()
      {
      var contacts = new List<Contacts>()
      {
      new Contacts() {Key = 1, Value = "Contact_Address", Contact_Name="Test_Name1",Contact_Address ="address1",Contact_eMail="testemail1@gmail.com",Contact_Mobile="Phone1:111111",ContactText="test1"},
      new Contacts() {Key = 2, Value = "Contact_eMail", Contact_Name="Test_Name2",Contact_Address ="address2",Contact_eMail="testemail2@gmail.com",Contact_Mobile="Phone1:222222",ContactText="test2"},
      new Contacts() {Key = 3, Value = "Contact_Mobile", Contact_Name="Test_Name3",Contact_Address ="address3",Contact_eMail="testemail3@gmail.com",Contact_Mobile="Phone1:333333",ContactText="test3"},
      };
      return contacts;
      }
      }

    The result is:

    46026-1208-1.gif

    Best Regards,

    Jessie Zhang

    ---
    If the response is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.