Post
Ask Question

Xamarin Forms 4.6

Introduction 

 
Hello guys...
 
Xamarin Forms 4.6
 
Today I would like to show you about Xamarin Forms 4.6. In this update, there are lots of cool new features.
 
So, let's get started.
 

Implementation

 
First, we start the VS 2019 and click on create a new project.
 
Xamarin Forms 4.6
 
Then search the Xamarin.forms project and select Mobile App(Xamarin.Forms). Click Next.
 
Xamarin Forms 4.6
 
Now, I am going to the project name which is DemoXF4_6, then click the create button.
 
Xamarin Forms 4.6
 
After clicking the create button, a dialogue appears like in the below image.
 
Xamarin Forms 4.6
 
This is another dialogue window where you can:
  1. Choose the blank app
  2. Select the project(Android, iOS) you want to create
  3. Select the Code Sharing Strategy .NET Standard
  4. Click OK, then create the project
First, we check the xamarin.forms latest Nuget Package. Check if the xamarin forms Nuget Package is updated or not. If not, we will update it. The following are the steps for updating the package.
 
Xamarin Forms 4.6
 
First, we select the solution and right-click on the solution and then select the Nuget package as shown in this below screen.
 
Xamarin Forms 4.6
 
Now a new window appears (Nuget - Solution). This window contains the information to all packages used in this project. Here, we can select the install tab, and search the xamarin.Forms and update it in PCL, Android, and iOS.
 

Feature of Xamarin Forms 4.6

  1. Fonts
  2. GIF Supported
  3. RadioButton
  4. Expender
  5. VisualMaterial
  6. AppTheme
Before using this feature, we add the flag in App.cs such as:
  1. Device.SetFlags(new string[]   
  2. {   "RadioButton_Experimental",   
  3.     "AppTheme_Experimental",   
  4.     "Markup_Experimental",  
  5.     "Expander_Experimental"   
  6.     });  

Font in Xamarin Forms

 
Setup
 
First, we create a Fonts Folder and add a font like PressStart2P-Regular.ttf or materialdesignicons-webfont.ttf. After adding the fonts, we can set the font property None to an Embedded resource, and set the reference or aliased in assemblyInfo file and write a line for set the Alias and use it in our controls.
 
Xamarin Forms 4.6 Xamarin Forms 4.6
  1. [assembly: ExportFont("PressStart2P-Regular.ttf", Alias ="FontCode")]  
  2. [assembly: ExportFont("materialdesignicons-webfont.ttf",Alias ="FontAwesome")]  
Xamarin Forms 4.6
 
Example
  1. <Label   
  2.    FontFamily="FontCode"  
  3.    FontSize="Large"  
  4.    HorizontalOptions="Center"   
  5.    Text="Login Form"   
  6.    VerticalOptions="Center" />  

GIF Supported in Xamarin Forms

 
GIF image is simple image animation, simply put, it is a 5-10 sec video clip animation. This is a very easy part to load into the image. We can add the IsAnimationPlaying as True.
 
Example
  1. <Image 
  2.    Aspect="Fill"  
  3.    HeightRequest="250"   
  4.    IsAnimationPlaying="True"  
  5.    Source="https://steamuserimages-a.akamaihd.net/ugc/931561575357966166/6BE65F9887FD3207D44464189B1DF1A9A3ACEDD9/" />  

RadioButton in Xamarin Forms

 
RadioButton, which is the most required control on Camarin forms, is a type of button control that allows the user to select one option in the group. We can define the radio group using the GroupName Property.
 
Example
  1. <RadioButton   
  2.    GroupName="Remember"   
  3.    IsChecked="False"   
  4.    Text="Remember" />  
  5.   
  6. <RadioButton   
  7.    GroupName="Remember"   
  8.    IsChecked="False"   
  9.    Text="Not Remember" />  

Expender in Xamarin Forms

 
In Xamarin Forms, the expander is a Collapsible container. In this control, one is Header container that is shown and another which is a hidden part is the expander container. When users tap on the header, another part is collapsed.
 
