了解 Xamarin.Forms 创建移动应用程序的基础知识 3

2020-03-09  本文已影响0人  鼠标与键盘的故事

简介

演示如何在 Label 中显示文本。

  1. 在 XAML 中创建 Xamarin.Forms Label。
  2. 更改 Label 的样式。
  3. 在一个 Label 中显示具有多种格式的文本。

创建 Label

  1. 打开已有项目 AwesomeApp。
  2. 添加新项 LabelPage.xaml。
  3. 编辑 LabelPage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AwesomeApp.LabelPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="欢迎使用 Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
  1. 编辑 App.xaml.cs:
public App()
{
    InitializeComponent();
    MainPage = new LabelPage();
}
  1. 调试 Android 上的应用:

配置 Label 样式

  1. 编辑 LabelPage.xaml:
<Label Text="欢迎使用 Xamarin.Forms!"
       VerticalOptions="CenterAndExpand"
       HorizontalOptions="CenterAndExpand"
       TextColor="Blue"
       FontAttributes="Italic"
       FontSize="22"
       TextDecorations="Underline" />

TextColor 设置文本的颜色,FontAttributes 设置字体为斜体,FontSize 设置字号,TextDecorations 应用下划线效果

  1. 调试 Android 上的应用:

自定义 Label 文本格式

  1. 编辑 LabelPage.xaml:
<Label TextColor="Gray"
       FontSize="20"
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="欢迎 "
                  TextColor="Blue"/>
            <Span Text="使用 "
                  TextColor="Red"
                  FontAttributes="Italic" />
            <Span Text="Xamarin.Form!"
                  TextColor="Green"
                  TextDecorations="Underline" />
        </FormattedString>
    </Label.FormattedText>
</Label>

FormattedText 属性是 FormattedString 类型,可以包含一个或多个 Span 实例

  1. 调试 Android 上的应用:
上一篇下一篇

猜你喜欢

热点阅读