Xamarin 自定义控件

Posted 2023-04-13

【中文标题】Xamarin 自定义控件

【英文标题】：Xamarin custom controls

【发布时间】：2021-11-07 20:55:15

【问题描述】：

我是 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 中时，它似乎可以工作.也许你们对此有其他想法？谢谢。

【问题讨论】：

您没有在布局中的任何元素上指定任何 HorizontalOption 值

【参考方案1】：

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

这里我们为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>

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

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

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

更新

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

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

【讨论】：

这太棒了，谢谢！但是我仍然看不到可绑定属性的使用...你不能只声明一个普通的属性字段 public ImageName 并自定义你的设置器吗？

检查我的更新。