Friday, 10 April 2015

StringToColorConverter for Xamarin.Forms

You may have a requirement to bind a string property to a Color property, such as TextColor. If this is the case then you will need to create a converter to perform the conversion from string to Color. The following is a sample of such a converter :-

Firstly, the converter :-

using System;
using System.Globalization;
using Xamarin.Forms;
namespace LabelTextColorSample
{
    public class StringToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            string valueAsString = value.ToString();
            switch (valueAsString)
            {
                case (""):
                    {
                        return Color.Default;
                    }
                case ("Accent"):
                    {
                        return Color.Accent;
                    }
                default:
                    {
                        return Color.FromHex(value.ToString());
                    }
            }
        }
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }
}

Then the XAML which consumes it :-


    
        
            
        
    
    
Then the setting of the BindingContext :-

using Xamarin.Forms;
namespace LabelTextColorSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            this.BindingContext = MyViewModel.Instance;
        }
    }
}

And finally the ViewModel :-

namespace LabelTextColorSample
{
    public class MyViewModel
    {
        private static MyViewModel _instance;
        public static MyViewModel Instance
        {
            get { return _instance ?? (_instance = new MyViewModel()); }
        }
        public string MyTextColor
        {
            get { return "#00FF00"; }
        }
    }
}

Hope this is helpful.

Wednesday, 8 April 2015

Range Slider Renderer for Xamarin.Forms

Based on the Range Slider component in the Xamarin Components store, I have created a renderer so that the Range Slider can be used in Xamarin.Forms.

Firstly, I created a RangeSlider control in the Xamarin.Forms PCL, as follows :-
using Xamarin.Forms;

namespace RangeSliderSample
{
 public class RangeSlider : View
 {
  public static readonly BindableProperty LeftValueProperty =
   BindableProperty.Create(p => p.LeftValue, 0f);

  public float LeftValue
  {
   get { return (float) GetValue(LeftValueProperty); }
   set { SetValue(LeftValueProperty, value); }
  }

  public static readonly BindableProperty RightValueProperty =
   BindableProperty.Create(p => p.RightValue, 0f);

  public float RightValue
  {
   get { return (float) GetValue(RightValueProperty); }
   set { SetValue(RightValueProperty, value); }
  }

  public static readonly BindableProperty MaxValueProperty =
   BindableProperty.Create(p => p.MaxValue, 1f);

  public float MaxValue
  {
   get { return (float) GetValue(MaxValueProperty); }
   set { SetValue(MaxValueProperty, value); }
  }

  public static readonly BindableProperty MinValueProperty =
   BindableProperty.Create(p => p.MinValue, 0f);

  public float MinValue
  {
   get { return (float) GetValue(MinValueProperty); }
   set { SetValue(MinValueProperty, value); }
  }

  public static readonly BindableProperty StepProperty =
   BindableProperty.Create(p => p.Step, 0f);

  public float Step
  {
   get { return (float) GetValue(StepProperty); }
   set { SetValue(StepProperty, value); }
  }
 }
}

I then placed this control on a XAML page :-

 
  
  
  
 



I then created a Custom Renderer in the Android project :-
using RangeSlider;
using RangeSliderSample.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(RangeSliderSample.RangeSlider), typeof(RangeSliderRenderer))]
namespace RangeSliderSample.Droid
{
 public class RangeSliderRenderer : ViewRenderer
 {
  private RangeSliderView _slider;
  
  protected override void OnElementChanged(ElementChangedEventArgs e)
  {
   base.OnElementChanged(e);

   var rangeSlider = e.NewElement as RangeSlider;

   if (rangeSlider != null)
   {
    _slider = new RangeSliderView(Context, rangeSlider.MinValue, rangeSlider.MaxValue, rangeSlider.Step);

    _slider.LeftValueChanged += value =>
    {
     rangeSlider.LeftValue = _slider.LeftValue;
    };

    _slider.RightValueChanged += value =>
    {
     rangeSlider.RightValue = _slider.RightValue;
    };

    SetNativeControl(_slider);
   }
  }
 }
}

The complete solution is here :-
http://www.smartmobiledevice.co.uk/Samples/Xamarin/RangeSliderSample.zip

Xamarin Android Player and McAfee

I normally use a device for all my debugging in Xamarin however I thought I would try the Xamarin Android Player.

After installing and downloading an emulator image I tried starting the emulator however I was present with the following error :-

 OpenGL server is unreachable. Please check that Xamarin Android Player is allowed through your firewall on public networks.

 As I use McAfee, my firewall settings are handled by McAfee rather than the Windows Firewall. I viewed the Firewall settings for the Xamarin Android Player (AndroidPlayer) under "View firewall and anti-spam settings > Firewall > Internet Connections for Programs", and it was set to use "Designated Ports". Editing this entry and setting Incoming and Outgoing to "Open ports to Work and Home networks" now allows me to use the Xamarin Android Player.