Label下FormattedText中的Span无法使用Binding的解决方法

在Xamarin.Forms中，Xaml的模板功能并没有原生WPF丰富，比如Label中虽然有FormattedText可以添加Span来丰富Label的功能，但是下面的Span中的Text并没有绑定属性，无法直接绑定Model的值。

但是FormattedText本身是可以进行绑定的。

那么折中一下，进行数据绑定的时候绑定FormattedText属性，就能临时解决一下问题。

例如有一个Model

using Xamarin.Forms;

namespace Baishijiaju.StoreApp.Core.Models
{
    public class AvararInfo
    {
        public string AvararUrl { set; get; } = @"http://192.168.0.228/Common/Images/default-profile-picture.png";
        public string Name { set; get; } = "百氏佳居";
        public string Company { set; get; } = "哈尔滨市百氏佳居网络科技有限公司";
        public FormattedString NameFormattedString
        {
            get
            {
                return new FormattedString
                {
                    Spans = {
                        new Span { Text = "经纪人", ForegroundColor=Color.FromHex("FF6F42"), FontSize=14 },
                        new Span { Text = Name,ForegroundColor=Color.FromHex("414141"), FontSize=14 } }
                };
            }
        }
    }
}

然后我们在进行数据绑定的时候，给Label的FormattedText进行绑定NameFormattedString，Model则正常进行创建就可以了。

        <local:AvatarView
               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=-228}"
               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Y,Factor=0,Constant=12}" >
            <local:AvatarView.BindingContext>
                <model:AvararInfo />
            </local:AvatarView.BindingContext>
        </local:AvatarView>

那么我们在Xaml中

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Baishijiaju.StoreApp.Core.Components.AvatarView"
             xmlns:effect="clr-namespace:Baishijiaju.StoreApp.Core.Effects" WidthRequest="192" HeightRequest="48">
    <ContentView.Content>
        <RelativeLayout VerticalOptions="Fill" HorizontalOptions="Fill">
            <Label 
               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Y,Factor=1,Constant=0}"
               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}">
                <BoxView.Effects>
                    <effect:BorderEffect BorderColor="White" BorderRadius="48" BorderWidth="1" CoverBackgroundColor="True" />
                </BoxView.Effects>
            </Label>
            <Label Text="{Binding Company}" FontSize="12" TextColor="{StaticResource Gery500}" HorizontalTextAlignment="End"
               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=-48}"
               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Y,Factor=0,Constant=8}"/>
            <Label FormattedText="{Binding NameFormattedString}" HorizontalTextAlignment="End"                   
               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=-48}"
               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Y,Factor=0,Constant=26}"/>
            <Image Source="{Binding AvararUrl}" WidthRequest="40" HeightRequest="40"
               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=-44}"
               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Y,Factor=0,Constant=4}"/>
        </RelativeLayout>
    </ContentView.Content>
</ContentView>