Vertical LinearGauge - 180° Radial gauge?

[ManniAT]

Hi,

we (again after a stopped approach due to missing documentation) start a project using your WPF Controls.
We currently use (just for silverlight) another Linear gauge - and there we simply set Orientation="Horizontal".

We messed around a lot with your linear Gauge (documentation became much better) - but could not find out how to creat a horizontal gauge.

The other thing is about Radial Gauge.
We need a 180° Gauge - and had problems to build this with your control.
Neither in the demos - nor in the documentation we find something about how to build such a gauge.
All we found out is, that if Width and Height have different values everything gets "displaced"

Could you please tell us if both (hori - linear / 180* radial) is impossible - or if we simply missed somethin?

Regards

Manfred

[Andrey]

Hi Manfred,

The horizontal linear gauge can be created using rotation transform:

<telerik:RadGauge>
    <Grid Width="300" Height="70">
        <telerik:LinearGauge>
            <telerik:LinearScale Name="linearScale"
                     Min="0"
                     Max="100"
                     StartWidth="0.1"
                     EndWidth="0.1"
                     StrokeThickness="1"
                     MajorTicks="5"
                     MiddleTicks="1"
                     MinorTicks="5">
                <telerik:LinearScale.MajorTick>
                    <telerik:TickProperties Length="0.1"
                       TickWidth="0.1"
                       Location="OverCenter">
                    </telerik:TickProperties>
                </telerik:LinearScale.MajorTick>
                <telerik:LinearScale.MiddleTick>
                    <telerik:TickProperties Length="0.025"
                       TickWidth="0.5"
                       Location="OverCenter"/>
                </telerik:LinearScale.MiddleTick>
                <telerik:LinearScale.MinorTick>
                    <telerik:TickProperties Length="0.02"
                       TickWidth="0.3"
                       Location="OverCenter"/>
                </telerik:LinearScale.MinorTick>
                <telerik:LinearScale.Label>
                    <telerik:LabelProperties>
                        <DataTemplate>
                            <TextBlock HorizontalAlignment="Center"
                                   FontFamily="Arial"
                                   FontSize="12"
                                   Text="{Binding}">
                            <TextBlock.LayoutTransform>
                                <RotateTransform CenterX="0" CenterY="0" Angle="-90" />
                            </TextBlock.LayoutTransform>
                            </TextBlock>
                        </DataTemplate>
                    </telerik:LabelProperties>
                </telerik:LinearScale.Label>
                <telerik:LinearScale.LayoutTransform>
                    <RotateTransform CenterX="0" CenterY="0" Angle="90" />
                </telerik:LinearScale.LayoutTransform>
            </telerik:LinearScale>
        </telerik:LinearGauge>
    </Grid>
</telerik:RadGauge>

Layout of the radial scale is controlled by StartAngle and SweepAngle properties of the RadialScale object. They are described in the Gauge->Radial scales->Scale layout example. To create 180° radial gauge you have to set StartAngle="180" and SweepAngle="180". If you'd like to change scale appearance so its background looks like a half of circle then you have to change RadialGauge control template:

