Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Silverlight > Gauge > Radgauge style code-behind(C#)

Answered Radgauge style code-behind(C#)

Feed from this thread
  • Grtjn Intermediate avatar

    Posted on Mar 10, 2010 (permalink)

    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

    Reply

  • Andrey Andrey admin's avatar

    Posted on Mar 10, 2010 (permalink)

    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.

    Reply

  • Grtjn Intermediate avatar

    Posted on Mar 10, 2010 (permalink)

    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

    Reply

  • Andrey Andrey admin's avatar

    Posted on Mar 10, 2010 (permalink)

    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.

    Reply

  • Grtjn Intermediate avatar

    Posted on Mar 11, 2010 (permalink)

    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

    Reply

  • Grtjn Intermediate avatar

    Posted on Mar 11, 2010 (permalink)

    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

    Reply

  • Answer Andrey Andrey admin's avatar

    Posted on Mar 12, 2010 (permalink)

    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.

    Reply

  • Grtjn Intermediate avatar

    Posted on Mar 12, 2010 (permalink)

    Awesome, works great.

    Big thank you ! :)

    Gertjan

    Reply

  • Amol avatar

    Posted on Jan 9, 2012 (permalink)

    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

    Reply

  • Andrey Andrey admin's avatar

    Posted on Jan 12, 2012 (permalink)

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

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Silverlight > Gauge > Radgauge style code-behind(C#)
Related resources for "Radgauge style code-behind(C#)"

Silverlight Gauge Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  ]