XFHACKS-009 Frame with Border Image!

Ever wanted to have a Xamarin.Forms.Frame with a Border Image? Or have a Border Image around any of your Xamarin.Forms Elements? Welcome to another lightening short post of me hacking around Xamarin.Forms elements!

The Xamarin.Forms.Frame by default only has a boring BorderColor property without even letting you to set the Width of the Border or even set an Image as the Border.

So I thought of making use of my own crazy imagination and hack my way around to get this to work right from Xamarin.Forms itself!

No custom renderers, no platform specific code and no third party libraries! Just by using pure out of the box Xamarin.Forms! 😉

Sneak Peak!

That’s what we gonna be build yol! A Frame with a Border Image property along with the Border Width! 😉

XFHACKS Recipe!

Buckle up fellas, its recipe time! 😉 I’ve been writing quite a few hacks around Xamarin.Forms Frame element, and this recipe is also going to be based on my previous posts, XFHACKS-007 Frame with a Border Width! I would rather recommend you read up on that before continuing here, regardless I would explain the same concept in short here as well. Basically we’re placing a Frame element (child) inside another Frame element (parent) with a Margin value which will create visually a single frame with a Border as our choice of the Margin.

Now keeping that in mind for our Border Image we’re simply going to add Grid into the parent Frame and place an Image in it, while using the IsClippedToBounds=”True” property in both parent Frame and Grid Layout to avoid the Image element rendering itself outside the bounds of the parent Frame. Then on top of that Image inside the same Grid we’re placing our child Frame that I mentioned before with the Margin property that renders the Border aspect of the whole view.

Just like that you get the entire custom element put together which you could use as a single Frame element with a Border Image! 😉

Code!

Behold the golden XAML code!

<!--  Frame with Border Image  -->
<Frame
    Padding="0"
    CornerRadius="7"
    HasShadow="False"
    IsClippedToBounds="True">
    <Grid HeightRequest="50" IsClippedToBounds="True">
        <Image Aspect="AspectFill" 
            Source="{extensions:ImageResource   
            XFHacks.Resources.abstractbackground1.jpg}" />
        <Frame
            Margin="5"
            Padding="0"
            BackgroundColor="White"
            CornerRadius="5"
            HasShadow="False"
            IsClippedToBounds="True">
            <!--
                Whatever the content you want to
                place inside the Frame goes in here
            -->
        </Frame>
    </Grid>
</Frame>

 

There you have the Frame with Border Image in XAML just like I explained earlier. We have the parent Frame with IsClippedToBounds and CornerRadius property, the Grid and the Image with form the Border Image. Notice the Padding=”0″, since we want the Image with the Grid to spread across the parent Frame. You could change the CornerRadius as you wish to control the curved corner of the Frame.

I have given a HeightRequest value to the Grid just to make sure it renders to the exact size I need, or you could even let the whole element freely size itself according to the Element inside the whole custom Frame.  Then on top of that we have the child Frame with the Margin property cropping our the center of the Image element that’s placed under it, thus forming the Border Image as we wanted! 😀

Now let’s put it together and build something awesome! 😀

Fire it up!

Let me showcase the awesomeness of this with something fun!

 

There you go! 😀 Running side by side Android, iOS and UWP.

Grab it on Github!

https://github.com/UdaraAlwis/XFHacks

Well then, that’s it for now. More awesome stuff on the way!

Cheers! 😀 share the love!

XFHACKS-008 Label with Border and Background!

Ever wanted to have a Xamarin.Forms.Label, with a Border, or even better with a Background, or with a Corner Radius customization? Welcome to another lightening short post of me hacking around Xamarin.Forms elements!

By default Xamarin.Forms.Label doesn’t have a Border, Background neither a Corner Radius property, the only possible way to achieve that is by resorting to custom renderers. So I thought of making use of my own crazy imagination and hack my way around to get this to work right from Xamarin.Forms itself!

No custom renderers, no platform specific code and no third party libraries! Just by using pure out of the box Xamarin.Forms! 😉

Sneak Peak!

That’s what we gonna be build yol!

A Label with a Border and a Background, none other than with Corner Radius customization, a true dream come true for Xamarin.Forms developers! lol kidding! 😉

XFHACKS Recipe!

Buckle up fellas, its recipe time! 😉 Now this hack basically has mostly to do with my previous post, XFHACKS-007 Frame with a Border Width! If you would like to read more on detail about it then please check that article and come back here, but let me explain it in short form here though. Basically we’re placing a Frame element inside another Frame element with a Margin value which will create visually a single frame with a Border as our choice of the Margin.

Now for our Label, we’re going to place it inside that custom Frame we just built, giving it a nicely rendered border around it. You have the complete control over the Border Width property as explained in my previous article.

And the best part of it is that this Frame will resize itself according to the Label inside of it, since we’re not restricting it to any static values, whatever the Height or Width property you set to the Label, the border will follow it. Talking of Alignment of the Label you can freely use the Margin, HorizontalOptions and VerticalOptions to easily align the Label inside the Border. 😉

Code!

Behold the golden XAML code!

<!--  Label with a Border  -->
<Frame
    Padding="0"
    BackgroundColor="#2196F3"
    CornerRadius="7"
    HasShadow="False">
    <Frame
        Margin="2"
        Padding="5"
        BackgroundColor="White"
        CornerRadius="5"
        HasShadow="False">
        <Label
            BackgroundColor="Transparent"
            HorizontalOptions="Center"
            Text="Border with curved corners"
            TextColor="Black" />
    </Frame>
