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= },
new Span { Text = Name,ForegroundColor=Color.FromHex(""), FontSize= } }
};
}
}
}
}

然后我们在进行数据绑定的时候,给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>
上一篇:ubuntu安装最新版本的node.js


下一篇:vue axios请求超时,设置重新请求的完美解决方法