Quick Start

Several quick start options are available:

• Install Xamstrap with Nuget: Install-Package Xamstrap -Pre

OR

* Download latest Xamstrap project and include Xamstrap project from the `src` into your project. Add reference as mentioned below: 1. Xamstrap(Portable) - into portable project. 2. Xamstrap(Portable) and Xamstrap.Droid - into android project. 3. Xamstrap(Portable) and Xamstrap.iOS - into ios project.

Configure Xamstrap

iOS:

To init Xamstrap on iOS, add the following line to your AppDelegate.cs inside FinishedLaunching method, because if any type from dll is not used then linker will remove it's reference.

ResponsiveLabelRenderer obj;

How to use Xamstrap?

In-order to use Xamstrap into your project add the following namespace.

xmlns:Control="clr-namespace:Xamstrap;assembly=Xamstrap"
xmlns:Attached="clr-namespace:Xamstrap.AttachedProperties;assembly=Xamstrap"

• Control namespace will provide custom controls like Div,Tab,Master-detail.
• Attached namespace will provide attached property like class which will be same as css class that is applied on custom control Div.

How to use custom controls

As mentioned above include the namespace first then use the Control namespace as shown in below code.

Adding Div To page

<Control:Div>
    ...
    ...            
</Control:Div>

Adding Master-detail page

<Control:ResponsiveMasterDetail>
    <!--Master Header-->
    <Control:ResponsiveMasterDetail.MasterHeader AutomationId="MasterHeader">
        ....
        ....
    </Control:ResponsiveMasterDetail.MasterHeader>

    <!--detail Header-->
    <Control:ResponsiveMasterDetail.DetailHeader AutomationId="DetailHeader">
        ....
        ....
    </Control:ResponsiveMasterDetail.DetailHeader>

    <!--Master Content-->
    <Control:ResponsiveMasterDetail.MasterContent AutomationId="MasterContent">
        ....
        ....  
    </Control:ResponsiveMasterDetail.MasterContent>

    <!--Detail Content-->
    <Control:ResponsiveMasterDetail.DetailContent>
        ....
        ....
    </Control:ResponsiveMasterDetail.DetailContent>
</Control:ResponsiveMasterDetail>

Adding Tab page

<Control:Tab TabHeaderTextColor="Black" TabHeaderBackgroundColor="White" IsFixedTab="False">
    <Control:Tab.TabItems>
        <Control:TabItem Title="Tab 1"  IsSelected="true">
            ....
            ....
        </Control:TabItem> 
        ....
        ....    
    </Control:Tab.TabItems>        
</Control:Tab>

How to apply class

Same as HTML class Xamstrap provide class property under Attached namespace. It will be applied on different elements as show in the below sample code. In the sample below we want to apply primary color to the text.

<Label Text="text-primary - Used to create text with primary color." Attached:ResponsiveProperty.Class="text-primary"/>

Output