How to add image to Email behaviour - xamarin

Question

I would like to know how to add image to the behaviour, actually i am trying to write the email behaviour where i am capable of changing the entry background but along with that i would like to add an image for it.
My xaml:
<StackLayout>
<Entry Placeholder="Enter a System.Double">
<Entry.Behaviors>
<local:CustomBehavior />
</Entry.Behaviors>
</Entry>
</StackLayout>
My Behaviour class:
public class CustomBehavior: Behavior<Entry>
{
private const string digitRegex = #"^(?("")("".+?(?<!\\)""#)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])#))" +
#"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9]))$";
protected override void OnAttachedTo(Entry entry)
{
entry.TextChanged += OnEntryTextChanged;
base.OnAttachedTo(entry);
}
protected override void OnDetachingFrom(Entry entry)
{
entry.TextChanged -= OnEntryTextChanged;
base.OnDetachingFrom(entry);
}
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
Entry entry;
bool isValid;
entry =(Entry)sender;
isValid = Regex.IsMatch(e.NewTextValue, digitRegex);
entry.BackgroundColor = isValid ? Color.Default : Color.Red;
}
}

Answer 1

1st. For your request you have to add a separate Image to your layout, in your case:
<StackLayout
Orientation="Horizontal">
<Entry Placeholder="Enter a System.Double">
<Entry.Behaviors>
<local:CustomBehavior x:Name="customValidator"/>
</Entry.Behaviors>
</Entry>
<Image
HeightRequest="24"
WidthRequest="24"
Aspect="AspectFit"
IsVisible="{Binding Source={x:Reference customValidator},
Path=IsVisible}"
Style="{Binding Source={x:Reference customValidator},
Path=IsValid,
Converter={StaticResource boolToStyleImage}}"/>
</StackLayout>
Pay attention to the x:Name="" attribute as that is necessary to be able to reference that custom behavior within this xaml file
2nd. Create BindableProperties on your 'CustomBehavior' for two fields on which you'll bind the status of your image for your entry
public class CustomBehavior: Behavior<Entry>
{
private const string digitRegex = #"^(?("")("".+?(?<!\\)""#)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])#))" +
#"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9]))$";
static readonly BindablePropertyKey IsValidPropertyKey = BindableProperty.CreateReadOnly ("IsValid", typeof (bool), typeof (CustomBehavior), false);
public static readonly BindableProperty IsValidProperty = IsValidPropertyKey.BindableProperty;
static readonly BindablePropertyKey IsVisiblePropertyKey = BindableProperty.CreateReadOnly ("IsVisible", typeof (bool), typeof (CustomBehavior), false);
public static readonly BindableProperty IsVisibleProperty = IsVisiblePropertyKey.BindableProperty;
private const string FRIEND = "friend";
private const string FRIENDS = "friends";
public bool IsValid
{
get { return (bool)base.GetValue (IsValidProperty); }
private set { base.SetValue (IsValidPropertyKey, value); }
}
public bool IsVisible
{
get { return (bool)base.GetValue (IsVisibleProperty); }
private set { base.SetValue (IsVisiblePropertyKey, value); }
}
protected override void OnAttachedTo(Entry entry)
{
entry.TextChanged += OnEntryTextChanged;
base.OnAttachedTo(entry);
}
protected override void OnDetachingFrom(Entry entry)
{
entry.TextChanged -= OnEntryTextChanged;
base.OnDetachingFrom(entry);
}
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
if (e.NewTextValue.Length > 0)
{
IsVisible = true;
Entry entry =(Entry)sender;
IsValid = Regex.IsMatch(e.NewTextValue, digitRegex);
if(IsValid) // Check only if we have a valid email
{
// Here we validate if the email contains our requirements
String email = entry.Text;
int pos = email.IndexOf("#"); // Exclude the domain
string username = email.Substring(0, pos);
if(username.Contains(FRIEND) || username.Contains(FRIENDS))
{
IsValid = true;
}else
IsValid = false;
}
}
}else
IsVisible = false;
}
}
3d. Create a simple ValueConverter class which will convert a boolean value to one of our objects of type 'T' depending on what we'll append this converter to.
namespace YourApp
public class BooleanToObjectConverter<T> : IValueConverter
{
public T FalseObject { set; get; }
public T TrueObject { set; get; }
public object Convert (object value, Type targetType,
object parameter, CultureInfo culture)
{
return (bool)value ? this.TrueObject : this.FalseObject;
}
public object ConvertBack (object value, Type targetType,
object parameter, CultureInfo culture)
{
return ((T)value).Equals (this.TrueObject);
}
}
4th. Add this style to ResourceDictionary tag on your App.xaml file which will declare the TrueObject(Style for a valid email) and the FalseObject(Style for an invalid email).
Replace "your_wrong_image_here.png" and "your_correct_image_here.png" to your desired images
<Application
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourApp.App"
xmlns:statics="clr-namespace:YourApp">
<Application.Resources>
<!-- Application resource dictionary -->
<ResourceDictionary>
<statics:BooleanToObjectConverter x:Key="boolToStyleImage"
x:TypeArguments="Style">
<statics:BooleanToObjectConverter.FalseObject>
<Style TargetType="Image">
<Setter Property="HeightRequest" Value="24" />
<Setter Property="Source"
Value="your_wrong_image_here.png" />
</Style>
</statics:BooleanToObjectConverter.FalseObject>
<statics:BooleanToObjectConverter.TrueObject>
<Style TargetType="Image">
<Setter Property="HeightRequest" Value="24" />
<Setter Property="Source"
Value="your_correct_image_here.png" />
</Style>
</statics:BooleanToObjectConverter.TrueObject>
</statics:BooleanToObjectConverter>
</ResourceDictionary>
</Application.Resources>
</Application>
This should fulfill your needs, just be careful from copy-paste errors as you have different class names on your project!