Microsoft.Net Developer: Xamarin

Showing posts with label Xamarin. Show all posts

Xamarin | How to set application published name and version

Set Application name

1. Open "AndroidManifest.xml" file from ProjectName\ProjectName.Droid\Properties folder

2. set application name which you want in blow property,

<application android:label="MyApp"></application>

Set Application Version

1. Open "AssemblyInfo.cs" file from ProjectName\ProjectName.Droid\Properties

2. Set version number which you want,

[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]

Xamarin : Splash Screen

1. Create images for respective resolutions and store it in the same folder in Resources folder of "ProjectName.Droid" project

MDPI = 320 × 480 dp = 320x480px (The Default x1)
XHDPI = 2 x MDPI = 640x960px
XXHDPI = 3 x MDPI = 960x1440px
XXXHDPI = 4 x MDPI = 1280x1920px

2. Create new activity name "SplashActivity.cs" in Droid project

    [Activity(Theme = "@style/Theme.Splash",
        MainLauncher = true,
        NoHistory = true)]
    public class SplashActivity : Activity
    {       
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            System.Threading.Thread.Sleep(3000);
            StartActivity(typeof(MainActivity));
        }
    }

3. Open "MainActivity.cs" File and set MainLauncher = false

4. Set styles, open styles.xml from Resources -> Values folder

   <style name="Theme.Splash" parent="MainTheme.Base">
    <item name="android:background">@drawable/splashscreen</item>
    <item name="windowNoTitle">True</item>
  </style>

  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  </style>

5. Run the application and see the splash screen

6. For windows phone and windows 8.1 project, please follow the steps as mentioned in below image,

Xamarin : Master and Detail page

Steps

Create new page and give name "masterpage"
Change "ContentPage" to "MasterDetailPage" at the fist line in the design
open cs file and inherit with "MasterDetailPage" public partial class MasterDetailMainPage : MasterDetailPage
Add class name in the first tag line in the design
xmlns:local="clr-namespace:App1;assembly=App1"
App1 is your application name

Create left menu as below

  <MasterDetailPage.Master>
    <ContentPage Title="Menu">
      <StackLayout Orientation="Vertical">
        <Label Text="This is slide out menu"></Label>
        <Button Text="One" Clicked="Menu1"></Button>
        <Button Text="Two"  Clicked="Menu2"></Button>
        <Button Text="Three" Clicked="Menu3"></Button>
      </StackLayout>
    </ContentPage>
  </MasterDetailPage.Master>

Create detail container view

<MasterDetailPage.Detail>
    <ContentPage Title="Menu">
      <StackLayout Orientation="Vertical"></StackLayout>
    </ContentPage>
  </MasterDetailPage.Detail>

Full design code as like below

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    xmlns:local="clr-namespace:App1;assembly=App1"      
             x:Class="App1.MasterDetailMainPage"
                   Title="Master Detail Page">
 
  <MasterDetailPage.Master>
    <ContentPage Title="Menu">
      <StackLayout Orientation="Vertical">
        <Label Text="This is slide out menu"></Label>
        <Button Text="One" Clicked="Menu1"></Button>
        <Button Text="Two"  Clicked="Menu2"></Button>
        <Button Text="Three" Clicked="Menu3"></Button>
      </StackLayout>
    </ContentPage>
 
  </MasterDetailPage.Master>
  
  
  <MasterDetailPage.Detail>    <ContentPage Title="Menu">
      <StackLayout Orientation="Vertical"></StackLayout>
    </ContentPage>
  </MasterDetailPage.Detail>

</MasterDetailPage>

Code:

Write a code to redirect to menu selected page

Open file - MasterDetailMainPage.xaml.cs

        void Menu1(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new MasterDetailPageOne());
            IsPresented = false;
        }
        void Menu2(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new MasterDetailPageTwo());
            IsPresented = false;
        }
        void Menu3(object sender, EventArgs e)
        {
            Detail = new NavigationPage(new MasterDetailPageThree());
            IsPresented = false;
        }



Output

Xamarin : Create Carousel Page

Steps

Create new page
Change "ContentPage" to "CarouselPage" on the first line of the design code
Create multiple "ContentPage" tags, that how many you want carousel pages
write design and code in "<StackLayout>" tag

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1.CarasoulSample">
 
  <ContentPage>
    <StackLayout>
 
      <Label Text="I am Red color"
           VerticalOptions="Start"
           HorizontalTextAlignment="Center"
           FontSize="Large"
           FontAttributes="Bold"
           TextColor="Red" />
 
      <BoxView Color="Red" VerticalOptions="FillAndExpand"></BoxView>
    </StackLayout>
  </ContentPage>
 
  <ContentPage>
    <StackLayout>
      <Label Text="I am Blue color"
           VerticalOptions="Start"
           HorizontalTextAlignment="Center"
           FontSize="Large"
           FontAttributes="Bold"
           TextColor="Blue" />
 
      <BoxView Color="Blue" VerticalOptions="FillAndExpand"></BoxView>
    </StackLayout>
  </ContentPage>
 
  <ContentPage>
 
    <StackLayout>
 
      <Label Text="I am Green color"
           VerticalOptions="Start"
           HorizontalTextAlignment="Center"
           FontSize="Large"
           FontAttributes="Bold"
           TextColor="Green" />
 
      <BoxView Color="Green" VerticalOptions="FillAndExpand"></BoxView>
    </StackLayout>
  </ContentPage>
