Xamarin custom controls-CodePudding

I am new to Xamarin.I decided my first project to be a fitness app.I wanted to have a custom control , an image with a button and a label inside of it , so I did this in a content view file:

<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>

And since I want 5 workouts(for 5 muscle groups) , I put this inside my page:

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

and this is how it looks: android simulator I have read about bindable properties but I don't know how they would help me in this case.I don't know why the width of my image is not full.When I have just placed images in my stacklayout , it seemed to work.Maybe you guys have another idea for this?thanks.

CodePudding user response：

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

Here we add bindable property for the Image control , the same way to the Label.

Define BindableProperty in custom control .
Set the image source in propertyChanged callback .

Assign the value in 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.

Set Aspect to Fill should be able to solve the problem .

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

Update

For bindable property , you can not only assign the value directly like normal property field but also create binding on it .

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