XamarinT Dark_870x220

Sometimes, we need to find a way to pass some parameters from the XAML to our code behind it, but we just don’t know how to do it. So that’s why in this article we will be learning how easy it is to pass arguments to our controls in XAML. We’ll explore different ways, such as: Passing arguments to non-default constructors, calling factory methods and generic arguments.

The topics we will explain include:

  • Passing arguments
    • Constructor arguments
    • Factory methods
    • Generic methods
  • Data types allowed

πŸ“ Learning to Pass Arguments

Constructor Arguments

Yes! 😎 Constructor arguments can be passed from the XAML. Xamarin.Forms allows us to pass these types or arguments through the XAML page.

Let’s see the structure we need to use!

    <YourUIControl>
	    <UIControl.Property>
		    <Property>
			    <x:Arguments>
				    <x:ArgumentTtype>Your vaule </x:ArgumentType>
				    <!--Add all the argument that you need-->
			    <x:Arguments>
		    </Property>
	    </UIControl.Property>
    <YourUIControl>

Imagine that you have to fill the Color’s constructor for a BoxView’s Color property. There are various constructors within the class Color, and one of them gets four values which are Double type. With the structure explained above we just have to do something like this:

    <BoxView HeightRequest="150" WidthRequest="150" HorizontalOptions="Center">  
           <BoxView.Color>  
               <Color>  
		               <x:Arguments>   
		                   <x:Double>0.25</x:Double> 
		                   <x:Double>0.50</x:Double> 
		                   <x:Double>0.9</x:Double> 
		                   <x:Double>0.10</x:Double>  
		               </x:Arguments>  
	       </Color>  
         </BoxView.Color>  
    </BoxView>

Factory Methods

And if the previous was not enough, with this way of passing arguments, we can also access the factory methods! But first… What are Factory methods? πŸ€” A factory method is a public and static method that returns objects of the same type of parent class. To use it, you just have to add the x:FactoryMethod attribute to the same structure explained in the constructor argument. Right next to the property control UI tags, as I show below:

    <Color x:FactoryMethod="FromHex">

An example to use:

<BoxView HeightRequest="150" WidthRequest="150" HorizontalOptions="Center">
      <BoxView.Color>
        <Color x:FactoryMethod="FromHex">
          <x:Arguments>
            <x:String>#FF048B9A</x:String>
          </x:Arguments>
        </Color>
      </BoxView.Color>
</BoxView>

 

Generic Type Arguments

Finally, we can pass the argument of a generic type. We just have to use the x:TypeArguments attribute, and use the structure as in the following example:
  <StackLayout>
    <StackLayout.Margin>
      <OnPlatform x:TypeArguments="Thickness">
        <On Platform="iOS" Value="0,20,0,0" />
        <On Platform="Android" Value="5, 10" />
        <On Platform="UWP" Value="10" />
      </OnPlatform>
    </StackLayout.Margin>
  </StackLayout>

πŸ”‘ Data Types Allowed

This is a great way to pass arguments from the XAML, but it’s important to know that we have some limitations of the data types that the arguments support. The following table contains all the types that are supported:

Object   Boolean   Byte   Single  Array 
 Int16  Int32   Int64  Double  DateTime
 Decimal  Char  String  TimeSpan  

 

πŸ“’ Note: When using any of these data types in an argument, you must use the “x:” namespace and the value of the argument must have the following structure:

<x:DataType>YourValue</x:DataType>

Reference

- https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/passing-arguments
Leomaris Reyes
About the Author

Leomaris Reyes

Leomaris Reyes is a software engineer from the Dominican Republic with more than five years of experience in software development. She is a Xamarin Certified Mobile Developer, a Microsoft MVP, and vice president of Mujeres Tics Community. She loves learning new things!!πŸ’šπŸ’• You can find her on Twitter, LinkedIn, AskXammy and Medium.


Related Posts

Comments

Comments are disabled in preview mode.