Xamarin Forms: Lazy load tabs in TabbedPage

Too much fun with Xamarin Forms

I had a blast playing with Xamarin Forms and SVGs which end up with the following which works on iOS, Android and Windows UWP, checkout the videos for Android and iOS apps:

Credit for original design idea goes to Mikael Ainalem:

https://twitter.com/mikaelainalem/status/963076814183772160

The SVG is created dynamically, based on the position of the text-boxes and the button, so it will work on any number of text-boxes and buttons. The actual SVG for the login screen in the videos, looks like this:

Debugging HTML5 running in iOS from Windows with Chrome dev tools!

In order to debug HTML5 running in Safari on iOS, I used to connect the iOS device to my Mac, open Safari, go to Developer menu(needs to be activated from Safari Preferences) and open the page.
You can find detailed steps how to do this on internet.

I tried to remote debug HTML5 with other tools (Telerik has one), but the best way is with an utility called ios-webkit-debug-proxy which uses Chrome dev tools!

You can find it here https://github.com/google/ios-webkit-debug-proxy and its Windows port: https://github.com/artygus/ios-webkit-debug-proxy-win32

It allows you inspect the WebKit (either the Safari or UIWebViews) running on the iOS device from your Windows machine with Chrome dev tools.
This utility connects to the WebKit for inspection.

Steps (most of these are written in https://github.com/google/ios-webkit-debug-proxy):

1. Go to https://github.com/artygus/ios-webkit-debug-proxy-win32
2. You can either get the compiled version or build from the source. I chose to built it from source just for the kicks.
3. Run the ios-webkit-debug-proxy.exe
4. In Chrome, go to http://localhost:9222/ to see web-browser tabs open in Safari or the WebViews on the iOS device. Click on a tab.
5. A new window should open with Dev tools. Note the silver icon, click on it and choose to 'Load unsafe scripts':

Some things to keep in mind:

- note that a web server is being used. when inspecting a tab, the link is
  https://chrome-devtools-frontend.appspot.com/static/27.0.1453.93/devtools.html?host=localhost:9222&page=1
  not sure if this might be a security issue for what you're debugging.

- in the inspector window, clicking on elements in the Elements tab doesn't do anything; you can use arrow keys to navigate up and down in the DOM tree

GridSplitter control for Xamarin Forms

I created a GridSplitter control for Xamarin Forms, for iOS and Android.

You can find the full description of how it works and how to include it in your app:
https://github.com/andreinitescu/GridSplitterApp

Some screenshots with sample layouts included in the sample app:



and a Grid with both horizontal and vertical splitters:



The sample app also shows a technique to create reusable custom controls which you can style easily just with XAML, very similar to how it works on Windows.

Easiest way to know which w3wp.exe PID corresponds to which application pool

I keep forgetting this.
Open Task Manager and have it show the Command Line column
You can see for the w3p.exe processes the name of the app pool in the command line parameters

Xamarin Forms: Create a style BasedOn default style defined in app's global resource dictionary

Suppose there’s a style defined in app's global resource dictionary (App.xaml):

<Style TargetType="Label">
    <Setter Property="TextColor" Value="Red" />
</Style>
And this style defined in a page:

<Style x:Key="MyLabelStyle" TargetType="Label">
    <Setter Property="FontSize" Value="14" />
</Style>
If you want MyLabelStyle to inherit the global style, one way is to use this syntax:

<Style x:Key="MyLabelStyle" TargetType="Label" BasedOn=”{StaticResource Xamarin.Forms.Label}”>

otherwise MyLabelStyle will not have the text color red.

Note that this won’t work:
<Style x:Key="MyLabelStyle" TargetType="Label" BasedOn=”{StaticResource {x:Type Label}}”>

Instead of hard coding the Label’s type full name, a nicer way would be to define a custom markup extension which resolves the Label type (something like this)

Xamarin Forms style resets

There are some default styles which you might want to reset in your Xamarin Forms apps.
For example, some container controls have default padding and spacing for their child views.

In a more complicated UI, sometimes these default styles can become an issue. Because the UI you build is complex, you can forget about these default values and you wonder why some views are not positioned the way you want.

I created a small XAML 'resets' snippet, which can be added to the App.xaml:
https://gist.github.com/andreinitescu/69e8afcad1ed9de69b76