</CarouselPage>

Xamarin : How to submit form data using API POST method

Design

<StackLayout Orientation="Vertical">
 
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
      <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
 
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
 
    <Label Grid.Row="0" Grid.Column="0"  Text="Username:"></Label>
    <Entry Grid.Row="1" Grid.Column="0"  x:Name="txtUsername"></Entry>
                                         
    <Label Grid.Row="2" Grid.Column="0"  Text="Password:"></Label>
    <Entry Grid.Row="3" Grid.Column="0"  x:Name="txtPassword"></Entry>
                                         
    <Label Grid.Row="4" Grid.Column="0"  Text="First Name:"></Label>
    <Entry Grid.Row="5" Grid.Column="0"  x:Name="txtFirstName"></Entry>
                                         
    <Label Grid.Row="6" Grid.Column="0"  Text="Last Name:"></Label>
    <Entry Grid.Row="7" Grid.Column="0"  x:Name="txtLastName"></Entry>
                                         
    <Label Grid.Row="8" Grid.Column="0"  Text="Email:"></Label>
    <Entry Grid.Row="9" Grid.Column="0"  x:Name="txtEmailId"></Entry>
                                         
    <Label Grid.Row="10" Grid.Column="0" Text="Mobile:"></Label>
    <Entry Grid.Row="11" Grid.Column="0" x:Name="txtMobile"></Entry>
 
    <Label Grid.Row="12" Grid.Column="0" x:Name="OutputName" FontSize="15"

                  HorizontalTextAlignment="Center" ></Label>
 
    <Button Grid.Row="13" Grid.Column="0" Text="Submit" Clicked="OnSubmit" ></Button>
    
  </Grid>
  </StackLayout>

Code

async void OnSubmit(object sender, EventArgs e)
       {
           if (!string.IsNullOrEmpty(txtUsername.Text)

                  && !string.IsNullOrEmpty(txtPassword.Text)

                  && !string.IsNullOrEmpty(txtFirstName.Text)

                  && !string.IsNullOrEmpty(txtLastName.Text)

                  && !string.IsNullOrEmpty(txtEmailId.Text)

                  && !string.IsNullOrEmpty(txtMobile.Text))
           {
               try
               {
                   HttpClient client = new HttpClient();
 
                   string requestPayload = "{\"UserName\": \""+txtUsername.Text+"\"" + "," +
                           "\"Password\": \"" +txtPassword.Text+"\"" +","+ 
                           "\"FirstName\":\""+txtFirstName.Text+ "\"" + "," +
                           "\"LastName\": \"" +txtLastName.Text+ "\"" + "," +
                           "\"EmailId\":  \"" +txtEmailId.Text+ "\"" + "," +
                           "\"Mobile\":   \"" +txtMobile.Text+ "\"" + "}"  ;
                   var response = await client.PostAsync("http://domainname/DemoAPI/API/User/AddUser",

                                       new StringContent(requestPayload, Encoding.UTF8, "application/json"));
 
                   if (response.StatusCode == HttpStatusCode.OK)
                   {
                       OutputName.Text = "Data Saved.";
                   }
               }
               catch (Exception ex)
               {
                   OutputName.Text = ex.Message;
               }
           }
           else
           {
               OutputName.Text = "Please fill up complete form";
           }
       }

Output

Xamarin : How to call API POST method

Xamarin : API call

How to consume API method in xamarin application ?

I tried on google but couldn't find proper example. I got help of my friend who have knowledge of xamarin and some help from google, and created successful demo, which I am sharing with you.

Steps:

First check that API is working or not
Install "newtonsoft json" from NuGet package manager

Design

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button Text="Get Data"

Clicked="OnGetDataButtonClicked"

Grid.Row="0"

Grid.Column="0"></Button>

<Label x:Name="lblMsg"

Grid.Row="1"

Grid.Column="0"></Label>

<ListView.ItemTemplate>

</StackLayout>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

Code

async void OnGetDataButtonClicked(object sender, EventArgs e)

{

try

{

HttpClient client = new HttpClient();

string requestPayload = @"{

""UserId"": ""123"",

""dataTableCommon"":{

""param"" :{""Start"": ""21"",

""Length"": ""10"",

""Draw"" :""1""}

}

}";

var response = await client.PostAsync("http://Domainname/DemoAPI/API/User/GetUsersList",

new StringContent(requestPayload, Encoding.UTF8, "application/json"));

if (response.StatusCode == HttpStatusCode.OK)

{

var json = await response.Content.ReadAsStringAsync();

//Here you need to create class for output results

// To generate class, you can use http://json2csharp.com

var results = JsonConvert.DeserializeObject<RootObject>(json);

MainList.ItemsSource = results.data;

}

catch (Exception ex)

{

lblMsg.Text = ex.Message;

}

void OnTapped(object sender, ItemTappedEventArgs e)

{

var selected = e.Item as Users;

DisplayAlert("Name", selected.FirstName + " " + selected.LastName, "Okay");

}

Generate Class

// To generate class, you can use http://json2csharp.com

public class Users

{

public string UserId { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

public string EmailId { get; set; }

}

public class RootObject

{

public List<Users> data { get; set; }

}

Output

I hope, you like the article !!! ENJOY !!!