Adding Xuni Components using XAML

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

In the Solution Explorer, right click the project YourAppName (Portable or Shared).
Select Add | New. The Add New Item dialog appears.
Under installed templates, select C# | Forms XAML Page.
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

In the Solution Explorer, double click Page1.xaml to open it.

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.Xamarin.Gauge;assembly=Xuni.Xamarin.Gauge" >

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.Xamarin.Gauge;assembly=Xuni.Xamarin.Gauge" >

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>

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>

Step 3: Run the Program

In the Solution Explorer, double click App.cs to open it.
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(); }
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.Xamarin.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.Xamarin.Gauge.Platform.WinPhone.GaugeRenderer.Init();
Press F5 to run the project.