Xamarin 自定义控件

Question

我是 Xamarin 的新手。我决定我的第一个项目是一个健身应用程序。我想要一个自定义控件、一个带有按钮和标签的图像，所以我在内容视图文件中执行了此操作：

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Fitness_App.TabWorkout">
    <RelativeLayout >
        <Image x:Name="img" Source="workout"/>
        <Button BackgroundColor= "Wheat"
                CornerRadius="30"
                WidthRequest="50"
                HeightRequest="50"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Width, Factor=0.68}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Height, Factor=0.45}"/>
         <Label x:Name="workout_name"
                FontFamily="BebasNeue"
                TextColor ="ForestGreen"
                FontSize="37"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Width, Factor=0.18}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Height, Factor=0.2}"/>
                
    </RelativeLayout>

</ContentView>

因为我想要 5 次锻炼（针对 5 个肌肉群），所以我把它放在我的页面中：

<ContentPage.Content>
            <ScrollView>
                <StackLayout>
                    <local:TabWorkout/>
                    <local:TabWorkout/>
                    <local:TabWorkout/>
                    <local:TabWorkout/>
                    <local:TabWorkout/>
                </StackLayout>
            </ScrollView>
        </ContentPage.Content>

这就是它的外观： android simulator 我已经阅读了有关可绑定属性的信息，但我不知道在这种情况下它们会如何帮助我。我不知道为什么我的图像宽度不满。当我刚刚将图像放在我的 stacklayout 中时，它似乎可以工作.也许你们对此有其他想法？谢谢。

Answer 1

我已阅读有关可绑定属性的信息，但我不知道在这种情况下它们对我有何帮助。

这里我们为Image控件添加可绑定属性，与Label一样。

1. 在自定义控件中定义BindableProperty。

2. 在propertyChanged回调中设置图片来源。

3. 在 xaml 中赋值。

   [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TabWorkout : ContentView
    {
        public TabWorkout()
        {
            InitializeComponent();
        }
   
        public static readonly BindableProperty ImageNameProperty =
            BindableProperty.Create("ImageName", typeof(string), typeof(TabWorkout), propertyChanged: OnEventNameChanged);
   
        public string ImageName
        {
            get { return (string)GetValue(ImageNameProperty); }
            set {
                SetValue(ImageNameProperty, value);
            }
   
        }
   
        static void OnEventNameChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if(newValue != null)
            {
                var control = (TabWorkout)bindable;
                control.img.Source = ImageSource.FromFile(newValue as string);
            }
        }
    }
   

    <ScrollView>
        <StackLayout>
            <local:TabWorkout ImageName="a.jpg"/>
            <local:TabWorkout ImageName="b.png"/>
            <local:TabWorkout ImageName="c.png"/>
            <local:TabWorkout ImageName="d.png"/>
        </StackLayout>
    </ScrollView>
   

不知道为什么我的图片宽度不够。

设置Aspect为Fill应该可以解决问题。

 <Image x:Name="img" Aspect="Fill"/>

更新

对于可绑定属性，您不仅可以像普通属性字段一样直接赋值，还可以在其上创建绑定。

<ScrollView>
    <StackLayout>
        <local:TabWorkout ImageName="{Binding ImageName}"/>
        <local:TabWorkout ImageName="a.jpg"/>
    </StackLayout>
</ScrollView>