</Frame>

 

There you have the Label with a Border in XAML! Just like I explained above the two Frames rendering the Border around it. Feel free to change the Margin value of the child Frame element to increase or decrease the Border-Width. And both Frames CornerRadius are used to give a curved corners effect to the Border. Let’s see it in actions:

If you want to have curved sides for the Label Border, then simply increase the CornerRadius=”16″ parent Frame and CornerRadius=”14″ for the child Frame.

Now Imagine if you want to Align the Label inside the Border, then simply use the HorizontalOptions property as you wish, for example HorizontalOptions=”Start” and just to avoid the Label crashing with the border use the Margin property of the Label in whichever the direction you’re aligning your Label to, as an example Margin=”5,0,0,0″

How about that Background I promised earlier, well then simply set the child Frame’s background Color as you wish, and if you prefer to have a different Color for Border and Background, just make sure to set different colors to parent Frame’s Background color and child Frame’s background color.

Now how about having a Background Image, what you need to do is simply add an Image behind the Label using a Grid Layout by laying down both the elements on top of each other.

<!--  Label with a Background  -->
<Frame
    Padding="0"
    BackgroundColor="#2196F3"
    CornerRadius="7"
    HasShadow="False">
    <Frame
        Margin="2"
        Padding="0"
        BackgroundColor="White"
        CornerRadius="5"
        IsClippedToBounds="True"
        HasShadow="False">
        <Grid HeightRequest="30" IsClippedToBounds="True">
            <Image Aspect="AspectFill" Source="{extensions:ImageResource XFHacks.Resources.abstractbackground.jpg}" />
            <Label
                BackgroundColor="Transparent"
                FontAttributes="Bold"
                HorizontalOptions="Center"
                Text="With a Cool Background!"
                TextColor="White"
                VerticalOptions="Center" />
        </Grid>
    </Frame>
</Frame>

 

There you have it, the golden XAML! So what we have done here is basically the same concept but with a bit more icing on top, by removing the padding inside the child Frame allowing the Image background to stretch to on to the edge of the border. Then inside the child Frame we have a Grid Layout, and its got a HeightRequest property which determines the Height of the Label, meanwhile cropping out using IsClippedToBounds property, the excessive rendering of the Image inside that’s acting as the Background.

Now let’s put it together and fire it up! 😉

Fire it up!

Load your cannons, fire it up!

 

There you go! 😀 Running side by side Android, iOS and UWP.

A little Trick! 😉

Just like how I’ve implemented the Border and Background for the Label element, you could follow the same pattern and use this for any UI Element in Xamarin.Forms as you wish, such as Image, Editor, Slider, ListView, etc whichever you wish! 😉 Just replace that Label with the UI element of your choice! 😀

Grab it on Github!

https://github.com/UdaraAlwis/XFHacks

Well then, that’s it for now. More awesome stuff on the way!

Cheers! 😀 share the love!

XFHACKS-007 Frame with a Border Width!

Ever wanted to have a Xamarin.Forms.Frame with a Border which you can customize the Border-Width property? Welcome to another lightening short post of me hacking around Xamarin.Forms elements!

The Xamarin.Forms.Frame control is such a nice and useful UI element. One of the nicest features of it is the Border property, that draws a border around the View. But by default Xamarin.Forms doesn’t allow you to customize it, except for the BorderColor property, it is missing a very much needed property that even I personally wish if it had, that is the “Border Width” property, so that we can renderer a nice Border around the Frame as whatever the thickness we wish.

So I thought of making use of my own crazy imagination and hack my way around to get this to work right from Xamarin.Forms itself!

No custom renderers, no platform specific code and no third party libraries! Just by using pure out of the box Xamarin.Forms! 😉

Sneak Peak!

That’s what we gonna be build yol! A Frame control with a Border Width property!

XFHACKS Recipe!

Buckle up fellas, its recipe time! 😉 So the idea here is to simply, build a custom control by adding a Frame Element inside of another Frame Element, like a View parent-child relationship, and giving some Margin property values to the child Frame, which creates a border-like visual around the child Frame, by the parent Frame. Here we can set the background color of the parent Frame as we wish, which will be rendered as the Border around the Frame, and the Margin property of the child Frame will determine the Width of the visible Border. So obviously since we need to push the child’s Frame throughout the panel of parent’s we’re setting the parent Frame’s Padding to zero. Then whatever the CornerRadius we want to set for our custom Frame will always be in a manner that the child Frame’s CornerRadius will be two points less than the parent Frame’s CornerRadius, this is to maintain the nice curved corner radius of the whole custom Frame once the border is rendered.

Also if you need to maintain the HasShadow feature for our custom Frame then you should only set it for the parent Frame, not the child Frame, and since we’re using our own custom built Border we are not going to be using the default BorderColor property of any of the Frames.

Code!

Behold the golden XAML code!

<!--  Frame with a Border Width  -->
<Frame
    Padding="0"
    BackgroundColor="#2196F3"
    CornerRadius="7"
    HasShadow="False">
    <Frame
        Margin="1"
        BackgroundColor="White"
        CornerRadius="5"
        HasShadow="False">
        <!--
            Whatever the content you want to
            place inside the Frame goes in here
        -->
    </Frame>
