Fixes the image button rendering

BookAStar/BookAStar/BookAStar.csproj

@@ -185,6 +185,7 @@
     <Compile Include="ViewModels\EstimateAndBilling\EditEstimateViewModel.cs" />
     <Compile Include="ViewModels\UserProfile\UserLoginViewModel.cs" />
     <Compile Include="ViewModels\ViewModelBase.cs" />
+    <Compile Include="Views\ImageButton.cs" />
     <Compile Include="Views\MarkdownView.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="Pages\Oooops\SearchPage.xaml.cs">

BookAStar/BookAStar/Helpers/UserHelpers.cs

@@ -13,7 +13,6 @@ namespace BookAStar.Helpers
 
     public static class UserHelpers
     {
-
         public static ImageSource Avatar(string avatarPath)
         {
             var result = avatarPath == null ?

BookAStar/BookAStar/Pages/UserProfile/UserProfilePage.xaml

@@ -10,15 +10,26 @@
 
 
   <ScrollView>
+    <ScrollView.Padding>
+      <OnPlatform x:TypeArguments="Thickness"
+                  Android="20,20,20,20"
+                  WinPhone="20,20,20,20"
+                  iOS="20,40,20,20" />
+    </ScrollView.Padding>
     <StackLayout BoxView.Color="{StaticResource ContentBackgroundColor}" Spacing="10,10,10,10" >
 
       <StackLayout VisualElement.IsVisible="{Binding HaveAnUser}">
-
-        <Label Text="{Binding UserName}" Style="{StaticResource LabelPageHeadingStyle}"
-                                         HorizontalTextAlignment="Center"
-                                         LineBreakMode="WordWrap" XAlign="Center"
-           ></Label>
-        <Image Source="{Binding User.AvatarSource}"></Image>
+       
+        <views:ImageButton
+          x:Name="AvatarButton" 
+          ImageHeightRequest="80"
+          ImageWidthRequest="80"
+          Source="{Binding Avatar}"
+          IsEnabled="true"
+          BackgroundColor="#01abdf"
+          Orientation="ImageToLeft"
+          Text="{Binding UserName}"
+          TextColor="#ffffff"></views:ImageButton>
         <!--
         
         <controls:ImageButton

BookAStar/BookAStar/Pages/UserProfile/UserProfilePage.xaml.cs

@@ -11,8 +11,7 @@ namespace BookAStar.Pages.UserProfile
         public UserProfilePage()
         {
             InitializeComponent();
-          // AvatarButton.Clicked += AvatarButton_Clicked;
-           
+            AvatarButton.Clicked += AvatarButton_Clicked;
         }
 
         private void AvatarButton_Clicked (object sender, EventArgs e)

BookAStar/BookAStar/Views/ImageButton.cs

@@ -0,0 +1,157 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Linq.Expressions;
+using System.Text;
+using System.Threading.Tasks;
+using Xamarin.Forms;
+using XLabs.Enums;
+
+namespace BookAStar.Views
+{
+    public class ImageButton : Button
+    {
+        /// <summary>
+        /// Backing field for the Image property.
+        /// </summary>
+        public static readonly BindableProperty SourceProperty = BindableProperty.Create(
+            (Expression<Func<ImageButton, ImageSource>>)(w => w.Source),
+            null,
+            BindingMode.OneWay,
+            null,
+            (bindable, oldvalue, newvalue) => ((VisualElement)bindable).ToString());
+
+        /// <summary>
+        /// Backing field for the Image property.
+        /// </summary>
+        public static readonly BindableProperty DisabledSourceProperty = BindableProperty.Create(
+            (Expression<Func<ImageButton, ImageSource>>)(w => w.DisabledSource),
+            null,
+            BindingMode.OneWay,
+            null,
+            (bindable, oldvalue, newvalue) => ((VisualElement)bindable).ToString());
+
+        /// <summary>
+        /// Backing field for the image width property.
+        /// </summary>
+        public static readonly BindableProperty ImageWidthRequestProperty =
+            BindableProperty.Create<ImageButton, int>(
+                p => p.ImageWidthRequest, default(int));
+
+        /// <summary>
+        /// Backing field for the image height property.
+        /// </summary>
+        public static readonly BindableProperty ImageHeightRequestProperty =
+            BindableProperty.Create<ImageButton, int>(
+                p => p.ImageHeightRequest, default(int));
+
+        /// <summary>
+        /// Backing field for the orientation property.
+        /// </summary>
+        public static readonly BindableProperty OrientationProperty =
+            BindableProperty.Create<ImageButton, ImageOrientation>(
+                p => p.Orientation, ImageOrientation.ImageToLeft);
+
+        /// <summary>
+        /// Backing field for the tint color property.
+        /// </summary>
+        public static readonly BindableProperty ImageTintColorProperty =
+            BindableProperty.Create<ImageButton, Color>(
+                p => p.ImageTintColor, Color.Transparent);
+
+        /// <summary>
+        /// Backing field for the disbaled tint color property.
+        /// </summary>
+        public static readonly BindableProperty DisabledImageTintColorProperty =
+            BindableProperty.Create<ImageButton, Color>(
+                p => p.DisabledImageTintColor, Color.Transparent);
+
+        /// <summary>
+        /// Gets or sets the ImageSource to use with the control.
+        /// </summary>
+        /// <value>
+        /// The Source property gets/sets the value of the backing field, SourceProperty.
+        /// </value>
+        [TypeConverter(typeof(ImageSourceConverter))]
+        public ImageSource Source
+        {
+            get { return (ImageSource)GetValue(SourceProperty); }
+            set { SetValue(SourceProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the ImageSource to use with the control.
+        /// </summary>
+        /// <value>
+        /// The Source property gets/sets the value of the backing field, SourceProperty.
+        /// </value>
+        [TypeConverter(typeof(ImageSourceConverter))]
+        public ImageSource DisabledSource
+        {
+            get { return (ImageSource)GetValue(DisabledSourceProperty); }
+            set { SetValue(DisabledSourceProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets The orientation of the image relative to the text.
+        /// </summary> 
+        /// <value>
+        /// The Orientation property gets/sets the value of the backing field, OrientationProperty.
+        /// </value> 
+        public ImageOrientation Orientation
+        {
+            get { return (ImageOrientation)GetValue(OrientationProperty); }
+            set { SetValue(OrientationProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the requested height of the image.  If less than or equal to zero than a 
+        /// height of 50 will be used.
+        /// </summary>
+        /// <value>
+        /// The ImageHeightRequest property gets/sets the value of the backing field, ImageHeightRequestProperty.
+        /// </value> 
+        public int ImageHeightRequest
+        {
+            get { return (int)GetValue(ImageHeightRequestProperty); }
+            set { SetValue(ImageHeightRequestProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the requested width of the image.  If less than or equal to zero than a 
+        /// width of 50 will be used.
+        /// </summary>
+        /// <value>
+        /// The ImageHeightRequest property gets/sets the value of the backing field, ImageHeightRequestProperty.
+        /// </value> 
+        public int ImageWidthRequest
+        {
+            get { return (int)GetValue(ImageWidthRequestProperty); }
+            set { SetValue(ImageWidthRequestProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the tint color of the image 
+        /// </summary>
+        /// <value>
+        /// The ImageTintColor property gets/sets the value of the backing field, ImageTintColorProperty.
+        /// </value> 
+        public Color ImageTintColor
+        {
+            get { return (Color)GetValue(ImageTintColorProperty); }
+            set { SetValue(ImageTintColorProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the tint color of the image when the button is disabled
+        /// </summary>
+        /// <value>
+        /// The DisabledImageTintColor property gets/sets the value of the backing field, DisabledImageTintColorProperty.
+        /// </value> 
+        public Color DisabledImageTintColor
+        {
+            get { return (Color)GetValue(DisabledImageTintColorProperty); }
+            set { SetValue(DisabledImageTintColorProperty, value); }
+        }
+    }
+}