Collapse All Expand All

This topic demonstrates how to add a Xuni control to your app using XAML. This is done in three steps:

• Step 1: Add a new Forms XAML Page
• Step 2: Add the Control
• Step 3: Run the Program

Step 1: Add a new Forms XAML Page

1. In the Solution Explorer, right click the project YourAppName (Portable or Shared).
2. Select Add | New. The Add New Item dialog appears.
3. Under installed templates, select C# | Forms XAML Page.
4. Add a name for the XAML page (for example Page1.xaml) and click OK. A new XAML page is added to your project.

Step 2: Add the Control

1. In the Solution Explorer, double click Page1.xaml to open it.
2. Modify the <ContentPage> tag to include Xuni references as shown below:

   XAML	Copy Code
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="YourAppName.Page1" xmlns:xuni="clr-namespace:Xuni.Forms.Gauge;assembly=Xuni.Forms.Gauge" >

3. Initialize the control in between the <ContentPage></ContentPage> tags and inside the <StackLayout></StackLayout> tags.

   The following code shows how to initialize a Gauge control.

   XAML

   Copy Code

   <StackLayout> <xuni:XuniLinearGauge Value="35" Min="0" Max="100" Thickness="0.1" HeightRequest="50" WidthRequest="50" PointerColor="Blue" Direction="Right"> <xuni:XuniLinearGauge.Ranges> <xuni:GaugeRange Min="0" Max="40" Color="Red"/> <xuni:GaugeRange Min="40" Max="80" Color="Yellow"/> <xuni:GaugeRange Min="80" Max="100" Color="Green"/> </xuni:XuniLinearGauge.Ranges> </xuni:XuniLinearGauge> </StackLayout>

Back to Top

Step 3: Run the Program

1. In the Solution Explorer, double click App.cs to open it.
2. In the class constructor App(), set the Forms XAML Page Page1 as the MainPage.

   The following code shows the class constructor App(), after completing this step.

   C#	Copy Code
   public App() { // The root page of your application MainPage = new Page1(); }

3. Few additional steps may be required for some controls. For example, the following steps need to be performed in case of Gauge to run an iOS app and a WinPhone app:
   • iOS App:
     1. In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project to open it.
     2. Add the following code to the FinishedLaunching() method.

        C#	Copy Code
        Xuni.Forms.Gauge.Platform.iOS.Forms.Init();

   • WinPhone App:
     1. In the Solution Explorer, expand MainPage.xml.
     2. Double click MainPage.xml.cs to open it.
     3. Add the following code to the class constructor.

        C#	Copy Code
        Xuni.Forms.Gauge.Platform.WinPhone.GaugeRenderer.Init();

4. Press F5 to run the project.

Back to Top

 

 

---

Copyright © GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback