Linear Gauge Value Label Question

9 posts, 3 answers
  1. James
    James avatar
    44 posts
    Member since:
    Jan 2012

    Posted 16 Feb 2012 Link to this post

    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
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 21 Feb 2012 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. James
    James avatar
    44 posts
    Member since:
    Jan 2012

    Posted 21 Feb 2012 Link to this post

    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
  5. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 24 Feb 2012 Link to this post

    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 >>
  6. James
    James avatar
    44 posts
    Member since:
    Jan 2012

    Posted 27 Feb 2012 Link to this post

    Andrey,

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

    Thanks,

    James
  7. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 01 Mar 2012 Link to this post

    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 >>
  8. James
    James avatar
    44 posts
    Member since:
    Jan 2012

    Posted 02 Mar 2012 Link to this post

    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
  9. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 07 Mar 2012 Link to this post

    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 >>
  10. James
    James avatar
    44 posts
    Member since:
    Jan 2012

    Posted 07 Mar 2012 Link to this post

    Andrey,

    Worked like a charm.  

    Thanks,

    James
Back to Top
UI for WPF is Visual Studio 2017 Ready