Radgauge style code-behind(C#)

[Grtjn]

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

 

="{StaticResource RadialScaleHalfCircleNStyle}"

 

)

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

Kind regards,

Gertjan

[Andrey]

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.

[Grtjn]

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

[Andrey]

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.

[Grtjn]

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>

 

 

 

<gauge:RadialRange Min="0"

 

 

Max="29.99"

 

 

Location="Inside"

 

 

StartWidth="0.05"

 

 

EndWidth="0.05"

 

 

Background="Red"/>

 

 

 

<gauge:RadialRange Min="30"

 

 

Max="59.99"

 

 

Location="Inside"

 

 

StartWidth="0.05"

 

 

EndWidth="0.05"

 

 

Background="Yellow" />

 

 

 

<gauge:RadialRange Min="60"

 

 

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

[Grtjn]

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

[Andrey]

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.

[Grtjn]

Awesome, works great.

Big thank you ! :)

Gertjan

[Amol]

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.

please to the needfull.
thanks in Advance.
Amol P.Patil

[Andrey]

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