ListView inMVVM

XamlPage(View)

<ContentPage.Content>

    <StackLayout Orientation="Vertical">

      <ListView x:Name="lstPersons" ItemsSource="{Binding PersonsList}" >

        <ListView.ItemTemplate>

          <DataTemplate>

            <ViewCell>

              <StackLayout Orientation="Horizontal">

                <Label Text="{Binding PersonName}" VerticalOptions="Start" HorizontalOptions="StartAndExpand"/>

                <Label Text="{Binding PersonAddress}" VerticalOptions="Start" HorizontalOptions="StartAndExpand"/>

                <Label Text="{Binding PersonId}" VerticalOptions="Start" HorizontalOptions="StartAndExpand"/>

              </StackLayout>

            </ViewCell>

          </DataTemplate>

        </ListView.ItemTemplate>

      </ListView>

    </StackLayout>

  </ContentPage.Content>

Class(Model)

class Person

    {

        public string PersonName { set; get; }

        public string PersonAddress { set; get; }

        public int PersonId { set; get; }

    }

ViewModelClass

 class HomePageViewModel

    {

        public HomePageViewModel()

        {

            bindPersonsList();

        }

       private void bindPersonsList()

        {

            _PersonsList.Clear();

            _PersonsList.Add(new Person { PersonName = "Ramesh", PersonAddress = "Kandukur", PersonId = 1 });

            _PersonsList.Add(new Person { PersonName = "Venakt", PersonAddress = "Hyderabad", PersonId = 2 });

            _PersonsList.Add(new Person { PersonName = "Chiru", PersonAddress = "Kanigiri", PersonId = 3 });

            _PersonsList.Add(new Person { PersonName = "Subbu", PersonAddress = "Chirala", PersonId = 4 });

            _PersonsList.Add(new Person { PersonName = "Ramesh", PersonAddress = "Kandukur", PersonId = 1 });

            _PersonsList.Add(new Person { PersonName = "Ramesh", PersonAddress = "Kandukur", PersonId = 1 });

            _PersonsList.Add(new Person { PersonName = "Ramesh", PersonAddress = "Kandukur", PersonId = 1 });

        }

        private ObservableCollection<Person> _PersonsList = new ObservableCollection<Person>();

        public ObservableCollection<Person> PersonsList

        {

            set

            {

                _PersonsList = value;

            }

            get

            {

                return _PersonsList;

            }

        }

    }

ListView BackGround change

We Can Insert This Was In Xaml.cs File

lstPersons.BackgroundColor = Color.Red;



other wise xaml file

we can mention x


<ListView x:Name="lstPerson" ItemsSource="{Binding PersonsList}" >
        <ListView.BackgroundColor>
          <OnPlatform x:TypeArguments="Color">
            <OnPlatform.Android>#00FF00</OnPlatform.Android>
          </OnPlatform>
        </ListView.BackgroundColor>

Xamarin.Forms Circle Image for iOS

(If U Want Full http://www.codeproject.com/Tips/832752/Xamarin-Forms-Circle-Image-for-iOS

Using the Code

Just put the class in the shared project, and the renderer in the iOS project.

The Renderer

Hide   Shrink    Copy Code

using System;
using Xamarin.Forms;
using MonoTouch.UIKit;
using Xamarin.Forms.Platform.iOS;
using System.Drawing;
using RBVRenderer;
using RBVRenderer.iOS;

[assembly: ExportRendererAttribute(typeof(CircleImage), typeof(CircleImageRenderer))]
namespace RBVRenderer.iOS
{

    public class CircleImageRenderer : ViewRenderer<CircleImage,UIView>
    {
        UIImageView imageView;
        protected override void OnElementChanged(ElementChangedEventArgs<CircleImage> e)
        {
            base.OnElementChanged(e);

            var rbv = e.NewElement;
            if (rbv != null) {

                var mainView = new UIView();

                imageView = new UIImageView (UIImage.FromBundle(rbv.FileSource));
                imageView.Frame = new RectangleF 
                (0, 0, (float)rbv.WidthRequest, (float)rbv.HeightRequest);
                imageView.Layer.CornerRadius = imageView.Frame.Size.Width / 2;
                if (rbv.HasBorder) {
                    imageView.Layer.BorderColor = rbv.BorderColor.ToCGColor();
                    imageView.Layer.BorderWidth = 2;
                }
                imageView.ClipsToBounds = true;

                mainView.Add (imageView);

                SetNativeControl(mainView);
            }
        }

        protected override void OnElementPropertyChanged
        (object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == CircleImage.HasBorderProperty.PropertyName) {
                if (Element.HasBorder) {
                    imageView.Layer.BorderWidth = 2;
                    imageView.Layer.BorderColor = this.Element.BorderColor.ToCGColor ();
                } else {
                    imageView.Layer.BorderWidth = 0;
                }
            }
        }
    }
}

The Class

Hide   Shrink    Copy Code

using System;
using Xamarin.Forms;

