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>

 

posted @ 2017-12-25 14:37  ojdev  阅读(431)  评论(0)  编辑  收藏  举报