Xamarin.Forms for Windows Phone –Differences You Must Know

Xamarin.Forms is cross platform solution to create native apps. Whilst Xamarin allows us to build native apps for each platform (Android, iOS and Windows) with maximum code sharing, Xamarin.Forms goes one step ahead and allows UI code sharing as well. That means, I can create a TabbedPage and it will be rendered natively on each platform as ActionBar, UITabView and Pivot.

Xamarin.Forms allows creating UI in both C# as well as XAML. To keep things simple and less confusing across different platforms, there are new properties, new elements. XAML as a language is still the same. So we get to create objects from XAML, initialize them using InitializeComponent(). Everything is still the same. You just need to know the small differences. For example there is no Margin property, but there is Spacing property <grin>

While you can add a XAML page from XAML project template category, you should add one from Code -> Forms Xaml Page

image

The first thing to notice here is namespace

image

And this actually makes the difference. The two lines define the XAML page. First two are for Xamarin.Forms whereas last two are for normal XAML page in Windows app.

When creating User Interface, Xamarin.Forms provides Views (controls in our language) which abstract away the different controls in different platform. So, to create a TextBox on Windows Phone and a button which will be right aligned within StackPanel, following code will do the magic:

image

As you can see here, rather than StackPanel, StackLayout is used to represent controls positioned in stack (horizontal or vertical) and to avoid confusion with any stack in these platforms. This StackLayout will internally render native Stack of controls on each platform.

Also, in above code, Entry element is used, which is new to us. However, this entry represents a single line text-input control. That is, on Windows Phone it will become a TextBox.

Along with control names, some properties are named differently. For example Margin is now Spacing. We have left 25px space from each side in our code. Padding is still the same.  HorizontalAlignment is changed to HorizontalOptions. And possible values for that will be: Start [Left], Center and End [Right], with option to mention Expand which will take-up the space available. It also has FillAndExpand option, which is similar to Stretch mode.

While working with Font, usually we’ve different properties for FontFamily, FontSize, FontWeight etc. In Xamarin.Forms, we get one Font property which accepts multiple values (comma separated), which is parsed at runtime (Type Converters). So, below code can render TextBlock (label) with specified font details:

image

One thing to notice here is OnPlatform element. This element helps to override certain values (in above code, label renders with different font setting on different platform) for specific platform. There is a Device class with methods to work on platform specific code in XAML or C#.

The data binding concept is still the same as it was in traditional XAML.

image

The code above mentioned, with details is available at ‘An Introduction to Xamarin.Forms’ i.e.: http://bit.ly/1l1zg06 on Xamarin.com site.

Having said that XAML syntax is still the same. The features like code behind in partial class (with InitializeComponent), Type Converters, Property Element syntax, Attached Property syntax, Content properties, external library declarations (xmlns : somedifferentype=”uri”), adding event handlers, ResourceDictionary, StaticResources, etc… are still the same.

With this, I’m sure Xamarin.Forms will help C# and XAML developers to do Rapid Application Development on multiple platforms.

You can read more here at:

  1. An Introduction to Xamarin.Forms
  2. Getting Started with Xamarin.Forms: Basics
  3. Xamarin.Forms Samples
  4. XForms Labs (Open Source Project)

Happy Coding & Namaste
Mayur Tendulkar

Exploring NDepend

Recently, I was looking for tools to improve code readability as well as tools which can help me to write better code. There are many tools. And then I met NDepend – often called as ‘Swiss Army Knife for .NET developers’. And glad that I could try it out. This tool can check your code on many parameters, for example coding standards, code quality, dependencies and what not.

Here, let me give you a glimpse of what it can do. However, I’m covering just 1% of what it actually does and what I understood. There are many things, which I’ve yet to explore.

To start with, when I open my project in NDepend, it analyzes it and gives a detailed report. One part of it is basic details about app statistics. It is like a dashboard.

image

This report shows, number of lines commented, assemblies and its member count and other parameters.

This tool also shows violated rules and how they can be fixed

image

On clicking on those violations, you will be taken directly to that code where it can be fixed.

One of the best and most important thing about this tool, also the one that I liked is it shows dependency graph. This can help you if you want to improve the app architecture. Basically you need to know your app’s dependencies when you’re deploying/publishing it. Lesser the dependencies, better the product Smile

image

One more thing, which I think as the key feature of NDepend is Treemap Metric View. In this case rectangles represent method and the size depends on the number of lines. However, this view can give more details. Read more about it here

image

