Scale.ShowLabels Property

Gets or sets a value indicating whether labels should be displayed on a scale.

Namespace: DevExpress.Xpf.Gauges

Assembly: DevExpress.Xpf.Gauges.v24.2.dll

NuGet Package: DevExpress.Wpf.Gauges

Declaration

C#

public DefaultBoolean ShowLabels { get; set; }

VB.NET

Public Property ShowLabels As DefaultBoolean

Property Value

Type	Description
DefaultBoolean	true to show labels on a scale; otherwise false.

Available values:

Name	Description	Return Value
True	The value is true.	0
False	The value is false.	1
Default	The value is specified by a global option or a higher-level object.	2

Remarks

Set the ShowLabels property value to either DefaultBoolean.True or DefaultBoolean.False to control the visibility of labels on a Circular or Linear scale.

Note that by default, the ShowLabels property is set to DefaultBoolean.Default. This means that label visibility is defined by the current model of a gauge control, set by the CircularGaugeControl.Model or LinearGaugeControl.Model properties.

Example

The following example illustrates a gauge that looks and behaves like a typical ‘knob’ element of a real-life dashboard. In this case we demonstrate how to create, for example, a realistic volume control.

To provide its appearance, we use custom templates for an arc scale’s needle and layer elements. For your convenience, these templates are stored in the KnobRestoreDictionary.xaml file, and named OscilloscopeNeedleTemplate and OscilloscopeScaleLayerTemplate. They can be easily re-used in your application.

This knob also provides the capability to interactively modify its value via mouse clicks. To enable this, the ValueIndicatorBase.IsInteractive property of a gauge’s needle is set to True to enable its interactivity.

Finally, below the knob-like gauge, there is a Label control, which is bound to the ValueIndicatorBase.Value property of a needle to display the current volume set by knob.

View Example