</Frame>

There we go, just like I explained the parent and child Frame positioned accordingly with the appropriate properties. Notice how I have set the Margin=”1″, which determines the Border Thickness or the Border Width, like I explained before.

Now you are ready to use our custom Frame with Border-Width just like you would as another Frame in Xamarin.Forms! Just place whatever the content you want to put inside the custom frame inside that child Frame as commented in the code snippet! 😉

Now let’s build something fun and fire it up! 😉

Fire it up!

Let me showcase the awesomeness of this with something fun, by comparing it with a default Xamarin.Forms Frame, and the coolness of being able to customize the Border-Width of a Frame! 😉

There you go, completely identical to the default Frame but packed with awesomeness!

Alright load your canons, fire it up!

   

Alright there you have it running on Android, iOS and UWP side by side! 😀

Grab it on Github!

https://github.com/UdaraAlwis/XFHacks

Well then, that’s it for now. More awesome stuff on the way!

Cheers! 😀 share the love!

XFHACKS-006 Password Entry with show/hide Text feature!

Ever wished if your Xamarin.Forms Password Entry control had the option to reveal, or show the Password text that the User types on demand, instead of the black dots? 😉  Even better, without any Custom Renderers or Platform Specific code? Welcome to another lightening short post of me hacking around Xamarin.Forms elements!

So in Xamarin.Forms to enable this feature usually you need to resort to creating Custom Renderers or some platform specific implementation, which is a tedious process and a complicated implementation. So I thought of making use of my own crazy imagination and hack my way around to get this to work right from Xamarin.Forms itself!

No custom renderers, no platform specific code and no third party libraries! Just by using pure out of the box Xamarin.Forms! 😉

Sneak Peak!

That’s what we gonna be build yol!

XFHACKS Recipe!

Let the recipe begin! So basically the idea here is to have two Entry elements which represents the Entry with IsPassword enabled and another Entry with IsPassword disabled, laid on top of each other inside a Grid layout. Also we’re going to switch the visibility of these two Entry controls on a Button click event which will also be laid on top of both the Entry elements, aligned to the right most corner of the whole Grid layout. Just to add some cheery to the icing, let’s have a Button with an Icon Image inside of it, which implementation I’ll be extracting from one of my previous XFHACKS articles, XFHACKS-005 Button with full control on Text and Icon! ! Give it a read if you’re curious! 😉

Since we’re maintaining two Entry elements, we need to make sure both of them have the same Text value at any point of the user’s interaction. So to make this happen we’re going use Element to Element binding in Xamarin.Forms, where as we are binding the Text field properties of both Entry controls to eachother. Thereby one Entry’s Text changes immediately reflects on the other one and so on.

Just to show some love for my architectural practices, I’m going to move the whole Button click event and the handling of the behavior logic of this control into a TriggerAction, aha! separation of concern or loosely coupled and no direct code behind dependency allowing for more re-usability! 😀

Code!

Behold the golden XAML code!

<Grid
   Grid.Row="1"
   Grid.Column="0"
   HeightRequest="45"
   HorizontalOptions="FillAndExpand"
   IsClippedToBounds="True">

   <!--  Entry Password  -->
   <Entry
      x:Name="EntryPassword"
      Grid.Row="0"
      Grid.Column="0"
      FontSize="Medium"
      IsPassword="True"
      IsVisible="True"
      Keyboard="Plain"
      Placeholder="Password"
      Text="{Binding Source={x:Reference EntryText}, Path=Text, Mode=TwoWay}" />

   <!--  Entry Text  -->
   <Entry
      x:Name="EntryText"
      Grid.Row="0"
      Grid.Column="0"
      FontSize="Medium"
      IsPassword="False"
      IsVisible="False"
      Keyboard="Plain"
      Placeholder="Password"
      Text="{Binding Source={x:Reference EntryPassword}, Path=Text, Mode=TwoWay}" />

   <!--  Button with Icon  -->
   <Grid
      Grid.Row="0"
      Grid.Column="0"
      Padding="0,0,3,0"
      HeightRequest="27"
      HorizontalOptions="End"
      IsClippedToBounds="True"
      VerticalOptions="Center"
      WidthRequest="35">

      <!--  Button Control  -->
      <Button x:Name="ShowPasswordButton" BackgroundColor="White">
         <Button.Margin>
            <OnPlatform x:TypeArguments="Thickness">
               <On Platform="Android" Value="-4,-6,-4,-6" />
               <On Platform="iOS" Value="0" />
            </OnPlatform>
         </Button.Margin>
         <Button.Triggers>
            <EventTrigger Event="Clicked">
               <triggers:ShowPasswordTriggerAction
                  EntryPasswordName="EntryPassword"
                  EntryTextName="EntryText"
                  IconImageName="ShowPasswordButtonIcon" />
            </EventTrigger>
         </Button.Triggers>
      </Button>

      <!--  Icon Image  -->
      <Image
         x:Name="ShowPasswordButtonIcon"
         HeightRequest="25"
         HorizontalOptions="Fill"
         InputTransparent="True"
         Source="{extensions:ImageResource XFHacks.Resources.showpasswordicon.png}"
         VerticalOptions="Fill"
         WidthRequest="25" />
   </Grid>

</Grid>

 

