RadRadialGauge interactivity breaks with an effect applied to containing grid

[Andrew]

I'm currently testing out the Q1 2015 Trial before deciding to completely upgrade my application. One of the views in the application uses the RadRadialGauge with an interactive RadialScale. A custom ShaderEffect effect is applied to the root Grid in the application. When I navigate to the page containing the gauge, my application crashes with a UCEERR_RENDERTHREADFAILURE exception. If, however, I use one of the included effects (DropShadow or Blur) the app doesn't crash but the needle is no longer interactive. I have a sample solution I can provide if desired and will provide basic xaml below.

Any thoughts on what I might be able to do to either work around this problem or get an assurance this can be fixed? I'm considering the upgrade for some of the new WPF Reporting tools and I'd hate to not be able to do it because of the RadialGauge.

 

Sample MainWindow.xaml:

<Window x:Class="RadialGaugeTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:aldis="http://schemas.aldiscorp.com/xaml/"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <!-- DropShadow -->
        <!--<Grid.Effect>
            <DropShadowEffect ShadowDepth="5" Color="#3fff" />
        </Grid.Effect>-->

        <!-- Blur -->
        <!--<Grid.Effect>
            <BlurEffect Radius="0.2" />
        </Grid.Effect>-->

        <telerik:RadRadialGauge Grid.Row="1" Grid.Column="1" x:Name="radialGauge" telerik:StyleManager.Theme="Windows8">
            <telerik:RadialScale Min="1" Max="12" IsInteractive="True">
                <telerik:RadialScale.Indicators>
                    <telerik:Needle />
                    <telerik:Pinpoint />
                </telerik:RadialScale.Indicators>
            </telerik:RadialScale>
        </telerik:RadRadialGauge>
    </Grid>
</Window>

[Andrew]

I've continued playing around with this with the effect disabled and it seems my problem is two-fold, although likely stemming from the same root issue. The same error occurs if the gauge is wrapped in a RadTransitionControl and undergoes transition, presumably because an effect or transform is applied to the control.

[Andrew]

Does anyone look at these forum posts?

[Martin Ivanov]

Hello Andrew,

It seems that this is an issue in the scale of the RadRadialGauge control which appears when the IsInteractive property is set to True. We logged it in our feedback portal where you can track its status and vote for its fix. We also updated your Telerik points as a small gesture of gratitude for reporting the issue.

As a workaround you can disable the interaction with the scale and implement the moving of the indicators on MouseLeftButtonDown. Here is an example:

<telerik:RadRadialGauge MouseLeftButtonDown="RadRadialGauge_MouseLeftButtonDown" >
    <telerik:RadialScal Min="1" Max="12" IsInteractive="False">
        <telerik:RadialScale.Indicators>
            <telerik:Needle />
            <telerik:Pinpoint />
        </telerik:RadialScale.Indicators>
    </telerik:RadialScale>
</telerik:RadRadialGauge>

Note that the IsInteractive property's default value is False so you can just skip setting it.

private void RadRadialGauge_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    var mousePosition = e.GetPosition(this.rs1);

    double value = this.rs1.GetValueByPoint(mousePosition);
    foreach (UIElement element in this.rs1.Indicators)
    {
        InteractiveIndicator indicator = element as InteractiveIndicator;
        if (indicator != null)
        {
            indicator.Value = value;
        }
    }
}

Please let me know if you need any further assistance.

Regards,
Martin
Telerik

[Andrew]

Thanks! I expanded upon that a bit to mimic the native behavior of IsInteractive="True". In case anyone else comes across this, here's what I did:

<telerik:RadRadialGauge>
    <telerik:RadialScale Name="scale" Min="1" Max="12"
        MouseLeftButtonUp="scale_MouseLeftButtonUp"
        MouseMove="scale_MouseMove"
        LostMouseCapture="scale_LostMouseCapture">
        <telerik:RadialScale.Indicators>
            <telerik:Needle Name="needle" MouseLeftButtonDown="needle_MouseLeftButtonDown" />
            <telerik:Pinpoint />
        </telerik:RadialScale.Indicators>
    </telerik:RadialScale>
</telerik:RadRadialGauge>

public bool dragAction = false;

private void DragMove(MouseEventArgs e)
{
    var mousePosition = e.GetPosition(this.scale);

    double value = this.scale.GetValueByPoint(mousePosition);
    foreach (UIElement element in this.scale.Indicators)
    {
        InteractiveIndicator indicator = element as InteractiveIndicator;
        if (indicator != null)
        {
            indicator.Value = value;
        }
    }
    e.Handled = true;
}

private void needle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    dragAction = true;
    scale.CaptureMouse();
    scale_MouseMove(this.needle, e);
}

private void scale_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    dragAction = false;
    scale.ReleaseMouseCapture();
}

private void scale_MouseMove(object sender, MouseEventArgs e)
{
    if (dragAction)
    {
        this.DragMove(e);
    }
}

private void scale_LostMouseCapture(object sender, MouseEventArgs e)
{
    dragAction = false;
}

[Martin Ivanov]

Hi Andrew,

I am glad to hear that you managed to integrate and expand my solution in your project. And also thank you for sharing the upgraded approach with our community. I believe this will be quite helpful for someone that encounter the same issue.

Regards,
Martin
Telerik