<UserControl ...>

    <UserControl.Resources>
        <ControlTemplate x:Key="NewGaugeBackground" TargetType="ContentControl">
            <Grid Width="{TemplateBinding Width}"
              Height="{TemplateBinding Height}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="15"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="15"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="15"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="15"/>
                </Grid.RowDefinitions>

                <Path Grid.ColumnSpan="3"
                      Grid.RowSpan="3"
                      Stretch="Uniform"
                      Fill="SkyBlue"
                      VerticalAlignment="Top">
                    <Path.Data>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigure StartPoint="0,0.5">
                                    <ArcSegment IsLargeArc="True"
                                            Point="2,0.5"
                                            Size="1,1"
                                            SweepDirection="Clockwise"/>
                                    <LineSegment Point="2,0.6" />
                                    <LineSegment Point="0,0.6" />
                                </PathFigure>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </Path.Data>
                </Path>
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="NewGaugeTemplate" TargetType="gauge:RadialGauge">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <Grid>
                    <ContentControl Template="{StaticResource NewGaugeBackground}"/>
                    <ItemsPresenter />
                </Grid>
            </Border>
        </ControlTemplate>

        <Style x:Key="NewGaugeStyle" TargetType="gauge:RadialGauge">
            <Setter Property="Template" Value="{StaticResource NewGaugeTemplate}" />
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <control:RadGauge x:Name="radGauge" Width="300" Height="300">
            <gauge:RadialGauge Style="{StaticResource NewGaugeStyle}" >
                <gauge:RadialScale Min="0"
                                   Max="255"
                                   Center="0.5,0.5"
                                   StartAngle="180"
                                   SweepAngle="180"
                                   MajorTicks="17">
                    <gauge:RangeList>
                        <gauge:RadialRange
                            Name="Green"
                            Min="0"
                            Max="255"
                            StartWidth="0.02"
                            EndWidth="0.1"
                            Location="Inside"
                            Background="CadetBlue"
                            BorderBrush="Blue"/>
                    </gauge:RangeList>
                    <gauge:IndicatorList>
                        <gauge:StateIndicator Name="stateIndicator"
                                              Left="0.435"
                                              Top="0.2"
                                              RelativeWidth="0.25"
                                              RelativeHeight="0.25">
                        </gauge:StateIndicator>
                        <gauge:Needle x:Name="needle" />
                    </gauge:IndicatorList>
                </gauge:RadialScale>
            </gauge:RadialGauge>
        </control:RadGauge>
    </Grid>
</UserControl>

Regards,
Andrey Murzov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[ManniAT]

Hi,

I tried the linear gauge first.
Although it is "impressing" that instead an Orientation=Horizontal I have to write so much XAML - it looks like a linear gauge now.
BUT - and that is a thing I also noticed with your gauges - there is no "value" property on your gauges.
So with the radial I learned that I have to use needle -- but how about that "new" hori-gauge?

Where do I bind the value?
In the samples I found something about linear indicator or so - but I can't find it here in your sample.

I like your great support and the efforts you make for your customers.
Thank you for this!!!

But don't you thing there is something wrong with your gauges design?
Just by competiting it to some other controls of this kind I learned a few things:
A - your control is highly customiceabel - great.
BUT - it has almost no "out of the box" functionality.
As a sample:
<someType:Gauge Min="0" Max="255" MajorTickFrequncy="20" Value="{Binding Something}" Height="100" Width="300" Orientation="Horizontal" />
DONE

And even if I say - OK your gauge is "new" (so no horizontal is included).
Also a vertical (radial) Gauge is not buildable in this logic an simple way -- there is no "Value" property.
Instead I get a gray frame and an orange background.
--And it is a graphical resource instead of a brush where the fillcolor is setable.
--So no way to say Background="Gray" - and have a gray radial brush filling the gauge.
--Instead I would have to provide a complete style just to change the background color.

The reason why we use your controls:
We want to avoid "root developement" - so we expect that your controls work for common situations with as little effort as possible.
Or in other words: what we expect is something like you ASP.NET controls.
Drag them on the form - set some needed parameters - and done - a great looking, fast working control in a few seconds.
AND - if really needed everthing is (OPTIONAL!!!!!) customizeable :)
Simply from the very basic idea of object oriented design I guess:
There is a gauge. - Gauge is defined as an instrument to graphicly display a value.
So value should be a property of it.
-- Like for a progesss bar, a slider or such controls, am I right? :)

Anyhow please tell me how to have a value depending on your sample!!!

The next is the 180° radial gauge.
I copied the sample to a new usercontrol.

Since it was unclear I defined
xmlns:gauge="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:control="http://schemas.telerik.com/2008/xaml/presentation

 

 

