How to have 2 data binding fields in one Xamarin form shortcut?

Question

Hello, I have an application I'm working on in xamrian froms that gets data from a service. what I'm trying to do is display the first and last name fields on the same label, but currently it displays the first name, then returns a string, and then shows the last name. heres my xaml code:

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ReadyMo.ContactInfo"> <ListView ItemsSource="{Binding .}" HasUnevenRows="true"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Frame Padding="0,0,0,8" BackgroundColor="#d2d5d7"> <Frame.Content> <Frame Padding="25,25,25,25" OutlineColor="Gray" BackgroundColor="White"> <Frame.Content> <StackLayout Padding="20,0,0,0" HorizontalOptions="CenterAndExpand" > <Label x:Name="FirstName" Text="{Binding First_Name}"> </Label> <Label x:Name ="LastName" Text="{Binding Last_Name}"> </Label> <Label x:Name="County" Text="{Binding name}"> </Label> <Label x:Name ="Adress" Text="{Binding Address1}"> </Label> <Label x:Name ="City" Text="{Binding Address2}"> </Label> <Label x:Name="Number" Text="{Binding BusinessPhone}" > </Label> </StackLayout> </Frame.Content> </Frame> </Frame.Content> </Frame> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </ContentPage> 

EDIT Here is My codebehind:

 using Newtonsoft.Json; using ReadyMo.Data; using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Net.Http; using System.Threading.Tasks; using Xamarin.Forms; namespace ReadyMo { public partial class ContactInfo : ContentPage { private County item; public static async Task<string> GetContactString(string contactid) { HttpClient client = new HttpClient(); var url = $"URL"; var response = await client.GetAsync(url); if (response.IsSuccessStatusCode) { var responsetext = await response.Content.ReadAsStringAsync(); return responsetext; } throw new Exception(response.ReasonPhrase); } public ContactInfo() { InitializeComponent(); ContactInfoList = new ObservableCollection<ContactInfoModel>(); } ObservableCollection<ContactInfoModel> ContactInfoList; public ContactInfo(County item) : this() { this.item = item; this.BindingContext = ContactInfoList; } protected override async void OnAppearing() { if (item == null) return; var contact = await GetContactString(item.id); var models = JsonConvert.DeserializeObject<List<ContactInfoModel>>(contact); foreach (var model in models) ContactInfoList.Add(model); } } } 

any help would be awesome!

Thanks in advance:)

Answer 1

In this situation, I have to add an additional property to the model that combines the two properties.

 public class ContactInfo { public string FirstName { get; set; } public string LastName { get; set; } public string FirstLastName { get { return FirstName + " " + LastName; }} //Or use C# 6 goodness //public string FirstLastName => FirstName + " " + LastName; } 

Now in your ViewModel, if the first or last name is changed, you will need to do something like this to update the FirstLastName property:

 private string _firstLastName; public string FirstLastName { get { return _firstLastName; } set { if(_firstLastName != value) { _firstLastName = value; SetPropertyChanged(); } } } private string _firstName; public string FirstName { get { return _firstName; } set { if(_firstName != value) { _firstName = value; SetPropertyChanged(); SetPropertyChanged("FirstLastName"); //Also send alert that FirstLastName changed } } } 

Then do the same for you LastName .

Edit: your XAML will look like this:

 <StackLayout Padding="20,0,0,0" HorizontalOptions="CenterAndExpand" > <Label x:Name="FirstName" Text="{Binding FirstLastName}"/> ..... </StackLayout> 

Edit2: Since you probably never change the First or Last Name property when displaying the user interface, you just need to add the property to your model as shown in the ContactInfo code above, and then change the shortcut as shown in the edit above. and you will be good to go.

Answer 2

It looks like a Label can contain multiple ranges , roughly the same as TextBlock / Run in WPF:

  <Label FontSize=20> <Label.FormattedText> <FormattedString> <Span Text="{Binding FirstName}" ForegroundColor="Red" FontAttributes="Bold" /> <Span Text="{Binding MI}" /> <Span Text="{Binding LastName}" FontAttributes="Italic" FontSize="Small" /> </FormattedString> </Label.FormattedText> </Label> 

This only works above XF version 3.1, but not lower.

In earlier versions, Span.Text could not be bound. The above XAML did not work; it threw exceptions. So it is entirely possible that this may not work for you.

Update:

Afzal Ali comments that this has been working in XF 3.1 since August 2018.

Answer 3

As Ed Phuket said, this works, but:
You need to add Mode=OneWay if you want it to be updated with the OnPropertyChanged event in the range, because it has OneTime mode by default

Answer 4

While the Xamarin Forms team is still figuring out the binding to the Span element, you can simply change the formatting of the labels for this to work:

  <StackLayout Orientation="Horizontal" Padding="0" Margin="0" Spacing="0"> <Label Text="{Binding First_Name}" Margin="0" /> <Label Text=" " Margin="0" /> <Label Text="{Binding Last_Name}" Margin="0" /> </StackLayout>