Label下FormattedText中的Span沒法使用Binding的解決方法

在Xamarin.Forms中，Xaml的模板功能並無原生WPF豐富，好比Label中雖然有FormattedText能夠添加Span來豐富Label的功能，可是下面的Span中的Text並無綁定屬性，沒法直接綁定Model的值。

可是FormattedText自己是能夠進行綁定的。

那麼折中一下，進行數據綁定的時候綁定FormattedText屬性，就能臨時解決一下問題。

例若有一個Model

 1 using Xamarin.Forms;
 2 
 3 namespace Baishijiaju.StoreApp.Core.Models
 4 {
 5     public class AvararInfo
 6     {
 7         public string AvararUrl { set; get; } = @"http://192.168.0.228/Common/Images/default-profile-picture.png";
 8         public string Name { set; get; } = "百氏佳居";
 9         public string Company { set; get; } = "哈爾濱市百氏佳居網絡科技有限公司";
10         public FormattedString NameFormattedString
11         {
12             get
13             {
14                 return new FormattedString
15                 {
16                     Spans = {
17                         new Span { Text = "經紀人", ForegroundColor=Color.FromHex("FF6F42"), FontSize=14 },
18                         new Span { Text = Name,ForegroundColor=Color.FromHex("414141"), FontSize=14 } }
19                 };
20             }
21         }
22     }
23 }

而後咱們在進行數據綁定的時候，給Label的FormattedText進行綁定NameFormattedString，Model則正常進行建立就能夠了。

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

 

那麼咱們在Xaml中

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