Linear Gauge Value Label Question

[James]

I am attempting to create a linear gauge that reflects the same properties of an older gauge that I have used in the past.  I have both the new and old gauges displayed in the attached screenshot.  What I need to know is how can I add a "Value Label" to my gauge (WPF) so that it will consistently display above the Marker as the Marker changes in value.  Thanks for any help that can be offered.

I am using version 2011.2.712.35 of the WPF control set.

 James

[Andrey]

Hello James,

I can't recommend using this version with the gauge control for the new application. In the 2011.Q3 release we introduce new gauge control. It is almost new control redesigned from scratch. Some its features are similar to the old control’s features but they are implemented in absolutely different way (using different set of properties), some features are completely new.
Our demo application now references new gauge control and demonstrates its features. We recommend that you use the new gauge control in new applications. We would also recommend replacing the old control with new one in existing applications if there is a timeframe for this task. To avoid cross-controls problems we removed the old control from the default Telerik namespace in the 2011.Q3 release.

So, please, upgrade the version of WPF controls to a new one. Note, currently the gauge application required references to the following DLLs:
- Telerik.Windows.Controls.dll
- Telerik.Windows.Controls.DataVisualization.dll
- Telerik.Windows.Data.dll

You can use the Custom Items feature to create a "Value Label" for the new gauge control. You can use the code like below.

<Window x:Class="ValueLabelOfMarker.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <telerik:RadHorizontalLinearGauge>
            <telerik:RadHorizontalLinearGauge.Template>
                <ControlTemplate>
                    <ItemsPresenter />
                </ControlTemplate>
            </telerik:RadHorizontalLinearGauge.Template>
            <telerik:LinearScale Min="0" Max="10"
                                 MajorTickStep="1"
                                 MajorTickRelativeHeight="0.05"
                                 MinorTicks="1"
                                 Fill="Black"
                                 StartWidth="0.005"
                                 EndWidth="0.005"
                                 LabelLocation="Inside"
                                 LabelOffset="0.01">
                <telerik:LinearScale.Indicators>
                    <telerik:Marker x:Name="marker"
                                    telerik:ScaleObject.Location="Outside"
                                    telerik:ScaleObject.Offset="0.05"
                                    telerik:ScaleObject.RelativeHeight="0.085"
                                    telerik:ScaleObject.RelativeWidth="0.025"
                                    Background="LightGray"
                                    BorderBrush="Black"
                                    BorderThickness="1"
                                    Value="5.37891">
                        <telerik:Marker.Template>
                                <ControlTemplate TargetType="telerik:Marker">
                                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Polygon Points="0,0 0,0.7 0.5,1 1,0.7 1,0"
                                                 Stretch="Fill"
                                                 Fill="{TemplateBinding Background}"
                                                 Stroke="{TemplateBinding BorderBrush}"
                                                 StrokeThickness="{TemplateBinding BorderThickness}" />
                                    </Grid>
                                </ControlTemplate>
                        </telerik:Marker.Template>
                    </telerik:Marker>
                </telerik:LinearScale.Indicators>
                <telerik:LinearScale.CustomItems>
                    <TextBlock Width="Auto"
                               Height="Auto"
                               Foreground="Black"
                               Text="{Binding ElementName=marker, Path=Value, StringFormat='F2'}"
                               telerik:ScaleObject.Location="Outside"
                               telerik:ScaleObject.Offset="0.15"
                               telerik:ScaleObject.Value="{Binding ElementName=marker, Path=Value}"/>
                </telerik:LinearScale.CustomItems>
            </telerik:LinearScale>
        </telerik:RadHorizontalLinearGauge>
    </Grid>
</Window>

All the best,
Andrey Murzov
the Telerik team

[James]

Andrey,

If I am not able to procure a newer version is there a way with the older version to have the Value Label Dispay next to the Marker as described earlier?  Thanks,

James

[Andrey]

Hello James,

For the older version of gauge control for this purpose you can use the CustomTickMark element. The sample code is below.