KnobResourceDictionary.xaml)

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ControlTemplate x:Key="OscilloscopeNeedleTemplate">
        <Grid RenderTransformOrigin="0, 0.5" Width="100" Height="100" Margin="-50,0,0,0">
            <Ellipse Margin="6" Fill="Transparent"/>
            <Grid x:Name="Needle" Margin="0">
                <Ellipse Width="7" Height="7" Fill="#FF1B5D83" HorizontalAlignment="Right" Margin="0,0,15,0"/>
                <Ellipse Width="5" Height="5" Fill="#FF3286AD" HorizontalAlignment="Right" Margin="0,0,16,0"/>
                <Path Stretch="Fill" Fill="#FF1A2752" 
                      Data="F1 M 830,569.016L 833.004,569.016C 833.001,569.172 833,569.328 833,569.484C 833,569.662 833.001,569.839 833.005,570.016L 830,570.016L 830,569.016 Z M 830.491,563.969L 830.685,562.988L 833.626,563.57C 833.556,563.895 833.491,564.222 833.433,564.551L 830.491,563.969 Z M 832.153,558.138L 832.535,557.214L 835.298,558.356C 835.166,558.661 835.039,558.97 834.917,559.28L 832.153,558.138 Z M 834.938,552.69L 835.494,551.859L 837.989,553.526C 837.799,553.8 837.614,554.077 837.433,554.358L 834.938,552.69 Z M 838.715,547.944L 839.422,547.237L 841.539,549.353C 841.299,549.585 841.063,549.821 840.832,550.061L 838.715,547.944 Z M 843.327,544.011L 844.158,543.454L 845.827,545.948C 845.547,546.129 845.27,546.315 844.997,546.505L 843.327,544.011 Z M 848.636,541.068L 849.56,540.684L 850.703,543.438C 850.393,543.561 850.085,543.689 849.78,543.823L 848.636,541.068 Z M 854.447,539.181L 855.427,538.986L 856.012,541.927C 855.684,541.986 855.357,542.051 855.032,542.122L 854.447,539.181 Z M 860.484,538.5L 861.484,538.5L 861.484,541.488C 861.323,541.486 861.162,541.484 861,541.484C 860.828,541.484 860.656,541.486 860.484,541.489L 860.484,538.5 Z M 866.546,538.981L 867.527,539.175L 866.945,542.117C 866.62,542.046 866.293,541.982 865.964,541.923L 866.546,538.981 Z M 872.391,540.664L 873.315,541.046L 872.176,543.804C 871.871,543.671 871.563,543.543 871.252,543.421L 872.391,540.664 Z M 877.82,543.44L 878.651,543.995L 876.983,546.492C 876.71,546.301 876.433,546.116 876.153,545.935L 877.82,543.44 Z M 882.578,547.237L 883.285,547.944L 881.168,550.061C 880.937,549.821 880.701,549.585 880.461,549.354L 882.578,547.237 Z M 886.491,551.837L 887.048,552.668L 884.553,554.338C 884.373,554.057 884.187,553.78 883.997,553.507L 886.491,551.837 Z M 889.444,557.165L 889.828,558.088L 887.065,559.235C 886.943,558.925 886.815,558.617 886.682,558.312L 889.444,557.165 Z M 891.31,562.962L 891.505,563.942L 888.563,564.528C 888.504,564.199 888.439,563.872 888.369,563.547L 891.31,562.962 Z M 892,569.016L 892,570.016L 888.995,570.016C 888.998,569.839 889,569.662 889,569.484C 889,569.328 888.999,569.172 888.996,569.016L 892,569.016 Z M 891.504,575.03L 891.31,576.011L 888.368,575.429C 888.438,575.104 888.503,574.776 888.561,574.447L 891.504,575.03 Z M 889.836,580.89L 889.454,581.815L 886.677,580.667C 886.811,580.362 886.938,580.054 887.061,579.744L 889.836,580.89 Z M 887.045,586.304L 886.489,587.136L 883.993,585.468C 884.183,585.194 884.369,584.917 884.55,584.637L 887.045,586.304 Z M 883.263,591.078L 882.556,591.785L 880.423,589.652C 880.663,589.421 880.899,589.185 881.131,588.946L 883.263,591.078 Z M 878.648,594.975L 877.817,595.532L 876.147,593.037C 876.428,592.857 876.705,592.671 876.978,592.481L 878.648,594.975 Z M 873.336,597.944L 872.412,598.328L 871.257,595.546C 871.568,595.424 871.876,595.296 872.181,595.163L 873.336,597.944 Z M 867.523,599.794L 866.542,599.989L 865.957,597.047C 866.286,596.988 866.613,596.924 866.938,596.854L 867.523,599.794 Z M 861.484,600.5L 860.484,600.5L 860.484,597.48C 860.656,597.483 860.828,597.484 861,597.484C 861.162,597.484 861.323,597.483 861.484,597.48L 861.484,600.5 Z M 855.485,599.994L 854.504,599.8L 855.086,596.859C 855.411,596.929 855.738,596.993 856.067,597.051L 855.485,599.994 Z M 849.638,598.347L 848.714,597.966L 849.864,595.183C 850.17,595.315 850.478,595.442 850.789,595.564L 849.638,598.347 Z M 844.206,595.546L 843.375,594.991L 845.042,592.495C 845.316,592.685 845.593,592.871 845.873,593.051L 844.206,595.546 Z M 839.444,591.785L 838.737,591.078L 840.869,588.946C 841.101,589.186 841.337,589.421 841.577,589.653L 839.444,591.785 Z M 835.527,587.158L 834.97,586.327L 837.464,584.658C 837.645,584.938 837.831,585.215 838.021,585.488L 835.527,587.158 Z M 832.568,581.865L 832.185,580.941L 834.957,579.79C 835.08,580.1 835.208,580.408 835.342,580.713L 832.568,581.865 Z M 830.696,576.038L 830.501,575.057L 833.443,574.472C 833.502,574.801 833.567,575.128 833.637,575.453L 830.696,576.038 Z " 
                      HorizontalAlignment="Center" Height="85" Margin="0" VerticalAlignment="Center" Width="85" Opacity="0.35"/>
            </Grid>
        </Grid>
    </ControlTemplate>
    <ControlTemplate x:Key="OscilloscopeScaleLayerTemplate">
        <Grid RenderTransformOrigin="0.5, 0.5" Width="100" Height="100">
            <Ellipse Fill="White" Margin="0,1,0,-1" Opacity="0.9"/>
            <Ellipse Fill="#FFAEB3BE" Margin="0,0,0,1"/>
            <Ellipse Grid.Column="1" Margin="0,1,0,0">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFCBCFD5" Offset="0"/>
                        <GradientStop Color="#FFF5F6F7" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Path Stretch="Fill" Data="F1 M 798,507C 798,540.137 784.121,567 767,567C 749.879,567 736,540.137 736,507L 798,507 Z " 
                  HorizontalAlignment="Center" Height="56.5" Margin="0,0,0,-18.5" VerticalAlignment="Bottom" Width="64">
                <Path.Fill>
                    <RadialGradientBrush Center="0.5,0.002" GradientOrigin="0.5,0.002" RadiusY="0.688" RadiusX="0.533">
                        <GradientStop Color="#FF2D344B" Offset="0"/>
                        <GradientStop Color="#002D344B" Offset="1"/>
                        <GradientStop Color="#CC2D344B" Offset="0.8"/>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
            <Ellipse Margin="6">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFBCC0CA" Offset="0"/>
                        <GradientStop Color="#FF5C6378" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Margin="7">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFFAFAFC" Offset="0"/>
                        <GradientStop Color="#FF9499AB" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Margin="10" Fill="White"/>
            <Ellipse Margin="10,11,10,10">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFE9EBEE" Offset="0"/>
                        <GradientStop Color="#FFCFD4DA" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Grid>
    </ControlTemplate>
