Monday, June 22, 2015

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:

mGkd879Oqv

and a Grid with both horizontal and vertical splitters:

DnaXEi1wzw

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.

Wednesday, June 17, 2015

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


Wednesday, June 10, 2015

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

Add App.xaml in your Xamarin Forms project

In the current version of Xamarin tools, the default Xamarin Forms project templates in both Visual Studio and Xamarin Studio do not generate App.xaml along with the App class that derives from Application and provides an entry point where you can add initialization code. 

The support for App.xaml is briefly mentioned in Xamarin Forms documentation but without giving the exact steps.
These steps are:

1. Right click on the PCL project and choose to add a new file
2. In Visual Studio, choose the "Forms Xaml Page" item
    In Xamarin Studio, choose the "Forms ContentPage Xaml" item
3. Write "App" as name

You will get a App.xaml and App.xaml.cs created. You need to do some small modifications in each of these:

1. in App.xaml, replace the XAML with the following:
<Application
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyApp.App">
    <Application.Resources>
        <ResourceDictionary>
           
        </ResourceDictionary>
    </Application.Resources>
</Application>

Note the x:Class="MyApp.App" attribute. You should replace MyApp with the name of your Xamarin Forms project.

2. in App.xaml.cs, replace the base class ContentPage with Application
public partial class App : Application
{
    public App ()
    {
        InitializeComponent ();
        MainPage = YourContentPage(); // change as required
    }
}

You might also need to delete the old App.cs, you don't need it anymore.

Monday, June 08, 2015

IconView control for Xamarin Forms


Someone was asking on the forum how to draw a colored icon.
I created an IconView control which does this: https://github.com/andreinitescu/IconApp/

The control takes a local image and applies a color on it. This is useful when you want to color images on the fly, without the need to have multiple images for different colors.

At this moment the implementation is for Android and iOS. Contributions for Windows support are welcome!

Usage

An example of a Page using the IconView control:
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="IconApp.MyPage" xmlns:controls="clr-namespace:IconApp;assembly=IconApp"> <controls:IconView Source="monkey" Foreground="Red" WidthRequest="100" HeightRequest="100" HorizontalOptions="Center" VerticalOptions="Center" /> </ContentPage>
This draws the "monkey" image with red color in the center of the screen:



Add the control to your project


1. Add /IconApp/IconApp/IconView.cs to your Xamarin Forms PCL project
2. The control uses native renderes. You need to add the renderers to your Android and iOS project respectively:
/IconApp/IconApp.Droid/Renderers/IconViewRenderer.cs
IconApp/IconApp.iOS/Renderer/IconViewRenderer.cs

Note you might need to update some namespaces.