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>