Xamarin.Forms页面添加图文及Tabbed Page页面添加文本方法咨询

嘿，很高兴帮你搞定这个问题！既然已经搭好了Tabbed Page的框架，给每个子页面加内容其实很简单，我拆成两个部分一步步讲清楚～

一、给子页面添加文本（用Label控件） #

Xamarin.Forms里最常用的文本展示控件就是Label，不管是用XAML还是代码后台开发，直接把它放到每个ContentPage的Content区域就行。

示例1：XAML写法 #

假设你的Tabbed Page结构已经有了，直接在每个ContentPage里嵌入Label就行，用布局容器（比如StackLayout）来控制排版：

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.MainTabbedPage">

    <!-- 第一个子页面 -->
    <ContentPage Title="首页" IconImageSource="home_icon.png">
        <StackLayout Padding="20">
            <Label Text="这是首页的核心内容" 
                   FontSize="Large" 
                   TextColor="#333"
                   HorizontalOptions="Center"/>
            <Label Text="可以添加多个Label，设置不同的字体、颜色" 
                   FontSize="Medium" 
                   Margin="0,15,0,0"/>
        </StackLayout>
    </ContentPage>

    <!-- 第二个子页面 -->
    <ContentPage Title="消息" IconImageSource="message_icon.png">
        <StackLayout Padding="20">
            <Label Text="消息页面专属内容" 
                   FontAttributes="Bold"
                   FontSize="Large"/>
        </StackLayout>
    </ContentPage>

    <!-- 第三个子页面 -->
    <ContentPage Title="我的" IconImageSource="profile_icon.png">
        <StackLayout Padding="20">
            <Label Text="个人中心页面" 
                   TextColor="DarkBlue"
                   FontSize="Large"/>
        </StackLayout>
    </ContentPage>
</TabbedPage>

你也可以换成Grid或者AbsoluteLayout来布局，根据页面复杂度调整就行。

示例2：代码后台写法 #

如果习惯用C#写UI，逻辑是一样的：

public class MainTabbedPage : TabbedPage
{
    public MainTabbedPage()
    {
        // 创建第一个子页面
        var homePage = new ContentPage
        {
            Title = "首页",
            IconImageSource = "home_icon.png",
            Content = new StackLayout
            {
                Padding = new Thickness(20),
                Children = {
                    new Label { Text = "首页文本", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)) },
                    new Label { Text = "第二行辅助文本", Margin = new Thickness(0,15,0,0) }
                }
            }
        };

        // 另外两个子页面照搬上面的逻辑创建
        var messagePage = new ContentPage { /* 配置标题、图标和Content */ };
        var profilePage = new ContentPage { /* 配置标题、图标和Content */ };

        // 添加到TabbedPage中
        Children.Add(homePage);
        Children.Add(messagePage);
        Children.Add(profilePage);
    }
}

二、给页面添加图片（用Image控件） #

添加图片分三种常见场景，每种的引用方式略有不同：

1. 本地平台资源图片 #

先把图片放到对应平台的资源目录：

• Android：放到Resources/drawable，文件名要小写、无空格（比如cat.png）
• iOS：放到Resources文件夹，设置Build Action为BundleResource
• UWP：放到Assets文件夹，设置Build Action为Content

然后直接引用文件名即可：

<Image Source="cat.png" 
       WidthRequest="120" 
       HeightRequest="120"
       HorizontalOptions="Center"/>

代码后台写法：

new Image { Source = "cat.png", WidthRequest = 120, HeightRequest = 120 }

2. 嵌入式资源图片 #

如果把图片放在共享项目里（比如Images文件夹），先设置图片的Build Action为EmbeddedResource，然后这样引用：

<Image Source="{local:ImageResource YourAppName.Images.dog.jpg}" />

或者代码后台：

ImageSource.FromResource("YourAppName.Images.dog.jpg", typeof(MainTabbedPage).Assembly);

3. 网络图片 #

直接填图片的URL就行，还可以用Aspect属性控制缩放方式：

<Image Source="https://example.com/your-image.jpg" 
       Aspect="AspectFit"/>

代码后台：

new Image { Source = "https://example.com/your-image.jpg", Aspect = Aspect.AspectFit }

AspectFit是保持比例适配控件，Fill是填充整个控件，AspectFill是保持比例裁剪填充，按需选择就行。

小补充 #

• 可以把Label和Image放在同一个布局里，比如用StackLayout垂直排列，实现图文混排的效果。
• 如果需要富文本样式，给Label的FormattedText属性添加多个Span，就能实现不同字体、颜色的混合文本啦。

内容的提问来源于stack exchange，提问作者momo9