The Ultimate UI Controls for Xamarin configurator enables you to create and design custom components. In this lesson, you will use the configurator to design and create a radial gauge without writing a single line of code. The configurator enables you to design the background, layout, color palette, and many other aspects of a radial gauge.
At the end of this lesson, you will have created a radial gauge quickly and easily by using the Ultimate UI for Xamarin.
You can download the project used in this lesson by clicking here.
Then, to run the projects for the first time after un-zipping, load the entire solution into Visual Studio, right-click on the Solution, and select Restore Packages.
Once that is complete, add a reference to both the Portable Class Library and the Android project to DataSource.DataProviders.OData.Core.dll. This file is in the OtherDependencies folder that is part of the ZIP download. You can do this by right-clicking the Reference folder in the Project, browsing to the OtherDependencies folder, and selecting the DataSource.DataProviders.OData.Core.dll.
Do this for both projects in the solution. Then, finally, ensure the Target Android Version is set to "Use Compile using SDK version." You can find this setting by right-clicking on the Android project and selecting Properties.
Step 2 Add packages
With the sample project loaded, the first step is to add the Infragistics packages. Right-click the project, and then click Manage NuGet Packages for Solution. Change the package source to Infragistics (local). On the Browse tab, add the Infragistisc.XF.Gauges package to the solution. After the package and dependencies have been installed, three new options should be available in the Infragistics Toolbox:
Step 3 Use the configurator
If necessary, open the MainPage.xaml file in Visual Studio. From the Infragistics Toolbox, drag the stack layout option to the XAML code. Next, drag and drop the XamRadialGauge from the toolbox to the stack layout. The result should look similar to this example.
With the gauge XAML code selected, click the lightbulb, and then click Configure XamRadialGauge to open the configurator. If you receive a message that you need to build the solution, click OK. Right-click the solution, and then click Build, then try to launch the configurator.
Since you specified a stack layout, the configurator will be aware of the layout. Return to the XAML and remove the stack layout code, and then relaunch the gauge configurator. As you can see, it will default to a grid layout automatically.
Click the Gauges dropdown to view the various preset gauges that are available in the toolbox.
Use the different properties for the gauge to see how the affect the layout. You can also adjust the backing to modify the colors that are displayed with the gauge. Combined with transparency, you can embed a gauge into the UI as a native element.
Close the configurator without saving to reset any changes that you’ve made. Open the configurator again, and select a gauge from the Gauges drop-down. Modify the min and max of the gauge to be set to 0 and 75.
With the Radial Gauge properties expanded, set the TransitionDuration property to 500. Modify the value of the gauge, and watch how the gauge reacts to the value being set in as an animation.
On the configurator ribbon, click the Shapes drop-down and select a new shape. Then, click the Brushes drop-down to select a color palette. You can also combine the background of the element on the Brushes drop-down. Expanding the Backing properties, and set a color in the BackingBrush property.
Click the Brushes drop-down menu, and then hold the Ctrl key. Notice that the color palettes are displayed against the selected background, enabling you to select a palette that contrasts with the background. You can also adjust the transparency level of the backing directly from the properties panel.
Click the Scales drop-down menu and select a scale design. Notice how the gauge changes in real-time based on the selection that you make. You can also use the Needles drop-down menu to design the look and feel of the gauge. Each aspect of the gauge has properties that can be configured. For example, in the Needle properties, you can define the brush and outline styles that are used with the gauge.
In the configurator, click Apply and Close. The necessary XAML that creates the visual gauge component is automatically inserted into Visual Studio. Expand the code segments to view all of the properties that the configurator created XAML for.
The Infragistics Toolbox is used to create visual elements, such as gauges, by using a visual configurator that automatically develops the necessary XAML. You can create these components without writing a single line of code, while fine-tuning every detail from the configurator. These controls are available with Infragistics Ultimate UI for Xamarin.