Xamarin Forms App

Xamarin Forms 使用Lable FormattedText

張阿鬼 2019/12/27 19:34:27
76

 

在專案開發時,常會遇到類似如下圖這樣的情景:

在直覺式的開發情形下,我們可能就會利用橫向排序的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

 

 

張阿鬼