Example
  1. <Expander   
  2.     x:Name="expander"   
  3.     Grid.Row="1"   
  4.     Grid.Column="0"   
  5.     Margin="0,0,0,10"   
  6.     Padding="0,20"   
  7.     FlexLayout.Basis="100%">  
  8.     <Expander.Header>  
  9.         <Frame  
  10.         Padding="5"  
  11.         BackgroundColor="AntiqueWhite"  
  12.         Visual="Material">  
  13.         <StackLayout  
  14.         Margin="0,0,0,6"  
  15.         HorizontalOptions="FillAndExpand"  
  16.         Orientation="Horizontal">  
  17.           
  18.             <Image Source="{FontImage FontFamily=FontAwesome, Glyph={x:Static   
  19.             helper:IconFont.Notebook}, Size=30, Color=Black}" />  
  20.           
  21.             <Label  
  22.             FontSize="18"  
  23.             HorizontalOptions="FillAndExpand"  
  24.             Text="Order Status" />  
  25.         </StackLayout>  
  26.         </Frame>  
  27.     </Expander.Header>  
  28.         <Grid  
  29.         Padding="10,0"  
  30.         BackgroundColor="AliceBlue"  
  31.         RowSpacing="0">  
  32.             <Grid.ColumnDefinitions>  
  33.             <ColumnDefinition Width="10" />  
  34.             <ColumnDefinition Width="*" />  
  35.             </Grid.ColumnDefinitions>  
  36.                 <Grid  
  37.                 Grid.Row="0"  
  38.                 Grid.Column="0"  
  39.                 RowSpacing="0">  
  40.                 <Grid.RowDefinitions>  
  41.                 <RowDefinition Height="Auto" />  
  42.                 <RowDefinition Height="Auto" />  
  43.                 </Grid.RowDefinitions>  
  44.                 <BoxView  
  45.                 Grid.Row="0"  
  46.                 Grid.Column="0"  
  47.                 BackgroundColor="Accent"  
  48.                 CornerRadius="10"  
  49.                 HeightRequest="10"  
  50.                 WidthRequest="10" />  
  51.                 <BoxView  
  52.                 Grid.Row="1"  
  53.                 Grid.Column="0"  
  54.                 BackgroundColor="Accent"  
  55.                 HorizontalOptions="Center"  
  56.                 VerticalOptions="Start"  
  57.                 WidthRequest="2" />  
  58.         </Grid>  
  59.         <Label  
  60.         Grid.Row="0"  
  61.         Grid.Column="1"  
  62.         Text="Ordered and Approved" />  
  63.         <Grid  
  64.         Grid.Row="1"  
  65.         Grid.Column="0"  
  66.         RowSpacing="0">  
  67.             <Grid.RowDefinitions>  
  68.             <RowDefinition Height="Auto" />  
  69.             <RowDefinition Height="Auto" />  
  70.             </Grid.RowDefinitions>  
  71.                 <BoxView  
  72.                 Grid.Row="0"  
  73.                 Grid.Column="0"  
  74.                 BackgroundColor="Accent"  
  75.                 CornerRadius="10"  
  76.                 HeightRequest="10"  
  77.                 WidthRequest="10" />  
  78.                 <BoxView  
  79.                 Grid.Row="1"  
  80.                 Grid.Column="0"  
  81.                 BackgroundColor="Accent"  
  82.                 HorizontalOptions="Center"  
  83.                 VerticalOptions="Start"  
  84.                 WidthRequest="2" />  
  85.         </Grid>  
  86.         <Label  
  87.         Grid.Row="1"  
  88.         Grid.Column="1"  
  89.         Text="Packed" />  
  90.         <Grid  
  91.         Grid.Row="2"  
  92.         Grid.Column="0"  
  93.         RowSpacing="0">  
  94.             <Grid.RowDefinitions>  
  95.             <RowDefinition Height="Auto" />  
  96.             <RowDefinition Height="Auto" />  
  97.             </Grid.RowDefinitions>  
  98.                 <BoxView  
  99.                 Grid.Row="0"  
  100.                 Grid.Column="0"  
  101.                 BackgroundColor="Accent"  
  102.                 CornerRadius="10"  
  103.                 HeightRequest="10"  
  104.                 WidthRequest="10" />  
  105.                 <BoxView  
  106.                 Grid.Row="1"  
  107.                 Grid.Column="0"  
  108.                 BackgroundColor="Accent"  
  109.                 HorizontalOptions="Center"  
  110.                 VerticalOptions="Start"  
  111.                 WidthRequest="2" />  
  112.         </Grid>  
  113.         <Label  
  114.         Grid.Row="2"  
  115.         Grid.Column="1"  
  116.         Text="Shipped" />  
  117.         <Grid  
  118.         Grid.Row="3"  
  119.         Grid.Column="0"  
  120.         RowSpacing="0">  
  121.             <Grid.RowDefinitions>  
  122.             <RowDefinition Height="Auto" />  
  123.             <RowDefinition Height="Auto" />  
  124.             </Grid.RowDefinitions>  
  125.                 <BoxView  
  126.                 Grid.Row="0"  
  127.                 Grid.Column="0"  
  128.                 BackgroundColor="Accent"  
  129.                 CornerRadius="10"  
  130.                 HeightRequest="10"  
  131.                 WidthRequest="10" />  
  132.                 <BoxView  
  133.                 Grid.Row="1"  
  134.                 Grid.Column="0"  
  135.                 BackgroundColor="Accent"  
  136.                 HorizontalOptions="Center"  
  137.                 VerticalOptions="Start"  
  138.                 WidthRequest="2" />  
  139.         </Grid>  
  140.           
  141.         <Label  
  142.         Grid.Row="3"  
  143.         Grid.Column="1"  
  144.         Text="Delivery" />  
  145.           
  146.         <Grid  
  147.         Grid.Row="4"  
  148.         Grid.Column="0"  
  149.         RowSpacing="0">  
  150.             <Grid.RowDefinitions>  
  151.             <RowDefinition Height="Auto" />  
  152.             <RowDefinition Height="Auto" />  
  153.             </Grid.RowDefinitions>  
  154.                 <BoxView  
  155.                 Grid.Row="0"  
  156.                 Grid.Column="0"  
  157.                 BackgroundColor="Accent"  
  158.                 CornerRadius="10"  
  159.                 HeightRequest="10"  
  160.                 WidthRequest="10" />  
  161.                 <BoxView  
  162.                 Grid.Row="1"  
  163.                 Grid.Column="0"  
  164.                 BackgroundColor="Accent"  
  165.                 HorizontalOptions="Center"  
  166.                 IsVisible="False"  
  167.                 VerticalOptions="Start"  
  168.                 WidthRequest="2" />  
  169.         </Grid>  
  170.           
  171.         <Label  
  172.             Grid.Row="4"  
  173.             Grid.Column="1"   
  174.             Text="Installation & Demo" />  
  175.     </Grid>   
  176. </Expander>  

