RadGauge and DragDockPanelHost

[gradford]

Hello,

I am currently using the Blacklight Drag Dock Panel for my web dashboard and am using Telerik RadCharts to display various charts inside of each panel. I have gotten every type of chart to work fine, but can't for the life of me get RadGauges to work. Here is how I create the RadGauge: 

public RadGauge AddRadGauge()

{

// create the RadGauge

var radGauge = new RadGauge()

{

Width = 250,

Height = 250

};

// add RadGauge to the LayoutRoot

LayoutRoot.Children.Add(radGauge);

// 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 = 0.75d,

};

// add RadialScale to the RadialGauge

gauge.Items.Add(scale);

// create the Needle

var needle = new Needle()

{

Name = "needle",

Value = 55

};

// add needle to indicators collection

scale.Indicators.Add(needle);

return radGauge;  }

As you can see I am not doing any data binding or random needle values, I just wanted to get it to show up in my drag dock panel with a default value. This is how I call the AddRadGauge function:

        private void AddPanel(int panelIndex)
        {
             ContentControl temp = new ContentControl();
             temp = AddRadGauge();

             string TempHeader = "Radial Gauge";

             this.panels.Add(new Blacklight.Controls.DragDockPanel()
             {
                  Header = TempHeader,
                  Content = temp,
             });
        }

I was thinking the problem might be that I am adding the RadGauge as a Child of LayoutRoot and should be adding it to something else... What is the point of adding it to the LayoutRoot? The program compiles and runs but then just freezes on the Silverlight 100% Loading Animation. I am able to create gauges in XAML, but I need them to be a part of the Drag Dock Panel, so I need to write them in C#. 

Any questions/suggestions?

[Andrey]

Hi Garrett,

If you need to adding gauge to the Drag Dock Panel, then you should not add the RadGauge object to the LayoutRoot. Just remove this code from the AddRadGauge method. The following version of this method works correctly.

public RadGauge AddRadGauge()
{
    // create the RadGauge
    var radGauge = new RadGauge()
    {
        Width = 250,
        Height = 250
    };
    // 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 = 0.75d,
    };
    // add RadialScale to the RadialGauge
    gauge.Items.Add(scale);
    // create the Needle
    var needle = new Needle()
    {
        Name = "needle",
        Value = 55
    };

    // add needle to indicators collection
    scale.Indicators.Add(needle);
    return radGauge;
}

Also you can add gauge into Drag Dock Panel with using the following sample XAML code:

<panel: DragDockPanel>
    <control:RadGauge Width="250" Height="250">
        <gauge:RadialGauge>
            <gauge:RadialScale>
                <gauge:IndicatorList>
                    <gauge:Needle />
                </gauge:IndicatorList>
            </gauge:RadialScale>
        </gauge:RadialGauge>
    </control:RadGauge>
</panel: DragDockPanel>

Sincerely yours,
Andrey Murzov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[gradford]

Thank you for your prompt response. It turns out I kept trying to create a RadialGauge without specifying the Height and Width, and apparently that's a no-no. Taking out the

LayoutRoot.Children.Add(radGauge);

 

line did end up working for me, as long as I specified the height and width. Is there any way to automatically set the height and width based on the panel size?

[Andrey]

Hello Garrett,

The Drag Dock Panel container does not provide correct initial size for its content. It provides infinity as the size to the gauge.
Currently the RadGauge component does not support containers with this behavior. We will consider how to fix this problem for next versions.

As workaround you can add RadGauge inside Drag Dock Panel within a grid and handle SizeChanged event of the grid to resize the gauge. I have attached the sample solution that contains resizable gauge.

Kind regards,
Andrey Murzov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.