DevExpress Radial Gauge for .NET MAUI

This example shows how to use the Radial Gauge control to create a dashboard panel in a .NET MAUI app. In this example, the dashboard panel shows a set of gauges used to monitor sensors in a smart home.

Included Controls and Their Properties

• RadialGauge

• DXStackLayout: Orientation, ItemSpacing, ItemsSource, ItemTemplate

• DXWrapLayout: ItemAlignment, IsClippedToBounds, Wrap, LineAlignment, ItemSpacing, LineSpacing, Orientation

• Label: Text

• Switch: IsToggled

Implementation Details

1. To add circular gauges to the dashboard page, use the RadialGauge component. Add different visual indicators (MarkerIndicator, NeedleIndicator, and RangeIndicator) to a gauge scale (RadialScale) to track sensor value changes. A gauge can contain multiple scales.

   <dxga:RadialGauge Style="{StaticResource PrimaryGauge}">
       <dxga:RadialScale StartAngle="-90" SweepAngle="360" Fill="#E1E8D8" 
                         Style="{StaticResource NestedScale}" Offset="0" 
                         StrokeCap="Round" EndValue="{Binding MaxLivingRoomPowerConsumption, Mode=OneTime}">
           <dxga:RangeIndicator EndValue="{Binding LivingRoomPowerLevel}" 
                                Fill="{Binding LivingRoomPowerLevelBrush}" 
                                StrokeCap="Round"/>
       </dxga:RadialScale>
       <dxga:RadialScale> ... </dxga:RadialScale>
       <dxga:RadialScale> ... </dxga:RadialScale>
   </dxga:RadialGauge>

2. To add a text label to the center of a gauge, you can define the RadialGauge.Content property.

   Use the OnDisplaySize extension to set the font size value depending on the current display size.

   <dxga:RadialGauge Style="{StaticResource PrimaryGauge}">
       <dxga:RadialGauge.Content>
           <Label Style="{StaticResource PrimaryText}" Text="{Binding TotalPowerLevel, StringFormat='{0:F1}'}" FontSize="{dxcr:OnDisplaySize ExtraSmall=14, Small=24}" HorizontalTextAlignment="Center" HorizontalOptions="Center" 
           VerticalOptions="Center" Padding="0"/>
       </dxga:RadialGauge.Content>
   </dxga:RadialGauge>

3. Use DXStackLayout and DXDockLayout components to align gauges on the page.

4. This example uses the DXBorder control to implement a card styled background for gauges.

   <Style TargetType="dxcr:DXBorder" ApplyToDerivedTypes="False">
       <Setter Property="BackgroundColor" Value="{dxcr:ThemeColor Key=SurfaceContainerLowest}" />
       <Setter Property="CornerRadius" Value="7" />
       <Setter Property="Padding" Value="{dxcr:OnDisplaySize Medium=5, Large=10}" />
       <Setter Property="IsClippedToBounds" Value="False" />
       <Setter Property="Shadow">
           <OnPlatform x:TypeArguments="Shadow">
               <On Platform="iOS">
                   <On.Value>
                       <Shadow Brush="{dxcr:ThemeColor Shadow}"
                               Offset="0,2"
                               Radius="2"
                               Opacity="0.22" />
                   </On.Value>
               </On>
               <On Platform="Android" >
                   <On.Value>
                       <Shadow Brush="{dxcr:ThemeColor Shadow}"
                               Offset="0,4"
                               Radius="2"
                               Opacity="0.15" />
                   </On.Value>
               </On>
           </OnPlatform>
       </Setter>
   </Style>

5. To create a legend that lists rooms, this example utilizes the DXStackLayout component. To populate the layout with items, specify the ItemsSource property. The ItemTemplate property defines item appearance.

   <ContentPage.Resources>
       <ResourceDictionary>
           <DataTemplate x:Key="LegendItem" x:DataType="local:RoomInfo">
               <dxcr:DXStackLayout Orientation="Horizontal" ItemSpacing="8">
                   <dxcr:DXBorder BackgroundColor="{Binding Color}" WidthRequest="8"
                               Margin="0" CornerRadius="4"/>
                   <dxcr:DXStackLayout VerticalOptions="Center" ItemSpacing="-2">
                       <Label Text="{Binding Value, StringFormat='{0:F1}'}" 
                           TextColor="{Binding Color}" 
                           FontAttributes="Bold" 
                           FontSize="20" />
                       <Label Style="{StaticResource SecondaryText}" 
                           FontSize="12" 
                           Text="{Binding Room}" />
                   </dxcr:DXStackLayout>
               </dxcr:DXStackLayout>
           </DataTemplate>
       </ResourceDictionary>
   </ContentPage.Resources>
   <!--...-->
   <dxcr:DXStackLayout ItemsSource="{Binding Rooms}"
                       ItemTemplate="{StaticResource LegendItem}"
                       ItemSpacing="16" />

Files to Review

• MainPage.xaml

Documentation

• Radial Gauge
• Layouts
• Color Themes
• Featured Scenarios

More Examples

• DevExpress .NET MAUI Demo Center
• Stocks App
• Data Grid
• Data Form
• Data Editors
• Charts
• Scheduler
• Tab Page
• Tab View
• Drawer Page
• Drawer View
• Collection View
• Popup

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)