Gradient

5 posts, 0 answers
  1. Marc
    Marc avatar
    52 posts
    Member since:
    Mar 2017

    Posted 21 Mar 2018 Link to this post

    Hello,

    I need help.

    I'm using a radBulletGraph.

    Set BackColor1 and 2 of bulletGraphQualitativeBar1 to different colors, BrushType is gradient, GradientStyle is linear.

    Gradient is from top to bottom, I want left to right, or right to left. What can I do?

     

    Kind regards

  2. Marc
    Marc avatar
    52 posts
    Member since:
    Mar 2017

    Posted 22 Mar 2018 in reply to Marc Link to this post

    I need somethin like this:

     

  3. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3626 posts

    Posted 23 Mar 2018 Link to this post

    Hello, Marc, 

    By default, the GradientStyles.Linear uses two colors for the gradient. However, I can suggest you specifying the BulletGraphFeaturedMeasureBar.BrushType to GaugeBrushType.Rainbow. Thus, you will obtain a similar gradient to the illustrated one:

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Marc
    Marc avatar
    52 posts
    Member since:
    Mar 2017

    Posted 23 Mar 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hey Dess,

    thank you for your answer, but this isn't what I'm looking for.
    I need the same colors you can see in my picture at post two.

    Kind regards

  5. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3626 posts

    Posted 27 Mar 2018 Link to this post

    Hello, Marc, 
      
    You can create a custom BrushFactory and implement the desired brush you need. Here is demonstrated a sample approach:
    this.bulletGraphFeaturedMeasureBar1.BrushFactory = new MyFactory();

    public class MyFactory : IBrushFactory
    {
        public Brush CreateBrush(GaugeVisualElement owner, GaugeBrushType type)
        {
            LinearGaugeBar bar = owner as LinearGaugeBar;
            if (bar == null)
            {
                return null;
            }
            return CreateRainbowBrush(bar);
        }
     
        private Brush CreateRainbowBrush(LinearGaugeBar bar)
        {
            LinearGradientBrush br = new LinearGradientBrush(bar.BoundingRectangle, Color.Black, Color.Black, (bar.Owner.Vertical ? 90 : 180), false);
            ColorBlend cb = new ColorBlend();
            cb.Positions = new float[8];
            int i = 0;
            for (float f = 0; f <= 1; f += 1.0f / 7)
            {
                cb.Positions[i++] = f;
            }
     
            cb.Colors = new Color[] { Color.Green, Color.FromArgb(120,190,0), Color.FromArgb(200,218,0), Color.FromArgb(220,190,0), Color.FromArgb(205,133,0), Color.FromArgb(190,80,0), Color.Red , Color.Green};
            br.InterpolationColors = cb;
            return br;
        }
    }

    The following articles are quite useful about creating a gradient brush: 
    https://docs.microsoft.com/en-us/dotnet/framework/winforms/advanced/using-a-gradient-brush-to-fill-shapes
    https://stackoverflow.com/questions/7822514/multi-color-linear-gradient-in-winforms
    https://www.codeproject.com/Articles/20018/Gradients-made-easy

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top