This is a migrated thread and some comments may be shown as answers.

Linear Gauge Value Label Question

8 Answers 152 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 16 Feb 2012, 05:17 PM
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

8 Answers, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 21 Feb 2012, 12:09 PM
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"
        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

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
James
Top achievements
Rank 1
answered on 21 Feb 2012, 02:56 PM
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
0
Accepted
Andrey
Telerik team
answered on 24 Feb 2012, 02:22 PM
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"
        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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
James
Top achievements
Rank 1
answered on 27 Feb 2012, 05:30 PM
Andrey,

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

Thanks,

James
0
Accepted
Andrey
Telerik team
answered on 01 Mar 2012, 03:20 PM
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\""
    + " 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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
James
Top achievements
Rank 1
answered on 03 Mar 2012, 01:08 AM
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
0
Accepted
Andrey
Telerik team
answered on 07 Mar 2012, 12:06 PM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
James
Top achievements
Rank 1
answered on 07 Mar 2012, 03:09 PM
Andrey,

Worked like a charm.  

Thanks,

James
Tags
Gauges
Asked by
James
Top achievements
Rank 1
Answers by
Andrey
Telerik team
James
Top achievements
Rank 1
Share this question
or