What I get is:
Fehler 1 Einem Objekt vom Typ "Telerik.Windows.Controls.Gauges.RadialScale" kann kein Inhalt hinzugefügt werden. Zeile 72 
Fehler 2 Der RadialScale-Typ unterstützt keine direkten Inhalte.
for the line:
 <gauge:RangeList>  

<gauge:RadialRange .....  

 

In english:
You can not add content to a type "....."
The RadialScale-Type does not support direct content.

I can't get it running - pleas help (maybe I did something wrong with the namespaces).

Regards

Manfred

[Andrey]

Hello Manfred Pohler,

In the RadGauge control the Value is a property of the indicator (Marker, RadialBar, LinearBar, Needle, NumericIndicator or StateIndicator) because every scale can contains more than one indicator. For example, analog clock can contain 3 indicators (hour, minute and seconds) in the same scale. Every gauge can contain more than one scale. For example, speedometer which shows kilometers and miles at same time, has 2 scales with only one indicator. This is why Value cannot be a property of the gauge or scale.

I did not put a whole XAML for the linear gauge. All our samples contain indicators so I thought it would not be a problem to show only a part of the code.  Simply add the following XAML before <telerik:LinearScale.LayoutTransform>:

<telerik:LinearScale.Indicators>
    <telerik:Marker Name="marker"/>
</telerik:LinearScale.Indicators>

Then you can bind Value property of the marker.

Both “Linear scale” and “Radial scale” example groups contain examples (“Linear scale indicators” and “Scale indicators” correspondently) which demonstrate how the scale indicators work and how they can be customized.

I do apologize for the radial scale example. I included sample code for the Q1.2009 release, whereas you should use the following XAML instead:

<Window x:Class="TestRadGauge.Window1"
        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="Window1"
        Height="400"
        Width="400">
    <Window.Resources>
        <ControlTemplate x:Key="NewGaugeBackground" TargetType="{x:Type ContentControl}">
            <Grid Width="{TemplateBinding Width}"
                  Height="{TemplateBinding Height}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="15"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="15"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="15"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="15"/>
                </Grid.RowDefinitions>

                <Path Grid.ColumnSpan="3"
                      Grid.RowSpan="3"
                      Stretch="Uniform"
                      Fill="SkyBlue"
                      VerticalAlignment="Top">
                    <Path.Data>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigure StartPoint="0,0.5">
                                    <ArcSegment IsLargeArc="True"
                                            Point="2,0.5"
                                            Size="1,1"
                                            SweepDirection="Clockwise"/>
                                    <LineSegment Point="2,0.6" />
                                    <LineSegment Point="0,0.6" />
                                </PathFigure>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </Path.Data>
                </Path>
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="NewGaugeTemplate" TargetType="{x:Type telerik:RadialGauge}">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <Grid>
                    <ContentControl Template="{StaticResource NewGaugeBackground}"/>
                    <ItemsPresenter />
                </Grid>
            </Border>
        </ControlTemplate>

        <Style x:Key="NewGaugeStyle" TargetType="{x:Type telerik:RadialGauge}">
            <Setter Property="Template" Value="{StaticResource NewGaugeTemplate}" />
        </Style>
    </Window.Resources>
    <Grid Width="300" Height="300">
        <telerik:RadGauge>
            <telerik:RadialGauge Style="{StaticResource NewGaugeStyle}">
                <telerik:RadialScale Min="0"
                                     Max="255"
                                     Radius="1"
                                     Center="0.5,0.5"
                                     StartAngle="180"
                                     SweepAngle="180"
                                     MajorTicks="17">
                    <telerik:RadialScale.Indicators>
                        <telerik:Needle x:Name="needle" />
                    </telerik:RadialScale.Indicators>
                </telerik:RadialScale>

            </telerik:RadialGauge>
        </telerik:RadGauge>
    </Grid>
</Window>

By the way, our control definetely works right "out of the box". You only need 9 very simple lines of XAML to have a well decorated, fully functional linear or radial gauge:

