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