Here we go, explanation time! So the two Entry elements are laying on top of each other and bound to each other’s Text properties, while having one Entry as IsPassword=true and the other opposite. I have given names for the Elements because we need references of them to handle the behaviour inside our TriggerAction which I will show next.

Then the Button with the Icon Image Element is aligned to the very right corner of Parent layout, laying on top of both Entry elements. I have added some padding to it to avoid it conflicting with the border of the Entry in iOS and UWP, then for Android it shouldn’t really matter visually. There’s a HeightRequest=”27″ and WidthRequest=”35″ given to this Element group because I needed to have some horizontal space besides the Image icon visually. For the Image we’re using a EmbeddedResource type image, which makes things really easy for managing the Images.

Then for the Parent Grid Layout that holds all of these Elements together,is using IsClippedToBounds property to make sure everything holds inside the Bounds of the Grid as a single UI Element.

This is the most crucial part where inside the Button click event we’re invoking a TrigerAction called ShowPasswordTriggerAction which handles all the logic and behaviour of this custom control. And we’re passing in the names of the Elements we have assigned, into the Trigger so that we can look it up inside the TriggerAction, retrieve their runtime references and handle the behavior as we need. Pretty straightforward implementation there 😉

Next let’s look into the golden TriggerAction!

/// <summary>
/// The Trigger Action that will handle
/// the Show/Hide Passeword text
/// </summary>
public class ShowPasswordTriggerAction : TriggerAction<Button>
{
    public string IconImageName { get; set; }

    public string EntryPasswordName { get; set; }

    public string EntryTextName { get; set; }

    protected override void Invoke(Button sender)
    {
        // get the runtime references 
        // for our Elements from our custom control
        var imageIconView = ((Grid) sender.Parent)
                  .FindByName<Image>(IconImageName);
        var entryPasswordView = ((Grid) ((Grid) sender.Parent).Parent).FindByName<Entry>(EntryPasswordName);
        var entryTextView = ((Grid)((Grid)sender.Parent).Parent).FindByName<Entry>(EntryTextName);

        // Switch visibility of Password 
        // Entry field and Text Entry fields
        entryPasswordView.IsVisible =     
                       !entryPasswordView.IsVisible;
        entryTextView.IsVisible = 
                       !entryTextView.IsVisible;

        // update the Show/Hide button Icon states 
        if (entryPasswordView.IsVisible)
        {
            // Password is not Visible state
            imageIconView.Source = ImageSource.FromResource(
                "XFHacks.Resources.showpasswordicon.png",
                Assembly.GetExecutingAssembly());

            // Setting up Entry curser focus
            entryPasswordView.Focus();
            entryPasswordView.Text = entryTextView.Text;
        }
        else
        {
            // Password is Visible state
            imageIconView.Source = ImageSource.FromResource(
                "XFHacks.Resources.hidepasswordicon.png",
                Assembly.GetExecutingAssembly());

            // Setting up Entry curser focus
            entryTextView.Focus();
            entryTextView.Text = entryPasswordView.Text;
        }
    }
}

 

Here’s the most important bit where we’re handling the behaviour logic of our awesome Password Entry Control! At the moment of Invoking the Button click we’re doing a simple FindByName<T> look up for our required Elements, that are the EntryPassword field, EntryText field, and the IconImage.

First of all we’re setting the visibility of the two Entry Elements opposite for each other, as in if the User clicks on Show Password state, then the Entry with Text property will be displayed, and the user clicks on Hide Password state then the Entry with Password property (black dots) will be displayed.

Then based on the state, we’re updating the button icon’s Image source, as you can see we’re setting the showpasswordicon.png and hidepasswordicon.png respectively depending on the current state.

Finally we’re doing something extra to make sure whatever the visible the Entry element is still on Focus after the switching of the Password visibility state.

There we go, pretty straight forward yeah!

 Important: You could also move that whole piece of XAML to a separate XAML file, so that you could set it up as a reusable Control in your project! 😉

Fire it up!

Alright let’s see this in action!

 

There you have it running on Android, iOS and UWP like a charm! 😀

NO CUSTOM RENDERERS! NO NATIVE CODE! MORE AWESOME! xD

Grab it on Github!

https://github.com/UdaraAlwis/XFHacks

Well then, that’s it for now. More awesome stuff on the way!

Cheers! 😀 share the love!

Improvement suggestion: I was discussing this with one of my colleagues and he pointed out an awesome tweak for a much better improvement, that is to use the same implementation with trigger and all but with a single Entry element with the IsPassword true and false state on demand instead of using two Entry elements. This is a great idea yet so simple, which will drastically improve the rendering performance. So if you wanna give it a crack please go ahead! And here’s a shout out to an awesome developer Akshay Kulkarni – ak47akshaykulkarni, make sure to check out his Github repo! 😉

XFHACKS-005 Button with full control on Text and Icon!

Ever came across an instance where you wished if you had more control or customization over the Text and Icon properties of your Xamarin.Forms Button? even better even without any Custom Renderers or Platform Specific code? Welcome to another lightening short post of me hacking around Xamarin.Forms elements!

Uh oh, in Xamarin.Forms?!

The default Xamarin.Forms Button has it’s own limitations for customisation, specially in the Text and Icon, there’s not much control over those properties in terms of,

• Alignment of Text and Icon
• Positioning of Text and Icon 
• Default upper case Text in Android
• Icon Image Size and Aspect Property
• Icon Source only limited for Local Images

