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模拟器我读过关于可绑定属性的文章，但我不知道在这种情况下它们会对我有什么帮助。我不知道为什么我的图像宽度不够满。当我刚刚把图像放在我的堆叠中时，它似乎起作用了。也许你们对此另有想法？谢谢

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>