Xamarin Forms
App
Xamarin Forms 使用Lable FormattedText
2019/12/27 19:34:27
0
1063
在專案開發時,常會遇到類似如下圖這樣的情景:
在直覺式的開發情形下,我們可能就會利用橫向排序的StackLayout加上兩個Label來達成:
<StackLayout Orientation="Horizontal" Padding="20,60">
<Label TextColor="Black" Text="您的分數:" FontSize="18" VerticalOptions="Center"/>
<Label TextColor="Red" Text="90" FontSize="26" VerticalOptions="Center"/>
</StackLayout>
但如果是遇到下圖這樣的情況:
就會讓簡單一行呈現的文字在控制項的擺放上變得非常複雜,導致不好維護及閱讀:
<StackLayout Orientation="Horizontal" Padding="20,60" Spacing="0" >
<Label TextColor="Black" Text="您的" FontSize="18" VerticalOptions="Center"/>
<Label TextColor="Green" Text="分數" FontSize="18" VerticalOptions="Center"/>
<Label TextColor="Orange" Text=":" FontSize="18" VerticalOptions="Center"/>
<Label TextColor="Red" Text="90" FontSize="26" VerticalOptions="Center"/>
</StackLayout>
在以上的例子情況上,其實可以僅透過1個Label就達成畫面所需的呈現,
透過Label提供的FormattedText屬性搭配Span標籤達成。
FormattedText屬性為FormattedString類型
FormattedString主要使用Span集合做為主要呈現
簡單說來可以把Span單獨看成一個Label來使用,
每個Span可以設定不同的字體大小及文字顏色。
以上述的例子改成使用FormattedText後會變如下的XAML片段:
<Label VerticalOptions="Center" VerticalTextAlignment="Center">
<Label.FormattedText>
<FormattedString>
<Span TextColor="Black" Text="您的" FontSize="18"/>
<Span TextColor="Green" Text="分數" FontSize="18"/>
<Span TextColor="Orange" Text=":" FontSize="18"/>
<Span TextColor="Red" Text="90" FontSize="26" />
</FormattedString>
</Label.FormattedText>
</Label>
Xamarin Forms3.1.0版本以上的Span甚至可以直接支援Binding(之前只能自製可Binding的Span)
假設ViewModel中有兩個隊伍的分數需要顯示在畫面上
public class MainViewModel
{
public int TeamA { get; set; } = 20;
public int TeamB { get; set; } = 10;
}
在XAML上,可在Label中使用Span去Binding兩個不同的ViewModel屬性:
<Label FontSize="24">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding TeamA}" TextColor="Red"/>
<Span Text=" : " TextColor="Black"/>
<Span Text="{Binding TeamB}" TextColor="Green"/>
</FormattedString>
</Label.FormattedText>
</Label>
這樣不僅節省許多撰寫XAML畫面時間,也提高了整體的可閱讀性。
範例連結
https://github.com/stevenchang0529/Xamarin.Lab.LabelFormatedText