Talking of the Icon Source, you can only use Platform Specific Local Images for it, you cannot use Embedded Resources for it.

So I thought of making use of my own crazy imagination and hack my way around to fix all those limitations!

No custom renderers, no platform specific code and no third party libraries! Just by using pure out of the box Xamarin.Forms! 😉

Usual approach…

Now as an out of the box solution for this we could avoid using Xamarin.Forms Button totally and switch to a Xamarin.Forms Label or Image control with a Tap gesture recognizer attached to it. But then it wouldn’t actually give that nice look and feel of a button does it, specially in Android that nice ripple effects and on iOS the fade out effect on the button click is something really nice to have on your UI.

So… wait for it….

XFHACKS Receipe!

Here’s my awesome solution, we’re still going to stick to Xamarin.Forms Button button, and we’ll be laying down a Label or an Image on top of our Button view inside a Grid layout. This is actually very common hack of mine if you had gone through previous XFHACKS articles of my blog.

Yep sounds super simple, yet solves all of the issues I just mentioned above. Basically we’re constructing our own Custom Button control right from Xamarin.Forms elements, properties and behaviours without any custom renderers or platform code.

So getting into more details, here’s how we’re going to solve the above talked issues. For Alignment of the Text and Icon in the button, we are going to use the HorizontalOption of both Image and Label element that we’re placing on top of the Button. Then the Position of those elements, we shall resort to the Margin property of each. Since we’re using the Image control itself the Source property issue is automatically solved. Then as an added advantage you could also have the control over the Aspect property of the Image Icon you want to display in your button.

Now on top of all that one might wonder when you place a Label or Image on top of a Button, wouldn’t it obstruct the Clickable touch area of the Button? That’s where InputTransparent comes into rescue, passing down the touch even down to the Button straight away!

To add some cherry on top of the icing, we’re going to use the IsClippedToBounds property to crop out any areas of the inner elements of the Grid being rendered outside the View bounds of the Grid itself, so everything comes together as a single Element on UI.

Now all these comes together solving the issues that I have pointed out at the beginning! 😉

Sneak Peak!

That’s what we gonna be build yol!

Code and Run!

Behold the golden XAML code!

<!--  Button with Text and Icon  -->
<Grid
    Grid.Row="1"
    Grid.Column="0"
    HeightRequest="40"
    HorizontalOptions="Fill"
    IsClippedToBounds="True"
    VerticalOptions="Center">

    <!--  Button Control  -->
    <Button BackgroundColor="#2196F3">
        <Button.Margin>
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="Android" Value="-4,-6,-4,-5" />
                <On Platform="iOS" Value="0" />
            </OnPlatform>
        </Button.Margin>
    </Button>

    <!--  Text Label  -->
    <Label
        Margin="10,0,0,0"
        FontAttributes="Bold"
        FontSize="Small"
        HorizontalOptions="Start"
        HorizontalTextAlignment="Center"
        InputTransparent="True"
        Text="go next"
        TextColor="White"
        VerticalOptions="Center"
        VerticalTextAlignment="Center" />

    <!--  Icon Image  -->
    <Image
        Margin="0,0,5,0"
        HeightRequest="30"
        HorizontalOptions="End"
        InputTransparent="True"
        Source="{extensions:ImageResource XFHacks.Resources.rightarrowicon.png}"
        VerticalOptions="Center"
        WidthRequest="30" />
</Grid>

 

There you have it as we discussed earlier, our empty Button and on top of that the Label and the Image elements inside a Grid. As you can see the Button has some Margin value added for Android run time of, “-4,-6,-4,-5” which is to get rid of the default empty space that’s rendered around the Button at Android run time. The button will be spread across the whole Grid in background with its default HorizontalOptions=”Fill” property.

The Grid’s IsClippedToBounds=”True” property value makes sure it will cut off any inner elements that will render themselves out of the bounds of Grid. You can set whatever the HeightRequest or WidthRequest as you wish if you want to customize this even further.

Now speaking of the Label and Image you can see how I’m using the advantage of HorizontalOptions to align the elements as whatever the way I wish along with the Margin property of them, adding space wherever I wish. In here we have pushed the Label to the beginning of the Button and the Icon to the End of the Button horizontally.

Next the  InputTransparent=”True” comes in solving the touch issue, which will pass the touch action down to the Button element when the user clicks on it, giving the exact effect of a Button. The use of Image element we can now set whatever the size we wish for our Icon inside the button and adjust its Aspect property and so on.

And let’s try something else as well! Lets have a Button which has its Text and Icons aligned to the Right most corner.

<!--  Button with Text and Icon  -->
<Grid
    Grid.Row="0"
    Grid.Column="1"
    HeightRequest="40"
    HorizontalOptions="Fill"
    IsClippedToBounds="True"
    VerticalOptions="Center">

    <!--  Button Control  -->
    <Button Grid.ColumnSpan="2" BackgroundColor="#2196F3">
        <Button.Margin>
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="Android" Value="-4,-6,-4,-5" />
                <On Platform="iOS" Value="0" />
            </OnPlatform>
        </Button.Margin>
    </Button>

    <!--  Text Label  -->
    <Label
        Grid.Column="0"
        Margin="0,0,5,0"
        FontAttributes="Bold"
        FontSize="Small"
        HorizontalOptions="End"
        HorizontalTextAlignment="End"
        InputTransparent="True"
        Text="favs"
        TextColor="White"
        VerticalOptions="Center"
        VerticalTextAlignment="Center" />

    <!--  Icon Image  -->
    <Image
        Grid.Column="1"
        Margin="0,0,10,0"
        HeightRequest="30"
        HorizontalOptions="End"
        InputTransparent="True"
        Source="{extensions:ImageResource XFHacks.Resources.staricon.png}"
        VerticalOptions="Center"
        WidthRequest="30" />

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
</Grid>

 

