Radgauge style code-behind(C#)

10 posts, 1 answers
  1. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 10 Mar 2010 Link to this post

    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
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 10 Mar 2010 Link to this post

    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.
  3. DevCraft banner
  4. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 10 Mar 2010 Link to this post

    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
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 10 Mar 2010 Link to this post

    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.
  6. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 11 Mar 2010 Link to this post

    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
  7. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 11 Mar 2010 Link to this post

    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
  8. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 12 Mar 2010 Link to this post

    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.
  9. Grtjn
    Grtjn avatar
    129 posts
    Member since:
    Feb 2010

    Posted 12 Mar 2010 Link to this post

    Awesome, works great.

    Big thank you ! :)

    Gertjan
  10. Amol
    Amol avatar
    1 posts
    Member since:
    Jan 2012

    Posted 09 Jan 2012 Link to this post

    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
  11. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 12 Jan 2012 Link to this post

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

Back to Top
DevCraft banner