<Window x:Class="ResizableHorizontalGauge.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <telerik:LinearGauge>
            <telerik:LinearScale x:Name="scale"
                                 SizeChanged="scale_SizeChanged"
                                 Orientation="Horizontal"
                                 Top="0.3"
                                 Left="0.15"
                                 RelativeHeight="0.7"
                                 StartWidth="0.2"
                                 EndWidth="0.2">
                <telerik:LinearScale.Label>
                    <telerik:LabelProperties Location="Inside" />
                </telerik:LinearScale.Label>
                <telerik:TickList>
                    <telerik:CustomTickMark Value="{Binding ElementName=marker, Path=Value}"
                                            Location="Outside"
                                            Foreground="Transparent">
                        <telerik:CustomTickMark.Template>
                            <ControlTemplate TargetType="telerik:CustomTickMark">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Bottom"
                                           Foreground="White"
                                           FontWeight="Bold"
                                           Text="{Binding ElementName=marker, Path=Value, StringFormat=F2}" />
                            </ControlTemplate>
                        </telerik:CustomTickMark.Template>
                    </telerik:CustomTickMark>
                </telerik:TickList>
                <telerik:IndicatorList>
                    <telerik:Marker Name="marker"
                                    Location="OverCenter"
                                    Value="85"
                                    RelativeHeight="0.05"
                                    RelativeWidth="0.05"/>
                </telerik:IndicatorList>
            </telerik:LinearScale>
        </telerik:LinearGauge>
    </Grid>
</Window>

All the best,
Andrey Murzov
the Telerik team

[James]

Andrey,

Would you please show me how to implement this in the code behind?

Thanks,

James

[Andrey]

Hi James,

In the code behind you can create the custom tick mark and the marker like this:

Marker marker = new Marker()
{
    Location = ScaleObjectLocation.OverCenter,
    RelativeWidth = 0.05,
    RelativeHeight = 0.05,
    Value = 85
};

linearScale.Indicators.Add(marker);

ControlTemplate template = XamlReader.Parse(""
    + "<ControlTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\""
    + " xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\""
    + " xmlns:telerik=\"http://schemas.telerik.com/2008/xaml/presentation\""
    + " TargetType=\"telerik:CustomTickMark\">"
    + "<TextBlock x:Name=\"textBox\" HorizontalAlignment=\"Center\""
           + " VerticalAlignment=\"Bottom\""
           + " Foreground=\"White\""
           + " FontWeight=\"Bold\""
           + "/>"
    + "</ControlTemplate>") as ControlTemplate;

CustomTickMark tick = new CustomTickMark()
{
    Location = ScaleObjectLocation.Outside,
    Foreground = new SolidColorBrush(Colors.Transparent),
    Template = template
};

Binding binding = new Binding();
binding.Source = marker;
binding.Path = new PropertyPath("Value");
tick.SetBinding(CustomTickMark.ValueProperty, binding);

tick.ApplyTemplate();
TextBlock text = template.FindName("textBox", tick) as TextBlock;

binding = new Binding();
binding.Source = marker;
binding.Path = new PropertyPath("Value");
binding.StringFormat = "F2";
text.SetBinding(TextBlock.TextProperty, binding);

linearScale.Ticks.Add(tick);

Kind regards,
Andrey Murzov
the Telerik team

[James]

Andrey,

Thank you for the answer to this.  I am able to get the TextBlock to display with a value and that is working ok.  The problem that I am having now is that on the scale there is an extra value that is being displayed at the location of the scale value.  How do I remove this or if I choose to use that value then how do I format the number.  Please see the attached screenshot for an example.

Thanks for your help,

James

[Andrey]

Hi James,

You can remove the label (extra value) from custom tickmark by setting its ItemTemplate property to null. The sample code is below.

CustomTickMark tick = new CustomTickMark()
{
    Location = ScaleObjectLocation.Outside,
    ItemTemplate = null,
    Template = template
};

Regards,
Andrey Murzov
the Telerik team

[James]

Andrey,

Worked like a charm.  

Thanks,

James