Gauge
Top achievements
Rank 1
Grtjn asked on 10 Mar 2010, 11:39 AM
Hi all,

Again i have a question, hopefully someone from Telerik can answer this one.

I'm trying to create a Radial gauge in code-behind (C#). For this I followed the code-behind from this thread
http://www.telerik.com/community/forums/wpf/gauges/needle-is-not-animated-when-created-in-codebehind.aspx
All did well and I was able to create a gauge.

Now I want a half gauge (180%). In my .xaml file I was able to do this by adding a style (

Style

)

How can i do this in C#? Plz answer my thread this time !

Kind regards,

Gertjan

## 9 Answers, 1 is accepted

0
Andrey
Telerik team
answered on 10 Mar 2010, 01:13 PM
Hi Gertjan,

You can use the following sample code as a base for creating a semicircle gauge:
`// create the RadGauge `
`var radGauge = ``new` `RadGauge() `
`{ `
`    ``Width = 300, `
`    ``Height = 300 * 0.59d `
`}; `
`// create the RadialGauge   `
`var gauge = ``new` `RadialGauge(); `
`// add RadialGauge to the RadGauge   `
`radGauge.Content = gauge; `
`// create the RadialScale   `
`var scale = ``new` `RadialScale() `
`{ `
`    ``Name = ``"scale"``, `
`    ``Min = 0, `
`    ``Max = 100, `
`    ``EndWidth = 0.1, `
`    ``StartWidth = 0.1, `
`    ``MiddleTicks = 2, `
`    ``MinorTicks = 2, `
`    ``Radius = 1.2d, `
`}; `
`// add RadialScale to the RadialGauge   `
`gauge.Items.Add(scale); `
`// load theme to setup semicircular styles `
`var uri = ``new` `Uri(``"/Telerik.Windows.Controls.Gauge;component/Themes/generic.xaml"``, UriKind.Relative); `
`var dictionary = ``new` `ResourceDictionary(); `
`dictionary.Source = uri; `
`// setup semicircular style to the gauge `
`if` `(dictionary.Contains(``"RadialGaugeHalfCircleNStyle"``)) `
`{ `
`    ``gauge.Style = dictionary[``"RadialGaugeHalfCircleNStyle"``] ``as` `Style; `
`} `
`// setup semicircular style to the scale `
`if` `(dictionary.Contains(``"RadialScaleHalfCircleNStyle"``)) `
`{ `
`    ``scale.Style = dictionary[``"RadialScaleHalfCircleNStyle"``] ``as` `Style; `
`} `

Sincerely yours,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Grtjn
Top achievements
Rank 1
answered on 10 Mar 2010, 02:18 PM
Amazing, just what i needed! :)
I am a happy man now!

Now my question is how to add another gauge to a project.
Not sure where to add this and if i have to rewrite all the code again...

Also, how can I let my needle show a value from my database. Is this needle.ValueSource ?

Gertjan
0
Andrey
Telerik team
answered on 10 Mar 2010, 05:12 PM
Hello Gertjan,

You can create method in your code which will create new gauge when you need and return an instance. Then you can use this method whenever you need. See the sample code below. It adds two gauges to the stack panel.

`public` `MainPage() `
`{ `
`    ``InitializeComponent(); `
`    ``Loaded += ``new` `RoutedEventHandler(MainPage_Loaded); `
`} `
`private` `void` `MainPage_Loaded(``object` `sender, RoutedEventArgs e) `
`{ `
`    ``StackPanel stackPanel = ``new` `StackPanel(); `
`    ``this``.LayoutRoot.Children.Add(stackPanel); `
`    ``stackPanel.Children.Add(``this``.CreateGauge()); `
`    ``stackPanel.Children.Add(``this``.CreateGauge()); `
`} `
`private` `RadGauge CreateGauge() `
`{ `
`    ``// create the RadGauge `
`    ``var radGauge = ``new` `RadGauge() `
`    ``{ `
`        ``Width = 300, `
`        ``Height = 300 * 0.59d `
`    ``}; `
`    ``// create the RadialGauge   `
`    ``var gauge = ``new` `RadialGauge(); `
`    ``// add RadialGauge to the RadGauge   `
`    ``radGauge.Content = gauge; `
`    ``// create the RadialScale   `
`    ``var scale = ``new` `RadialScale() `
`    ``{ `
`        ``Min = 0, `
`        ``Max = 100, `
`        ``EndWidth = 0.1, `
`        ``StartWidth = 0.1, `
`        ``MiddleTicks = 2, `
`        ``MinorTicks = 2, `
`        ``Radius = 1.2d, `
`    ``}; `
`    ``// add RadialScale to the RadialGauge   `
`    ``gauge.Items.Add(scale); `
`    ``// load theme to setup semicircular styles `
`    ``var uri = ``new` `Uri(``"/Telerik.Windows.Controls.Gauge;component/Themes/generic.xaml"``, UriKind.Relative); `
`    ``var dictionary = ``new` `ResourceDictionary(); `
`    ``dictionary.Source = uri; `
`    ``// setup semicircular style to the gauge `
`    ``if` `(dictionary.Contains(``"RadialGaugeHalfCircleNStyle"``)) `
`    ``{ `
`        ``gauge.Style = dictionary[``"RadialGaugeHalfCircleNStyle"``] ``as` `Style; `
`    ``} `
`    ``// setup semicircular style to the scale `
`    ``if` `(dictionary.Contains(``"RadialScaleHalfCircleNStyle"``)) `
`    ``{ `
`        ``scale.Style = dictionary[``"RadialScaleHalfCircleNStyle"``] ``as` `Style; `
`    ``} `
`    ``return` `radGauge; `
`} `

