CustomLinearScaleRangeBarPresentation.RangeBarTemplate Property

Gets or sets a template that configures the range bar appearance. This is a dependency property.

Namespace: DevExpress.Xpf.Gauges

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

NuGet Package: DevExpress.Wpf.Gauges

Declaration

C#

public ControlTemplate RangeBarTemplate { get; set; }

VB.NET

Public Property RangeBarTemplate As ControlTemplate

Property Value

Type	Description
ControlTemplate	A control template that specifies the range bar visual structure.

Example

This example demonstrates how to define a custom linear scale range and range bar presentation.

Xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:GaugesDemoApp"
        xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges" 
        x:Class="GaugesDemoApp.MainWindow"
        Title="MainWindow" Height="200" Width="300">
    <Grid>
        <dxga:LinearGaugeControl>
            <dxga:LinearGaugeControl.Scales>
                <dxga:LinearScale LayoutMode="LeftToRight" ShowMinorTickmarks="False" >
                    <dxga:LinearScale.Ranges>
                        <dxga:LinearScaleRange StartValue="0" EndValue="100">
                            <dxga:LinearScaleRange.Options>
                                <dxga:RangeOptions Thickness="40" Offset="20"/>
                            </dxga:LinearScaleRange.Options>
                            <dxga:LinearScaleRange.Presentation>
                                <dxga:CustomLinearScaleRangePresentation>
                                    <dxga:CustomLinearScaleRangePresentation.RangeTemplate>
                                        <ControlTemplate>
                                            <Viewbox RenderTransformOrigin="0.5, 1" Width="40" Stretch="Fill">
                                                <Rectangle Fill="LightGray" Width="10" Height="40" Clip="M9,40Q5,2,0,0L10,0 10,40"/>
                                            </Viewbox>
                                        </ControlTemplate>
                                    </dxga:CustomLinearScaleRangePresentation.RangeTemplate>
                                </dxga:CustomLinearScaleRangePresentation>
                            </dxga:LinearScaleRange.Presentation>
                        </dxga:LinearScaleRange>
                    </dxga:LinearScale.Ranges>
                    <dxga:LinearScale.RangeBars>
                        <dxga:LinearScaleRangeBar Value="80" IsInteractive="True">
                            <dxga:LinearScaleRangeBar.Options>
                                <dxga:LinearScaleRangeBarOptions Thickness="40" Offset="20"/>
                            </dxga:LinearScaleRangeBar.Options>
                            <dxga:LinearScaleRangeBar.Presentation>
                                <dxga:CustomLinearScaleRangeBarPresentation>
                                    <dxga:CustomLinearScaleRangeBarPresentation.RangeBarTemplate>
                                        <ControlTemplate>
                                            <Viewbox RenderTransformOrigin="0.5, 1" Width="40" Stretch="Fill">
                                                <Rectangle Fill="Lime" Width="10" Height="40" Clip="M9,40Q5,2,0,0L10,0 10,40"/>
                                            </Viewbox>
                                        </ControlTemplate>
                                    </dxga:CustomLinearScaleRangeBarPresentation.RangeBarTemplate>
                                </dxga:CustomLinearScaleRangeBarPresentation>
                            </dxga:LinearScaleRangeBar.Presentation>
                        </dxga:LinearScaleRangeBar>
                    </dxga:LinearScale.RangeBars>
                </dxga:LinearScale>
            </dxga:LinearGaugeControl.Scales>
        </dxga:LinearGaugeControl>
    </Grid>
</Window>

The image below illustrates the result.