namespace RBVRenderer
{
    public class CircleImage : Image
    {
        public static readonly BindableProperty FileSourceProperty =
            BindableProperty.Create<CircleImage, string>(p => p.FileSource, "");

        /// <summary>
        /// string filename
        /// </summary>
        /// <value>The source.</value>
        public string FileSource
        {
            get { return (string)base.GetValue(FileSourceProperty);}
            set { base.SetValue(FileSourceProperty, value);}
        }

        public static readonly BindableProperty BorderColorProperty =
            BindableProperty.Create<CircleImage, Color>(p => p.BorderColor, Color.White);

        public Color BorderColor
        {
            get { return (Color)base.GetValue(BorderColorProperty);}
            set { base.SetValue(BorderColorProperty, value);}
        }

        public static readonly BindableProperty HasBorderProperty =
            BindableProperty.Create<CircleImage, bool>(p => p.HasBorder, false);

        public bool HasBorder
        {
            get { return (bool)base.GetValue(HasBorderProperty);}
            set { base.SetValue(HasBorderProperty, value);}
        }
    }
}

Usage

Hide   Copy 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"
    xmlns:me="clr-namespace:RBVRenderer;assembly=RBVRenderer"
    x:Class="RBVRenderer.MainPage">
    <ContentPage.Content>
        <StackLayout Padding="20" 
        Spacing="20" BackgroundColor="Blue">

            <me:CircleImage  
                    x:Name="rbi" 
                    WidthRequest="50" 
                    HeightRequest="50"  
                    BorderColor="White"
                    FileSource="cyansquare.png">
            </me:CircleImage>

            <Label Text="Has Border" />
            <Switch BindingContext="{x:Reference rbi}"
                IsToggled="{Binding HasBorder, Mode=OneWayToSource}" />

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

How to Write Circle Image Code in XAML Page

Usage

Instead of using an Image simply use a CircleImage instead!

You MUST set the width & height requests to the same value and you will want to use AspectFill. Here is a sample:

new CircleImage
{
  BorderColor = Color.White,
  BorderThickness = 3,
  HeightRequest = 150,
  WidthRequest = 150,
  Aspect = Aspect.AspectFill,
  HorizontalOptions = LayoutOptions.Center,
  Source = UriImageSource.FromUri(new Uri("http://upload.wikimedia.org/wikipedia/commons/5/55/Tamarin_portrait.JPG"))
}

XAML:

First add the xmlns namespace:

xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"

Then add the xaml:

<controls:CircleImage Source="{Binding Image}" Aspect="AspectFill">
  <controls:CircleImage.WidthRequest>
    <OnPlatform x:TypeArguments="x:Double"
      iOS="55"
      Android="55"
      WinPhone="75"/>
   </controls:CircleImage.WidthRequest>
<controls:CircleImage.HeightRequest>
    <OnPlatform x:TypeArguments="x:Double"
      iOS="55"
      Android="55"
      WinPhone="75"/>
   </controls:CircleImage.HeightRequest>
</controls:CircleImage>

If U want full Data About This Please Go through this link    https://github.com/jamesmontemagno/ImageCirclePlugin

Circle Image Popular Links

https://blog.xamarin.com/elegant-circle-images-in-xamarin-forms/

http://magenic.com/Blog/Post/23/Xamarin-Forms-Circle-Images

Circleimage Custom renderer

Frist We have to create one CircleImage Class

using System;
using Xamarin.Forms;

namespace ImageCircle.Forms.Plugin.Abstractions
{
    /// <summary>
    /// ImageCircle Interface
    /// </summary>
    public class CircleImage : Image
    {
        /// <summary>
        /// Thickness property of border
        /// </summary>
        public static readonly BindableProperty BorderThicknessProperty =
          BindableProperty.Create<CircleImage, int>(
            p => p.BorderThickness, 0);

        /// <summary>
        /// Border thickness of circle image
        /// </summary>
        public int BorderThickness
        {
            get { return (int)GetValue(BorderThicknessProperty); }
            set { SetValue(BorderThicknessProperty, value); }
        }

        /// <summary>
        /// Color property of border
        /// </summary>
        public static readonly BindableProperty BorderColorProperty =
          BindableProperty.Create<CircleImage, Color>(
            p => p.BorderColor, Color.White);

        /// <summary>
        /// Border Color of circle image
        /// </summary>
        public Color BorderColor
        {
            get { return (Color)GetValue(BorderColorProperty); }
            set { SetValue(BorderColorProperty, value); }
        }

        /// <summary>
        /// Color property of fill
        /// </summary>
        public static readonly BindableProperty FillColorProperty =
          BindableProperty.Create<CircleImage, Color>(
            p => p.FillColor, Color.Transparent);

        /// <summary>
        /// Fill color of circle image
        /// </summary>
        public Color FillColor
        {
            get { return (Color)GetValue(FillColorProperty); }
            set { SetValue(FillColorProperty, value); }
        }

    }
}

Xamarin Concepts

1.Layouts
2.Controls
3.Properties
4.Events