Greetings,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Grtjn
Top achievements
Rank 1
answered on 11 Mar 2010, 09:10 AM
Thanks, it worrks fine.

Still I have some questions.
When I want to let the needle show a value from my database, should I do so with the Needle.ValueSource?
Or do I have to do this with the RadialGauge.ItemsSource?

The project I have to make consists of 5 Radial gauges, each representing a different value from my database. And this value is achieved with another query each time.
Can I add these data to my gauges, using the code u last posted (with the CreateGauge() method) ?

Finally my last question (for now), is how I can show a RangeList in the code behind showing different colours ?
XAML -->

<

gauge:RangeList>

Max="29.99"

Location="Inside"

StartWidth="0.05"

EndWidth="0.05"

Background="Red"/>

Max="59.99"

Location="Inside"

StartWidth="0.05"

EndWidth="0.05"

Background="Yellow" />

Max="100"

Location="Inside"

StartWidth="0.05"

EndWidth="0.05"

Background="Green" />

</gauge:RangeList>

I now i need a lot of information, but i can't find some decent documentation on this subject...
Hope you can help me!
If you want to, I can attach my project if that could help you out...

Kind Regards,
Gertjan
0
Grtjn
Top achievements
Rank 1
answered on 11 Mar 2010, 11:24 AM
I figured out my first questions!
So for that I do not need anymore help.

Now I'm still searching for the third question, about the RangeList.

Gertjan
0
Accepted
Andrey
Telerik team
answered on 12 Mar 2010, 02:18 PM
Hi Gertjan,

I've added a code that creates ranges to the CreateGauge method. I hope it helps.
`private` `RadGauge CreateGauge() `
`{ `
`    ``// create the RadGauge `
`    ``var radGauge = ``new` `RadGauge() `
`    ``{ `
`        ``Width = 300, `
`        ``Height = 300 * 0.59d `
`    ``}; `
`    ``// create the RadialGauge   `
`    ``var gauge = ``new` `RadialGauge(); `
`    ``// add RadialGauge to the RadGauge   `
`    ``radGauge.Content = gauge; `
`    ``// create the RadialScale   `
`    ``var scale = ``new` `RadialScale() `
`    ``{ `
`        ``Min = 0, `
`        ``Max = 100, `
`        ``EndWidth = 0.1, `
`        ``StartWidth = 0.1, `
`        ``MiddleTicks = 2, `
`        ``MinorTicks = 2, `
`        ``Radius = 1.2d, `
`    ``}; `
`    ``// add RadialScale to the RadialGauge   `
`    ``gauge.Items.Add(scale); `
`    ``// load theme to setup semicircular styles `
`    ``var uri = ``new` `Uri(``"/Telerik.Windows.Controls.Gauge;component/Themes/generic.xaml"``, UriKind.Relative); `
`    ``var dictionary = ``new` `ResourceDictionary(); `
`    ``dictionary.Source = uri; `
`    ``// setup semicircular style to the gauge `
`    ``if` `(dictionary.Contains(``"RadialGaugeHalfCircleNStyle"``)) `
`    ``{ `
`        ``gauge.Style = dictionary[``"RadialGaugeHalfCircleNStyle"``] ``as` `Style; `
`    ``} `
`    ``// setup semicircular style to the scale `
`    ``if` `(dictionary.Contains(``"RadialScaleHalfCircleNStyle"``)) `
`    ``{ `
`        ``scale.Style = dictionary[``"RadialScaleHalfCircleNStyle"``] ``as` `Style; `
`    ``} `
`    ``// add ranges `
`    ``scale.Ranges.Add(``new` `RadialRange() `
`    ``{ `
`        ``Min = 0, `
`        ``Max = 29.99, `
`        ``Location = ScaleObjectLocation.Inside, `
`        ``StartWidth = 0.05, `
`        ``EndWidth = 0.05, `
`        ``Background = ``new` `SolidColorBrush(Colors.Red) `
`    ``}); `
`    ``scale.Ranges.Add(``new` `RadialRange() `
`    ``{ `
`        ``Min = 30, `
`        ``Max = 59.99, `
`        ``Location = ScaleObjectLocation.Inside, `
`        ``StartWidth = 0.05, `
`        ``EndWidth = 0.05, `
`        ``Background = ``new` `SolidColorBrush(Colors.Yellow) `
`    ``}); `
`    ``scale.Ranges.Add(``new` `RadialRange() `
`    ``{ `
`        ``Min = 60, `
`        ``Max = 100, `
`        ``Location = ScaleObjectLocation.Inside, `
`        ``StartWidth = 0.05, `
`        ``EndWidth = 0.05, `
`        ``Background = ``new` `SolidColorBrush(Colors.Green) `
`    ``}); `
`    ``return` `radGauge; `
`} `

All the best,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Grtjn
Top achievements
Rank 1
answered on 12 Mar 2010, 03:17 PM
Awesome, works great.

Big thank you ! :)

Gertjan
0
Amol
Top achievements
Rank 1
answered on 09 Jan 2012, 01:19 PM
Hi,
I have tried the code to Apply Semi Circle style to My rad gauge.
but i have one problem with it.i am unable to create a dictionary of Generic.XAML.
i never find out the particular file.that's why the Style is not applied to my Gauge.

Amol P.Patil
0
Andrey
Telerik team
answered on 12 Jan 2012, 10:14 AM
Hello Amol,

The 2011.Q3 release contains 2 gauge controls: the old one is in the Telerik.Windows.Controls.Gauge.dll and new one is in the Telerik.Windows.Controls.DataVisualization.dll. Old and new controls use different approaches to show semicircle gauges. Could you, please clarify, which control (old or new) you are using in your application?

All the best,
Andrey Murzov
the Telerik team

Tags
Gauge
Grtjn
Top achievements
Rank 1