Xamarin Tutorial -Xamarin Forms Designer

Hi Guys ,Today I'm going to show you something that every Xamarin developer will love,because time that i'm writing this post there is no inbuilt UI designer for Xamarin forms.But for Xamarin android and Xamarin IOS do have that UI designer,But a technology like Xamarin real benefit is use cross-platform approach rather than using native approach.
                                            Idea of Xamarin Forms having a shared code base for Android IOS and Windows then write few custom renders to get platform specific features.
                                                          According to my idea real pain of Xamarin forms is design a nice UI ,If we do a small change like color replacement we need to build it and deploy it in device to see the results.After going here and there in internet I found a medicine for that pain.And now I'm going to share that threat with you.

To make this we need few ingredients

• Android or IOS Emulator/Device
• Gorilla Player 

I'll show you how to do it in Android Emulator

• First If you don't have Android Emulator you can download and install Android Emulator from   here  (This is the Fastest Android emulator I have tested and also Genymotion  is also better                 alternative which has large variety of devices unless it's don't have restriction in free version)

• Next we need Gorilla player.You can download it from here,but before download and install it in your system it's better to Register on that site because later stages that credentials will require for login to that player  After complete of Gorilla installer you will have pop up like this

       After complete Gorilla installer you will see pop up like this

     Make sure to mark the check box for install samples and player
     Then enter login details that we registered previously
    Then you will see a screen like this

Then click on Opening Player.sln and you will get VS/XS project
Then run that project in your Emulator,and you will get App like this in your Emulator

Then open your Application and you will see some gorilla face on top right corner on your XAML page that mean your xaml page connect with your gorilla player

And if you going through xaml pages or if you change anything in that page you will see the UI view in your emulator

                                                 So Welcome to Gorilla  Family 

Troubleshooting

When you trying to run Player sometimes you will get error like this 

'Resource.Attribute' does not contain a definition for 'actionBarSize'

To fix this issue we can simple delete Xamarin folder located in
C:\Users\{User}\AppData\Local  And rebuild your application again

If it's not work you can change your JAVA version and see the results (you must restart your VS after change JAVA version and after changing JAVA version it's better if you can delete Xamarin folder and rebuild)

Ok If you have any question or feed back please post a comment bellow then Happy Hunting  until next time

Xamarin Tutorial - How to Add Dynamic Pages

Hi guys ,after long time I'm back with new technology .This is cross platform mobile development technology called Xamarin. We can create  Android,IOS and Windows Native mobile apps same time using single code base.In this language we written using c#.Good thing about Xamarin is we can reach native performance and features more than other cross platform mobile technologies.

Today I'm going to show you how to add dynamic pages in Xamarin .This is important when we need to change our views dynamically. Trick that we using here is Content views  in Xamarin as sub pages not ContentPages.

First we create Content  Page called MainPage and 2 content views called Page1 and Page2  That pages looks like this

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DynamicPages.MainPage">
  <StackLayout Padding="20">
    <StackLayout Orientation="Horizontal" HorizontalOptions="Center" >
      <Button Text="Page1" Clicked="onPage1ButtonClick"/>
      <Button Text="Page2" Clicked="onPage2ButtonClick"/>
    </StackLayout>
    <StackLayout HorizontalOptions="FillAndExpand" 

                VerticalOptions="FillAndExpand" x:Name="DynamicPageView">
    </StackLayout>
  </StackLayout>
</ContentPage>

In Main page I added 2 Buttons and Stack Layout named "DynamicPageView" .

Page1.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DynamicPages.Page1">
  <StackLayout>
    <Label Font="20" Text="This is page 1"/>
  </StackLayout>
</ContentView>

Page2.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DynamicPages.Page2">
  <StackLayout>
    <Label Font="20" Text="This is page 2"/>
  </StackLayout>
</ContentView>

In Page1 and Page2 we use Content views not Content Pages and we added only Labels on each pages

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace DynamicPages
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        public void onPage1ButtonClick(object o, EventArgs e)
        {
            DynamicPageView.Children.Clear();
            DynamicPageView.Children.Add(new Page1());
        }

        public void onPage2ButtonClick(object o, EventArgs e)
        {
            DynamicPageView.Children.Clear();
            DynamicPageView.Children.Add(new Page2());

        }

    }
}

In MainPage.cs we add 2 functions for button clicks

DynamicPageView.Children.Clear();
DynamicPageView.Children.Add(new Page1());

In here we add children to our StackLayout in MainPage.xaml .It's important to clear Children before add new one.otherwise it will add redundant pages.

Final views look like this

Important :- we have to use Content views as Page 1 and Page 2

If you have any question feel free to post a comment bellow.Thank you very much see you soon.Happy Hunting