<telerik:RadGauge>
    <telerik:RadialGauge>
        <telerik:RadialScale Min="0" Max="255">
            <telerik:RadialScale.Indicators>
                <telerik:Needle x:Name="needle" />
            </telerik:RadialScale.Indicators>
        </telerik:RadialScale>
    </telerik:RadialGauge>
</telerik:RadGauge>

Moreover, the RadGauge is just a container which allows combining of multiple gauges together. The RadialGauge is just a container which allows having similar decoration for a number of scales. Both RadGauge and RadialGauge elements can be omitted. If you simply want radial scale on red background you can do following:

<Grid Width="300" Height="300">
    <Ellipse Fill="Red" />
    <telerik:RadialScale Min="0" Max="255">
        <telerik:RadialScale.Indicators>
            <telerik:Needle x:Name="needle" />
        </telerik:RadialScale.Indicators>
    </telerik:RadialScale>
</Grid>

If you'd like to have Blue background - simply change the Fill attribute of the Ellipse element.

Greetings,
Andrey Murzov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[ManniAT]

First of all - thanks for the examples.
I work with your products - I guess - more than 5 years.

And I never had a real problem with them - at least not with the ASP.NET - just a little with Winforms.
But a lot of with WPF. :)
Your link to learning resources clearly shows the problem with WPF / Silverligth controls -- a massive lack in documentatition.
Did YOU see anything about your WPF / Silverlight controls at the Telerik Trainer?
I find nothing there - sorry.

And - OK from the point of view you wrote in the last post I learned that a gauge is a container for gauges.....
This was a misunderstandig of the concept.

Anyhow - your 180° Gauge runs - after I set a Width and a Height.
And I have to set them quadratic. Or in other word Height and Width must be equal.

And what do I get now?
A control - the upper half filled with a 180° gauge - and a blank lower half.
So putting this (just for an example) in a StackPanel results in a lot of blank space consumed by the control.

How can I get rid of this "empty lower space" so that I have what I need - a 180° radial gauge?

Regards

Manfred

[Andrey]

Hello Manfred Pohler,

You have to play with size of the container, and Radius and Center properties of the radial scale. The Radius property sets size of the radial scale relative to the minimal dimension (Width or Height) of the parent container. The Center property allows you adjust location of the radial scale inside the parent container. The “0.5,0.5” indicates center of the container. Following XAML creates 180° radial gauge without any empty space (this is a simplified version without extra containers):

<Grid Width="300" Height="170">
    <Rectangle Fill="Blue" />
    <telerik:RadialScale Min="0"
             Max="255"
             StartAngle="180"
             SweepAngle="180"
             Radius="1.7"
             Center="0.5,0.95">
        <telerik:RadialScale.Indicators>
            <telerik:Needle x:Name="needle" />
        </telerik:RadialScale.Indicators>
    </telerik:RadialScale>
</Grid>

The container (Grid) is rectangular (not a square). The Radius property is set to allow scale fill the container. The Center property is set to the bottom of the container with a slight shift so we could see indicator (needle) at the start and end position.

The XAML below represents my previous example with changes made to avoid free space around the radial scale (I’ve colored every element to show that there is no extra space around):

