Xamarin自定义ContentView控件内Image宽度未占满问题求助

问题原因 #

1. 嵌套层级导致布局填充特性中断：你之前直接将Image放在StackLayout中时，Image默认会自动填充StackLayout分配的可用横向宽度；但将Image放到自定义ContentView内部的RelativeLayout后，RelativeLayout默认是根据子元素内容自适应宽高，不会主动撑满父容器分配的宽度，导致Image只能显示原始尺寸大小。
2. 缺少可绑定属性配置：你需要复用5个相同结构但内容不同的自定义控件，没有对应的可绑定属性就无法给每个控件单独传入图片、训练名称等自定义内容，最终所有控件都会显示相同的内容。

解决思路 #

• 先修复布局宽度异常：修改自定义控件TabWorkout的XAML代码，给外层容器和Image添加填充属性，确保控件能占满父容器的可用宽度：

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Fitness_App.TabWorkout"
             HorizontalOptions="FillAndExpand">
    <RelativeLayout HorizontalOptions="FillAndExpand">
        <Image x:Name="img" 
               Source="workout"
               HorizontalOptions="FillAndExpand"
               Aspect="AspectFit"/>
        <!-- 原有Button、Label代码保持不变 -->
    </RelativeLayout>
</ContentView>

如果需要图片完全占满宽度不留白，可以将Image的Aspect属性调整为Fill或者AspectFill，根据你的图片显示需求选择即可。

• 新增可绑定属性实现控件复用：在TabWorkout.xaml.cs后台代码中添加可绑定属性，用于动态传入每个训练项的图片、名称等参数：

public partial class TabWorkout : ContentView
{
    // 训练图片可绑定属性
    public static readonly BindableProperty WorkoutImageProperty = BindableProperty.Create(
        nameof(WorkoutImage),
        typeof(ImageSource),
        typeof(TabWorkout),
        propertyChanged: (bindable, oldValue, newValue) => 
        {
            var control = (TabWorkout)bindable;
            control.img.Source = (ImageSource)newValue;
        });

    public ImageSource WorkoutImage
    {
        get => (ImageSource)GetValue(WorkoutImageProperty);
        set => SetValue(WorkoutImageProperty, value);
    }

    // 训练名称可绑定属性
    public static readonly BindableProperty WorkoutNameProperty = BindableProperty.Create(
        nameof(WorkoutName),
        typeof(string),
        typeof(TabWorkout),
        propertyChanged: (bindable, oldValue, newValue) => 
        {
            var control = (TabWorkout)bindable;
            control.workout_name.Text = (string)newValue;
        });

    public string WorkoutName
    {
        get => (string)GetValue(WorkoutNameProperty);
        set => SetValue(WorkoutNameProperty, value);
    }

    public TabWorkout()
    {
        InitializeComponent();
    }
}

• 调用控件时传入自定义参数：在页面的XAML中为每个TabWorkout单独设置对应的内容即可：

<ContentPage.Content>
    <ScrollView>
        <StackLayout>
            <local:TabWorkout WorkoutImage="chest" WorkoutName="胸部训练"/>
            <local:TabWorkout WorkoutImage="back" WorkoutName="背部训练"/>
            <local:TabWorkout WorkoutImage="leg" WorkoutName="腿部训练"/>
            <local:TabWorkout WorkoutImage="arm" WorkoutName="手臂训练"/>
            <local:TabWorkout WorkoutImage="shoulder" WorkoutName="肩部训练"/>
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

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