Here’s another example where I have pushed the Image Icon to the End of the Button and the Label to be following it horizontally.

You can follow the same implementation and have our Button’s Text and Icon aligned t other Left most corner.

Now just like that you can customize all the aspects of a Button using this hack I just shared, just set up the Label and Icon with whatever the properties and customization as you wish on top of a Button. That’s it!

 Important: You could also move that whole piece of XAML to a separate XAML file, so that you could set it up as a reusable Control in your project! 😉

Fire it up!

Let me share some examples I’ve built using this awesomeness!

There you go our awesome Custom Button control running on Android, as you can see with all the preserved Button click effect! 😀

 

Since its completely out of the box Xamarin.Forms, you can run it across all the native platforms and expect the same results! 😉

Grab it on Github!

https://github.com/UdaraAlwis/XFHacks

Well then, that’s it for now. More awesome stuff on the way!

Cheers! 😀 share the love!

XFHACKS-004 Editor with a Placeholder!

Ever wanted to have a Placeholder property for your Xamarin.Forms.Editor control? Welcome to another lightening short post of me hacking around Xamarin.Forms elements to build cool stuff and get sh*t done! 😉

By Default Xamarin.Forms.Editor is a pretty boring control with not much room for customization, but is a very useful control. So I had always wondered why it didn’t have a Placeholder property like we have to the Entry control.

So I thought of build an Editor with a Placeholder by myself, without any custom renderers or native code or third party libraries. 😉

Sneak Peak!

That’s what we gonna be build yol!

XFHACKS Recipe!

So this recipe is going to be a bit advanced one, although the basic here is also going to be what we’ve been using last few XFHACK articles, the stacking of Elements on top of each other! my favorite! 😀 lol

Let me begin with the concept of Placeholder, which is a text display that is visible in any Text Editable element until the user starts typing their input, and if the user clears his input the Placeholder comes back to visibility.

In simple terms we are going to stack a Label underneath our Editor control which will act as the “Placeholder” element and then we’re going to do some external handling to make that given Label to be set visible or invisible based on users text input typing event. The first part is pretty straightforward but the second part needs more explaining I assume. To do that we’re going to make use of the awesome Triggers in Xamarin.Forms, we’re going to implement a simple TriggerAction which will react to the event of Text field change of our Editor control. So inside the trigger execution we will set the Placeholder Label to be visible or invisible.

The Golden Triggers: So we’re going to use DataTriggers of Xamarin.Forms that allows us to listen to changes in a Data Field and react up on it, in this case the changes of the Text property of our Editor control. We’ll attach the DataTriggers to the Label and bind them to the Editor.Text property, then reacting on that our TriggerAction will hide or visible the Placeholder Label.

How easy is that eh!

Code!

Let’s start off by implementing our awesomely simple TriggerAction which will be handling the event of Editor’s text field change.

/// <summary>
/// A simple trigger to change a
/// View's visibility dynamically
/// </summary>
public class VisibilityTriggerAction
			: TriggerAction<View>
{
	public bool IsViewVisible { get; set; }

	protected override void Invoke(View sender)
	{
		sender.IsVisible = IsViewVisible;
	}
}

 

So we have a TriggerAction which can be reused anywhere to set a given View’s Visibility on demand, the reason I made it as a “View” type is exactly for the reason of reusability. So inside our Trigger we will be changing the value of IsViewVisible property to change the visibility of the Placeholder Label.

Behold the golden XAML code!

<!--  Editor with a Placeholder  -->
<Grid
      BackgroundColor="#b3ddff"
      HeightRequest="100"
      HorizontalOptions="Center"
      WidthRequest="250">

      <Label
            InputTransparent="True"
            Text="Type anything here..."
            TextColor="Gray">
            <Label.FontSize>
                  <OnPlatform x:TypeArguments="x:Double">
                        <On Platform="Android" Value="17" />
                        <On Platform="iOS" Value="17" />
                        <On Platform="UWP" Value="15" />
                  </OnPlatform>
            </Label.FontSize>
            <Label.Margin>
                  <OnPlatform x:TypeArguments="Thickness">
                        <On Platform="Android" Value="5,11,0,0" />
                        <On Platform="iOS" Value="4,9,0,0" />
                        <On Platform="UWP" Value="11,5,0,0" />
                  </OnPlatform>
            </Label.Margin>
            <Label.Triggers>
                  <!-- the DataTriggers 
                           reacts to Editor.Text changes -->
            </Label.Triggers>
      </Label>
      <Editor
            x:Name="editor"
            BackgroundColor="Transparent"
            TextColor="Black" />

</Grid>

 

