Wednesday 25 October 2017

Xamarin forms Cool Image Circle [Tutorial 21]

Step1:Design Your 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"
             xmlns:local="clr-namespace:App32"
             x:Class="App32.MainPage"
               xmlns:image="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
             BackgroundColor="Black">
    <ContentPage.Content>
      
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="Tony-Stark" TextColor="White" HorizontalOptions="Center"></Label>
            <image:CircleImage Source="http://beardoholic.com/wp-content/uploads/2017/01/beardtrendbeardstyling.png"
        Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
        BorderColor="White" BorderThickness="2">
            </image:CircleImage>
            <Label></Label>
            <Label></Label>
            <image:CircleImage Source="https://wallpaperclicker.com/storage/wallpaper/love-heart-artwork-painting-80416152.jpg"
        Aspect="AspectFill" WidthRequest="80" HeightRequest="80"
        BorderColor="White" BorderThickness="2">
            </image:CircleImage>
            <Label></Label>
            <Label></Label>
            <Label Text="Pepper" TextColor="White" HorizontalOptions="Center"></Label>
            <image:CircleImage Source="https://i.pinimg.com/originals/1f/4e/54/1f4e54e31465024c152c879de50b0b50.jpg"
        Aspect="AspectFill" WidthRequest="120" HeightRequest="120"
        BorderColor="White" BorderThickness="2" HorizontalOptions="End">
            </image:CircleImage>
     
        </StackLayout>
    </ContentPage.Content>
</ContentPage>
Step 2:
Get App.xaml.cs to MainPage

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

using Xamarin.Forms;

namespace App32
{
 public partial class App : Application
 {
  public App ()
  {
   InitializeComponent();

   MainPage = new App32.MainPage();
  }

  protected override void OnStart ()
  {
   // Handle when your app starts
  }

  protected override void OnSleep ()
  {
   // Handle when your app sleeps
  }

  protected override void OnResume ()
  {
   // Handle when your app resumes
  }
 }
}
Step 3: Download The Image Circle Plugin
https://github.com/jamesmontemagno/ImageCirclePlugin
Step4:
Hola Enjoy then NICE look and Feel Of Image Circle Inside your UI

No comments:

Post a Comment