Visual.Material

 
Xamarin.Forms.Visual.Material is used to apply the material design rule in Xamarin Forms apps that look identical on iOS and Android.
 
If you want to use the material design in xamarin forms control so firstly we need to add Nuget Xamarin.Forms.Visual.Material package in all framework.
 
After adding Nuget Xamarin.Forms.Visual.Material package the most important thing is that we can initialize the control in Android and iOS.
 
Android MainActivity.cs,
  1. global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);  
iOS AppDelegate.cs
  1. global::Xamarin.Forms.FormsMaterial.Init();  
Example
  1. <Entry   
  2.     Placeholder="Username"  
  3.     Style="{StaticResource EntryStyle}"  
  4.     Visual="Material" />  
  5.   
  6. <Entry  
  7.     IsPassword="True"  
  8.     Placeholder="Password"  
  9.     Style="{StaticResource EntryStyle}"  
  10.     Visual="Material" />  

AppTheme

 
Recently, our mobile device includes a Dark or Light Theme, AppTheme is another different API in xamarin.forms for using the dark or light mode. It immediately responds when the Device is changed to Dark or Light and uses it with Dynamically Like DynamicResources.
 
Example
  1. <AppThemeColor  
  2.     x:Key="PageBackgroundColor"  
  3.     Dark="#0B0C10"  
  4.     Light="#E7717D" />  


Similar Articles