There you have the Editor and the Label stacked on top of each other acting like a Placeholder for the Editor. Something important to note here is that, you can see the Margin property being set up in a bunch precise values, this was to align the Label’s text field with the text field of the Editor, so that they superpose each other nicely, which in returns gives the exact look and feel of a Placeholder property. 😉 In addition to that I have very carefully adjusted the default FontSize of the Label to match to the Editor’s! Smart eh!

So with that note, if you want to customize the Editor’s FontSize or Font itself, you need to make sure to do the similar changes accordingly to the underlying Label’s property to match the same appearance.

Now here’s the important bit, the golden Trigger. So we’re going to attach two DataTriggers, one for listening to the Editor.Text property’s null value instance (this is to be safe of null values in certain different platforms) and the other is for Editor.Text.Length property value changes. Based on those two instances we’re activating our Triggers accordingly with passing in the IsViewVisible value to it.

So here are the XAML of the DataTriggers we just spoke about, which you should plug into the above code!

<!--  the DataTriggers reacts to Editor.Text changes  -->
<DataTrigger
      Binding="{Binding Source={x:Reference editor}, Path=Text.Length}"
      TargetType="Label"
      Value="0">
      <DataTrigger.EnterActions>
          <triggers:VisibilityTriggerAction IsViewVisible="True" />
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
          <triggers:VisibilityTriggerAction IsViewVisible="False" />
      </DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger
      Binding="{Binding Source={x:Reference editor}, Path=Text}"
      TargetType="Label"
      Value="{x:Null}">
      <DataTrigger.EnterActions>
          <triggers:VisibilityTriggerAction IsViewVisible="True" />
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
          <triggers:VisibilityTriggerAction IsViewVisible="False" />
      </DataTrigger.ExitActions>
</DataTrigger>

 

There you have it, we’re binding our DataTriggers to the Editor’s Text property according to the two instances we discussed of, and setting the VisibilityTriggerAction‘s value to hide or visible our Placeholder Label.

Now as usualy could also move that whole piece of XAML to a separate XAML file, so that you could set it up as a reusable Control in your project! 😉

Pretty straight forward eh!

Fire it up!

 

There you have it running on Android, iOS and UWP like a charm! 😀

Grab it on Github!

https://github.com/UdaraAlwis/XFHacks

Well then, that’s it for now. More awesome stuff on the way!

Cheers! 😀 share the love!

XFHACKS-003 Editor with a Border!

Ever wanted to have a Border around your Xamarin.Forms.Editor control? Welcome to another lightening short post of me hacking around Xamarin.Forms elements!

Sneak Peak!

That’s what we gonna be build yol!

XFHACKS Recipe!

The default Xamarin.Forms.Editor control is a very dull and simple control which doesn’t have much of customization properties of its own. In this case the Editor doesn’t even have a proper border around it that explicitly shows the edge of the element. So here we’re going to look into how to add a nice Border around Editor in Xamarin.Forms without any custom renderers or 3rd party libraries!

We all know the Frame control, which has a nice Border property, and also CornerRadius property allowing us to control the curves of the corner edges of it. This is the simple magic we’re going to use here. We’re going to wrap our Editor inside this Frame control. 😀

How simple and easy is that eh!

Code!

Behold the golden XAML code!

<!--  Editor with a Border Control  -->
<Frame
	Padding="5"
	CornerRadius="8"
	HasShadow="True"
	OutlineColor="#2196F3">
	<Editor BackgroundColor="Transparent" TextColor="Black" />
</Frame>

 

So there we go as we discussed the Frame is wrapping around the Editor control. So the Frame has been configured with CornerRadius property so we can have some nice round corners. Then the Padding has been reduced to 5 so we have less space between the border and the Editor view, this you may change as you wish. 😉

HasShadow property is something you could change as you wish, which you should keep in mind, behaves differently on iOS and Android.

Now just to add something extra, imagine if you wanted to have the whole background with a certain color for the given Editor, this is how simple it is!

<!--  Editor with a Border Control  -->
<Frame
	Grid.Row="4"
	Padding="5"
	BackgroundColor="#7fc5ff"
	CornerRadius="8"
	HasShadow="False">
	<Editor BackgroundColor="Transparent" TextColor="Black" />
</Frame>

 

We simply add the BackgroundColor property of the Frame and then you set the HasShadow to false so it doesn’t show up Border Color just for the kicks of it. 😀 So just like that you could easily customize this as you wish!

 Important: You could also move that whole piece of XAML to a separate XAML file, so that you could set it up as a reusable Control in your project! 😉

Fire it up!

There you have it running on Android and iOS like a charm!

Let me type something inside our “cool” Editor…

 

Grab it on Github!

https://github.com/UdaraAlwis/XFHacks

Well then, that’s it for now. More awesome stuff on the way!

Cheers! 😀 share the love!

XFHACKS-002 Button with an Icon!

Ever wanted to have an Icon element attached to a Xamarin.Forms.Button control? Welcome to another lightening short post of me hacking around Xamarin.Forms elements!

No custom renderers, no platform specific code and no third party libraries! Just by using pure out of the box Xamarin.Forms! 😉

Sneak Peak!

That’s what we gonna be build yol!

Now for something like that you’re going to assume we need some custom renderers or platform specific code or third party library use, but no no no! not on my watch! 😀

XFHACKS Recipe!

In this recipe we’re going to use the same concept that we used in the XFHACKS-001 article, stacking Elements on top of each other using Xamarin.Forms Grid Layout. So here we’re placing an Image on top of a Button.