</ResourceDictionary>

MainWindow.xaml

<Window x:Class="DXGauges_Knobs.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges"
        Title="MainWindow" Height="200" Width="350" MinHeight="200" MinWidth="350">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="KnobResourceDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="125"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <dxga:CircularGaugeControl Height="100" Width="100" >
            <dxga:CircularGaugeControl.Scales>
                <dxga:ArcScale StartValue="0" EndValue="100" 
                               StartAngle="-230" EndAngle="50"
                               MajorIntervalCount="1" MinorIntervalCount="24" 
                               ShowLabels="False">
                    <!--region #Needles-->
                    <dxga:ArcScale.Needles>
                        <dxga:ArcScaleNeedle x:Name="needle" IsInteractive="True">
                            <dxga:ArcScaleNeedle.Options>
                                <dxga:ArcScaleNeedleOptions EndOffset="10" />
                            </dxga:ArcScaleNeedle.Options>
                            <dxga:ArcScaleNeedle.Presentation>
                                <dxga:CustomArcScaleNeedlePresentation
                                    NeedleTemplate="{StaticResource OscilloscopeNeedleTemplate}" />
                            </dxga:ArcScaleNeedle.Presentation>
                        </dxga:ArcScaleNeedle>
                    </dxga:ArcScale.Needles>
                    <!--endregion #Needles-->
                    <!--region #Layers-->
                    <dxga:ArcScale.Layers>
                        <dxga:ArcScaleLayer>
                            <dxga:ArcScaleLayer.Presentation>
                                <dxga:CustomArcScaleLayerPresentation 
                                    ScaleLayerTemplate="{StaticResource OscilloscopeScaleLayerTemplate}" />
                            </dxga:ArcScaleLayer.Presentation>
                        </dxga:ArcScaleLayer>
                    </dxga:ArcScale.Layers>
                    <!--endregion #Layers-->
                    <!--region #Tickmarks-->
                    <dxga:ArcScale.TickmarksPresentation>
                        <dxga:SmartTickmarksPresentation 
                            MajorTickBrush="#FF7C8295" MinorTickBrush="#FF7C8295" />
                    </dxga:ArcScale.TickmarksPresentation>
                    <dxga:ArcScale.MajorTickmarkOptions>
                        <dxga:MajorTickmarkOptions Offset="-2" />
                    </dxga:ArcScale.MajorTickmarkOptions>
                    <dxga:ArcScale.MinorTickmarkOptions>
                        <dxga:MinorTickmarkOptions Offset="-2" />
                    </dxga:ArcScale.MinorTickmarkOptions>
                    <!--endregion #Tickmarks-->
                </dxga:ArcScale>
            </dxga:CircularGaugeControl.Scales>
        </dxga:CircularGaugeControl>
        <Label  Grid.Row="1" Foreground="Blue" Height="28" Width="92" 
                HorizontalAlignment="Center" VerticalAlignment="Top"
                Content="{Binding ElementName=needle, Path=Value }"
                ContentStringFormat=" Volume: {0:f0} % " />
    </Grid>
</Window>

Related GitHub Examples

The following code snippet (auto-collected from DevExpress Examples) contains a reference to the ShowLabels property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

XAML

wpf-gauges-create-a-knob-like-gauge/CS/DXGauges_Knobs/MainWindow.xaml#L23

           MajorIntervalCount="1" MinorIntervalCount="24"
           ShowLabels="False">
<!--region #Needles-->