Binding to label

nabeel

Asked On October 24, 2019 12:01 PM UTC

Hi,

When using cascading picker, how can i bind my values that i have selected to a label? i will share my code and i want to bind values to that label every time i make a change.

Reply | Reply with quote

nabeel

Replied On October 24, 2019 12:09 PM UTC

using System;

using System.Collections;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace CascadingPicker

{

public partial class MainPage : ContentPage

{

string CurrentItem;

public MainPage()

{

InitializeComponent();

}

private void picker_SelectionChanged(object sender, Syncfusion.SfPicker.XForms.SelectionChangedEventArgs e)

{

if (picker.ItemsSource != null && e.NewValue is IList && (picker.ItemsSource as IList).Count > 1 && CurrentItem != (e.NewValue as IList)[0].ToString())

{

//Updated the second column collection based on first column selected value.

(picker.ItemsSource as ObservableCollection<object>).RemoveAt(1);

(picker.ItemsSource as ObservableCollection<object>).Add(GetCountry((e.NewValue as IList)[0].ToString()));

}

public ObservableCollection<object> GetCountry(string CountryName)

{

CurrentItem = CountryName;

ObservableCollection<object> selectedCountries = new ObservableCollection<object>();

if (CountryName == "UK")

{

selectedCountries.Add("London");

selectedCountries.Add("Manchester");

selectedCountries.Add("Cambridge");

selectedCountries.Add("Edinburgh");

selectedCountries.Add("Glasgow");

selectedCountries.Add("Birmingham");

}

else if (CountryName == "USA")

{

selectedCountries.Add("New York");

selectedCountries.Add("Seattle");

selectedCountries.Add("Wasington");

selectedCountries.Add("Chicago");

selectedCountries.Add("Boston");

selectedCountries.Add("Los Angles");

}

else if (CountryName == "UAE")

{

selectedCountries.Add("Dubai");

selectedCountries.Add("Abu Dhabi");

selectedCountries.Add("Fujairah");

selectedCountries.Add("Sharjah");

selectedCountries.Add("Ajman");

selectedCountries.Add("AL Ain");

}

else if (CountryName == "India")

{

selectedCountries.Add("Mumbai");

selectedCountries.Add("Bengaluru");

selectedCountries.Add("Chennai");

selectedCountries.Add("Pune");

selectedCountries.Add("Jaipur");

selectedCountries.Add("Delhi");

}

else

{

selectedCountries.Add("Berlin");

selectedCountries.Add("Munich");

selectedCountries.Add("Frankfurt");

selectedCountries.Add("Hamburg");

selectedCountries.Add("Cologne");

selectedCountries.Add("Bonn");

}

return selectedCountries;

}

private void Button_Clicked(object sender, EventArgs e)

{

picker.IsOpen = true;

}

public class PickerCascading : INotifyPropertyChanged

{

#region Public Properties

/// <summary>

/// Area is the acutal DataSource for SfPicker control which will holds the collection of Country and State

/// </summary>

/// <value>The area.</value>

public ObservableCollection<object> Area { get; set; }

//Country is the collection of country names

private ObservableCollection<object> Country { get; set; }

//State is the collection of state names

private ObservableCollection<object> State { get; set; }

/// <summary>

/// Headers api is holds the column name for every column in cascading picker

/// </summary>

/// <value>The Headers.</value>

public ObservableCollection<string> Header { get; set; }

private object _selectedarea;

public event PropertyChangedEventHandler PropertyChanged;

#endregion

//Identify the selected area using property changed method

public object SelectedArea

{

get { return _selectedarea; }

set { _selectedarea = value; RaisePropertyChanged("SelectedArea"); }

}

public PickerCascading()

{

Area = new ObservableCollection<object>();

Header = new ObservableCollection<string>();

Country = new ObservableCollection<object>();

State = new ObservableCollection<object>();

//populate Countries

Country.Add("UK");

Country.Add("USA");

Country.Add("India");

Country.Add("UAE");

Country.Add("Germany");

//populate states

State.Add("London");

State.Add("Manchester");

State.Add("Cambridge");

State.Add("Edinburgh");

State.Add("Glasgow");

State.Add("Birmingham");

Area.Add(Country);

Area.Add(State);

Header.Add("Country");

Header.Add("State");

SelectedArea = new ObservableCollection<object>() { "UK", "London" };

}

//Hooked when changes occured

public void RaisePropertyChanged(string name)

{

if (PropertyChanged != null)

PropertyChanged(this, new PropertyChangedEventArgs(name));

}

Reply | Reply with quote

nabeel

Replied On October 24, 2019 12:09 PM UTC

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage

x:Class="CascadingPicker.MainPage"

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

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

xmlns:local="clr-namespace:CascadingPicker"

xmlns:syncfusion="clr-namespace:Syncfusion.SfPicker.XForms;assembly=Syncfusion.SfPicker.XForms">

<ContentPage.BindingContext>

<local:PickerCascading />

</ContentPage.BindingContext>

<ContentPage.Content>

<Button

Clicked="Button_Clicked"

HeightRequest="40"

Text="Open Picker"

WidthRequest="200" />

</StackLayout>

<syncfusion:SfPicker

x:Name="picker"

ColumnHeaderText="{Binding Header}"

HeaderText="Select your Area"

HeightRequest="350"

ItemsSource="{Binding Area}"

PickerHeight="250"

PickerMode="Dialog"

PickerWidth="280"

SelectedItem="{Binding SelectedArea}"

SelectionChanged="picker_SelectionChanged"

ShowColumnHeader="True"

ShowFooter="True"

WidthRequest="300" />

</Grid>

</ContentPage.Content>

</ContentPage>

Reply | Reply with quote

nabeel

Replied On October 24, 2019 12:10 PM UTC

I want to bind the values to <Label Text=""/>

Reply | Reply with quote

Hemalatha Marikumar [Syncfusion]

Replied On October 25, 2019 04:57 AM UTC

Hi Nabeel,

Greetings from Syncfusion.

We have analyzed your query. You can bind the picker selected item value to label text as like below code snippet.

XAML:

<ContentPage.BindingContext>

<local:PickerCascading />

</ContentPage.BindingContext>

…

C#:

private void picker_SelectionChanged(object sender, Syncfusion.SfPicker.XForms.SelectionChangedEventArgs e)

{

var selectedItem = (picker.SelectedItem as ObservableCollection<object>);

var pickerViewModel = picker.BindingContext as PickerCascading;

string labelText = null;

for (int i = 0; i < selectedItem.Count; i++)

{

labelText += selectedItem[i] + " ";

}

pickerViewModel.LabelText = labelText;

}

Output:

We have created sample based on your requirement, please find the sample from below location.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CascadingPicker-1057705234.zip

Please let us know if you have any other queries.

Regards,

Hemalatha M.

Reply | Reply with quote

Padmini Ramamurthy [Syncfusion]

Replied On October 25, 2019 10:52 AM UTC

From: Nabeel Mumtaz
Sent: Friday, October 25, 2019 5:40 AM
To: Syncfusion Support <support@syncfusion.com>
Subject: RE: Syncfusion support community forum 148549, Binding to label , has been updated.

Hi Hemalatha M,

Thank you so much for your kind effort. I really appreciate your hard work and quick reply!.

Reply | Reply with quote

Hemalatha Marikumar [Syncfusion]

Replied On October 28, 2019 05:35 AM UTC

Hi Nabeel,

Thanks for your update.

We glad to hear that given solution works.

Please let us know if you have any other query.

Regards,

Hemalatha M.

Reply | Reply with quote

nabeel

Replied On October 28, 2019 01:46 PM UTC

x:Name="picker"

CancelButtonBackgroundColor="White"

CancelButtonClicked="{Binding CancelPressed}"

HeaderBackgroundColor="White"

HeaderText="Select Frequency"

HeaderTextColor="Black"

HeightRequest="350"

ItemsSource="{Binding Area}"

OKButtonBackgroundColor="White"

OkButtonClicked="{Binding OkPressed}"

PickerHeight="250"

PickerMode="Default"

SelectedItem="{Binding SelectedArea}"

SelectedItemFontAttribute="Bold"

SelectedItemTextColor="Black"

ShowFooter="True" />

How can i add functionality to "ok" & "cancel" button in my ViewModel? Because i want to keep my backfile empty.

And when "ok" or "cancel" is pressed, i want to to this ( await _navigationService.GoBackAsync(); ).

so how can i bind it to my view model ? i tried with command but its not working in viewmodel

Reply | Reply with quote

Sakthivel Palaniyappan [Syncfusion]

Replied On October 29, 2019 09:34 AM UTC

Hi Nabeel,

Thanks for your update.

We have analyzed your query. For ok and cancel button, we don't have command support. You can satisfy this requirement by implementing EventToCommandBehavior for SfPicker OkButtonClicked and CancelButtonClicked as per the snippet.

XAML:

<syncfusion:SfPicker

ColumnHeaderText="{Binding Header}"

HeaderText="Select your Area"

HeightRequest="350"

ItemsSource="{Binding Area}"

PickerHeight="250"

PickerMode="Dialog"

PickerWidth="280"

SelectedItem="{Binding SelectedArea}"

WidthRequest="300" >

<syncfusion:SfPicker.Behaviors>

<local:EventToCommandBehavior Command="{Binding OkButtonCommand}" EventName="OkButtonClicked"/>

<local:EventToCommandBehavior Command="{Binding CancelButtonCommand}" EventName="CancelButtonClicked"/>

</syncfusion:SfPicker.Behaviors>

</syncfusion:SfPicker>

We have created sample based on your requirement, please find the sample from below location.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CascadingPicker-1844777057.zip

Regards,

Sakthivel P.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148549	Oct 24,2019 12:01 PM UTC	Oct 29,2019 09:34 AM UTC	Xamarin.Forms	8

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US