<Window x:Class="TestRadGauge.Window1"
        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="Window1"
        Height="400"
        Width="400">
    <Window.Resources>
        <ControlTemplate x:Key="NewGaugeBackground" TargetType="{x:Type ContentControl}">
            <Grid Width="{TemplateBinding Width}"
                  Height="{TemplateBinding Height}"
                  Background="{TemplateBinding Background}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="15"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="15"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="15"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="15"/>
                </Grid.RowDefinitions>

                <Path Grid.ColumnSpan="3"
                      Grid.RowSpan="3"
                      Stretch="Uniform"
                      Fill="SkyBlue"
                      VerticalAlignment="Top">
                    <Path.Data>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigure StartPoint="0,0.5">
                                    <ArcSegment IsLargeArc="True"
                                            Point="2,0.5"
                                            Size="1,1"
                                            SweepDirection="Clockwise"/>
                                    <LineSegment Point="2,0.6" />
                                    <LineSegment Point="0,0.6" />
                                </PathFigure>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </Path.Data>
                </Path>
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="NewGaugeTemplate" TargetType="{x:Type telerik:RadialGauge}">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <Grid>
                    <ContentControl Template="{StaticResource NewGaugeBackground}"/>
                    <ItemsPresenter />
                </Grid>
            </Border>
        </ControlTemplate>

        <Style x:Key="NewGaugeStyle" TargetType="{x:Type telerik:RadialGauge}">
            <Setter Property="Template" Value="{StaticResource NewGaugeTemplate}" />
        </Style>
    </Window.Resources>
    <Grid Width="300" Height="300" Background="LightGray">
        <telerik:RadGauge>
            <telerik:RadialGauge Width="300"
                                 Height="165"
                                 Background="LightGreen"
                                 Style="{StaticResource NewGaugeStyle}">
                <telerik:RadialScale Min="0"
                                     Max="255"
                                     Radius="1.73"
                                     Center="0.5,0.92"
                                     StartAngle="180"
                                     SweepAngle="180"
                                     MajorTicks="17">
                    <telerik:RadialScale.Indicators>
                        <telerik:Needle x:Name="needle" />
                    </telerik:RadialScale.Indicators>
                </telerik:RadialScale>

            </telerik:RadialGauge>
        </telerik:RadGauge>
    </Grid>
</Window>

Kind regards,
Andrey Murzov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[ManniAT]

Hi Andrey,

once again - thanks a lot for the great support.
I know you do everythig to help your customers - and this was my first impression with your company years ago when I started with a purchase of RAD-Navigation.

I also like the quality of your products.
BUT - and thats my problem - with WPF / Silverlight the things changed a bit.
And the main problem is documentation.
Of course YOU can build that 180° Radial gauge.
But do you really think that this is (without days of investigation) possible for a "normal customer" which has only your documentation?

The second thing is that (for gauge) the concept is "a bit different" than for other gauges.
And this is not cleary stated in your documentation.
No sentence like: a gauge is just a holder for gauges and an "inner-gauge" has no value - instead you set this on a needle... :)

The next thing - you told me - simply change the background of the ellipse.
Do I knwo the name (resource ID or whatever) of it?
Is there any line of documentation to this (real common) thing?
Or a snippet like: if you want to change from orange to....???

You also will not find a "resource listing" in the documentation.
For the display of 7-segment numeric gauges simply use a binding to a static resource named....
You will not find such a dictionary - for the 7-segment (just as an example) I found this out by looking at the source of some example.

These are the things which would make the live much easier.
As well as a number of "exported" properties.
it would not be a big problem to implement a "DisplayBackgroundColor" dep. property which set's the color of the ellipse from the definition of the gauge - overcomming the need to implement a style.

But as the example with the "missing TickFrequency" shows a lot of things are known by you and will be fixed in the next releases.
This gives hope :)

Thanks again and kind regards

Manfred

[Giuseppe]

Hello Manfred,

Thank you for your feedback.

Indeed you are right -- at this moment the documentation for the WPF / Silverlight product lines cannot compare to the ASP.NET AJAX one with respect to quantity and quality. We are constantly striving to improve the situation (as you noticed there is some improvement over the past few months and we have not stopped adding content even now) but the things cannot happen overnight and really as much as we like to we cannot ignore the fact that the ASP.NET product line has a headstart of about 4 years.

Nevertheless, your point is absolutely valid and we understand that the lack of proper documentation (resource listings, etc) significantly slows down the development process. We will also consider our options on exposing certain visual property shortcuts (i.e. the "exported" properties) for the future versions of the control and will add Orientation property to the LinearGauge control that would significantly simplify its initialization in horizontal gauge scenarios.


Regards,
Manol Donev
Charting Product Manager

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[ManniAT]

Hi,

just a little followup -- I'v seen the orientation is in the "what's new" section of Q1 2009 :)

Thank you for this

Manfred