Now you might wonder wouldn’t that void the touch event of the Button, since the Image will be covering a part of the Button touch area? Now that’s where the magic property called InputTransparent comes into play. Using this property we can disable the touch input interaction for any given View and pass it down to the next child underneath. 😀

Code!

Behold the golden XAML code!

<!--  Button with an Icon Control  -->
<Grid
	Grid.Row="1"
	HorizontalOptions="FillAndExpand"
	WidthRequest="200">

	<!--  Button Control  -->
	<Button
		Grid.Column="0"
		Grid.ColumnSpan="2"
		BackgroundColor="#2196F3"
		HorizontalOptions="FillAndExpand"
		Text="Click me!"
		TextColor="White" />

	<!--  Icon Image  -->
	<Image
		Grid.Column="1"
		Margin="0,0,10,0"
		HeightRequest="25"
		HorizontalOptions="End"
		InputTransparent="True"
		Source="{local:ImageResource
			XFHacks.Resources.dropdownicon.png}"
		VerticalOptions="Center"
		WidthRequest="25" />

        <Grid.RowDefinitions>
          <RowDefinition>
               <RowDefinition.Height>
                    <OnPlatform x:TypeArguments="GridLength">
                         <On Platform="Android" Value="50" />
                         <On Platform="iOS" Value="40" />
                         <On Platform="UWP" Value="40" />
                    </OnPlatform>
               </RowDefinition.Height>
          </RowDefinition>
        </Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
		<ColumnDefinition Width="35" />
	</Grid.ColumnDefinitions>
</Grid>

There you have it just like we discussed, inside the Grid we have a Button, and on top of that we have an Image, with our magical property InputTransparent set to true, which disables the touch events of the Image redirecting them on to the Button itself. So by this the whole Image and Button works as a single Button control.

I have given a little padding to the Image, so that the icon doesn’t corner itself in the Button. The Image has a fixed width and height of 25 units, and its set to the second column of the Grid, whereas the Button spreads across two columns filling up the entire space of the Grid. Thereby you can set any fixed size to the Grid itself or let it Fill up whatever the parent container its holding.

 Important: You could also move that whole piece of XAML to a separate XAML file, so that you could set it up as a reusable Control in your project! 😉

Pretty straight forward eh!

Fire it up!

  

There you have it running on Android, iOS and UWP like a charm!

Grab it on Github!

https://github.com/UdaraAlwis/XFHacks

Well then, that’s it for now. More awesome stuff on the way!

Cheers! 😀 share the love!

XFHACKS-001 Picker with an Icon!

Ever wanted to have an Icon element attached to a Xamarin.Forms.Picker control? Then you’re at the right place. Welcome to another lightening short post of me hacking around Xamarin.Forms elements!

Sneak Peak!

That’s what we gonna be build yol!

XFHACKS Recipe!

Usually you would think you need to implement a Custom Renderer to get this done or use a third party control! I say NO! NO! NO!

You can easily do this right from Xamarin.Forms without any native coding or 3rd party library, let me explain.

In a Xamarin.Forms Grid layout we could place Elements on top of each other, using this simple advantage, we’re going to place an Image as an icon under a Picker control, and of course we’ll be setting the Background color of the Picker to Transparent! 😉 Simple right?!

Code!

Behold the golden XAML code!

<!--  Picker with an Icon Control  -->
<Grid
     Grid.Row="1"
     HorizontalOptions="Center"
     WidthRequest="200">

     <!--  Icon Image  -->
     <Image
          Grid.Column="1"
          HeightRequest="25"
          HorizontalOptions="End"
          Source="{local:ImageResource XFHacks.Resources.dropdownicon.png}"
          VerticalOptions="Center"
          WidthRequest="25" />

     <!--  Picker Control  -->
     <Picker
          Title="Select a Monkey"
          Grid.Column="0"
          Grid.ColumnSpan="2"
          BackgroundColor="Transparent">
          <Picker.ItemsSource>
               <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
               </x:Array>
          </Picker.ItemsSource>
     </Picker>

     <Grid.RowDefinitions>
          <RowDefinition>
               <RowDefinition.Height>
                    <OnPlatform x:TypeArguments="GridLength">
                         <On Platform="Android" Value="50" />
                         <On Platform="iOS" Value="35" />
                    </OnPlatform>
               </RowDefinition.Height>
          </RowDefinition>
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="25" />
     </Grid.ColumnDefinitions>
</Grid>

 

There you have it just like we discussed in the recipe, we have placed our Picker control on top of the Image control, and we’re using a Grid to bring all of this together. If you look closely, we are using two columns, the Picker is spread across both columns, and the Icon Image is only added to the last column, with a fixed width of 25 units, thereby aligning the Icon to the right most corner of the Picker from underneath it. 😀

You can set the WidthRequest to whatever the value you prefer. And as of Platform specific values we’re setting the Grid Height accordingly to the best appearance of Android and iOS separately, you’re in full liberty to change them as you wish. 

Important: You could also move that whole piece of XAML to a separate XAML file, so that you could set it up as a reusable Control in your project! 😉

Pretty straight forward eh!

Fire it up!

 

There you have it running on Android and iOS!

Grab it on Github!

https://github.com/UdaraAlwis/XFHacks

Well then, that’s it for now. More awesome stuff on the way!

Cheers! 😀 share the love!