As I mentioned before, I haven’t got a chance to explore all the features of this tool. But this post can give you the idea about what it can do and how it can help you. As and when I’ll explore more features of it, I’ll write it down here. Meanwhile, do give it a try here: http://www.ndepend.com/ 

Happy coding
Mayur Tendulkar

#365 Admin

I carpool to work with Dev. We enjoy our ~45 mins. ride and while traveling we listen to 80’s/90’s songs (If given a chance he would kill me for my choice of songs Smile) and also talk about various things at our day-to-day job and how those can be automated. One of the thing that we discussed was basic – User Management. E.g. adding a user, resetting password, etc.… So, we thought about enabling IT admins to manage their Active Directory remotely.

Recently, I was working on a project where we had to use Azure Active Directory for user management. And I thought it can add value if ported on mobile. So – #365 Admin.

Using this tool, IT admins can browse through users, reset their password or add a new user. This is v1.0 release and I’m planning to add more features and release updates once in a month or as and when ready/required.

Thanks to Girish, Aviraj and Vittorio for all their support while building this app.

The app is certified in the store and will be available in general in coming weeks.

Thanks,
Mayur Tendulkar

//PUBLISH – Global Event Updates

Microsoft is hosting a global event //PUBLISH. This event is in series with //build, //learn and will be called //publish. You can find more information about this event at: https://publishwindows.com/ 

The idea behind this event is to help you get your apps in the store. If you’re working on any existing app (Windows Store or Windows Phone) or have an app idea, we’ll help you to complete it and submit it on the store. We at Pune User Group are happy to say that, PUG will be hosting this event in Pune. As this is a global event, we’ll be hosting it on the same dates i.e. 16th and 17th May. This post will give you idea about the event.

In Pune, you can find agenda and registration details here: Pune Link. Once you register, we’ll send confirmation mail to registered users and they’ll be invited for the event.

As it is going to be session+coding+support event, please make sure that your machine is properly configured. Please get the latest version of Visual Studio and Windows Phone SDK installed on your machine to avoid confusion at the venue. If you need any help with it, please contact us. My email ID is mayur.tendulkar {at} puneusergroup.org

And have I mentioned, there will be prizes too (for eligible candidates Smile)

Till then.. register and happy coding.

Mayur Tendulkar

It’s All About Controls (Part 2)

Thanks for reading Part 1 of this multi-part blog post. If you’ve missed, in Part 1, we talked about what has been added (or converged with Windows) in Windows Phone 8.1 SDK. This part will mainly cover the changes that are included in this SDK. These are important changes and you must make a note of it to build stunning apps. Perhaps, later, there will be part 3, in which I’ll cover some 3rd party components, which can be used in Universal apps. Do let me know if you want to cover anything specific.

Panorama Is Now Hub

wp_ss_20140421_0003 wp_ss_20140421_00014

With Windows and Windows Phone convergence, Panorama control from Windows Phone is changed to Hub control. It is similar to Hub control available on Windows and gives effects like Panorama. It also, share the same XAML in both the platforms

image  

image


StatusBar (SystemTray) Changes

StatusBar or SystemTray is top-most component on page, which shows various details:

image

In Windows Phone 8 apps, you could show/hide system tray from XAML. For example:

image

Now, in 8.1 (WinRT) apps you’ll need to use code behind to do it. For example:

image


Flyouts, Flyouts Everywhere

Flyout is a new control in WP8.1 SDK. As MSDN says, use it to display lightweight UI. Also, unlike a dialog, a flyout can be lightly dismissed by clicking or tapping outside it. You can create a flyout by using following code. And actually add a flyout to any control which is a FrameworkElement.

1  

image


Command From Your Bar

With WP8.1, you do get your old AppBar.. but also get CommandBar. This command bar shares code with Windows. It also have Primary Commands and Secondary Commands. Which represents main buttons and menu on bottom app-bar in WP app. Whereas, on Windows, they have positions on app-bar as left and right.

image

image


Zoom – SemanticZoom

With WP8.1, LongListSelector is gone. However, it is replaced with SemanticZoom – in convergence with Windows. This control actually has two views which are shown in different way according to Zoom In/Out mode. It will be another topic for blog. But to put it into simple words: you’ll see a large list of photos in Grid. But when you *squeeze* it, you’ll see a list. OR vice a versa as you design your view.

image

With these controls, there are some more changes in controls are added. Like RichTextBLOCK (not Box), WebView (not Browser). But I would love to keep this post short.  

In next series (rather, I’m planning to change the name Smile), I’m going to talk about API changes in Windows Phone 8.1 SDK. Meanwhile, do let me know your feedback and if you want anything more covered here.

Happy Coding

Mayur Tendulkar