Xamarin 自定义控件

Question

我是新手 Xamarin.I 决定我的第一个项目是健身 app.I 想要一个自定义控件，一个带有按钮和标签的图像，所以我做了这个在内容视图文件中：

<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 我已经阅读了有关可绑定属性的信息，但我不知道它们如何帮助我 case.I 不知道为什么我的图像宽度不是 full.When 我刚刚将图像放在我的 stacklayout 中， work.Maybe 你们似乎对此有其他想法？谢谢。

Answer 1

I have read about bindable properties but I don't know how they would help me in this case.

这里我们为Image控件添加可绑定的属性，方法与Label.

相同

在自定义控件中定义BindableProperty。
在propertyChanged回调中设置图片来源。

赋值在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>

I don't know why the width of my image is not full.

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

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

更新

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

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

Xamarin 自定义控件

Xamarin custom controls

c#

mobile

xamarin

更新