Static Resource Using Xamarin.Forms Version (1.0)

Introduction

Xamarin is a platform that allows us to create multi-platform mobile applications for platforms like Windows, iOS, and Android, through a single integrated development environment (IDE). We will discuss how to create a Static Resource using Xamarin.Forms (or) cross-platform from VS2017.

There are many plugins available for Xamarin.Forms including Stack Layout, Label, and button.

Tools

Windows 10 (Recommended)

Visual Studio 2017 Community/Enterprise/Professional Edition (Software available online at https://www.visualstudio.com/downloads/)

The steps given below are required to be followed in order to design Static Resorce View in Xamarin.Forms, using Microsoft Visual Studio 2017.

StackLayout

 

Step 1

Go to Visual Studio 2017.

Click File —> New —> Project or use shortcut (Ctrl+Shift+N).

 

Step 2

Go to Visual C# --> Cross Platform –> Blank App (Xamarin.Forms or native); change your application name and click the "OK" button.

 

Step 3

After this, go to New Cross Platform App, select Blank App. For UI technology, there are two types; let's select Xamarin.Forms. Similarly, for code sharing strategy, we select Portable Class Library (PCL) and click the “OK” button.

 

Step 4

In this step, go to Select (Portable) page and double click on HomePage.XAML. Then, wait for a few seconds.

 

Step 5

Click HomePage.xaml Page Designer View, wait for some time until the Designer View is visible. Insert the code given below in HomePage.xaml and save it.

 

Code

Xaml Code<?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="StaticResourceDemo.HomePage"
BackgroundColor="Black">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="MyLabelStyle" TargetType="Label">
    <Setter Property="TextColor" Value="Green"/>
    <Setter Property="FontSize" Value="40"/>
</Style>
    <Style x:Key="MyEntryStyle" TargetType="Entry">
    <Setter Property="TextColor" Value="Yellow"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
    <StackLayout>
        <Label Text="YourName" Style="{StaticResource MyLabelStyle}"/>
        <Entry Text="Ravishankar" Style="{StaticResource MyEntryStyle}"/>
        <Label Text="DOB" Style="{StaticResource MyLabelStyle}"/>
        <Entry Text="22-04-1999" Style="{StaticResource MyEntryStyle}"/>
        <Label Text="Email" Style="{StaticResource MyLabelStyle}"/>
        <Entry Text="[email protected]" Style="{StaticResource MyEntryStyle}"/>
        <Label Text="MOBILE NO" Style="{StaticResource MyLabelStyle}"/>
        <Entry Text="1234567890" Style="{StaticResource MyEntryStyle}"/>
    </StackLayout>
</ContentPage>

Step 6

In this step, click on App.cs page and create a new class.

public App()
{
   MainPage = new HomePage();
}

Step 7

After the process is complete, right click on Solution Explorer. There will be project content and more options available. Click on “Set StratUp Project”.

 

Step 8

Then, appears Solution Property page.  Mark the “Multiple StratUp Projects:” option. Just select Start option for Droid and UWP projects. I have selected these two because I have Android and Windows emulators only but you can add iOS option too.

 

Step 9

Now, click on Build option at the top of the toolbar and select Configuration Manager…

 

Step 10

Mark the Build and Deploy check boxes for Android (Droid) and Windows (UWP).

 

Step 11

Now, run the application.

 

Step 12

 

OUTPUT

Process is complete and the output appears as desired. 

 

Your Static Resource application is created successfully.

SUMMARY

In this article, you learned how to create Static Resource application using Xamarin.Forms with .NET Standard libraries.

If you have any questions/ feedback/ issues, please write in the comment box.