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

Radgauge style code-behind(C#)

9 Answers 279 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Grtjn
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

 

="{StaticResource RadialScaleHalfCircleNStyle}"

 

)


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

Kind regards,

Gertjan

9 Answers, 1 is accepted

Sort by
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>

 

 

 

<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
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.

please to the needfull.
thanks in Advance.
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
Gauge
Asked by
Grtjn
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Grtjn
Top achievements
Rank 1
Amol
Top achievements
Rank 1
Share this question
or