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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库