SemicircleWestScale Custum Item showing behind GuageRange.Background

4 posts, 0 answers
  1. Michael
    Michael avatar
    6 posts
    Member since:
    Feb 2013

    Posted 26 Feb 2013 Link to this post

    I have a SemicircleWestScale and I am attempting to use a custom item for a marker.  I also have a coupld of ranges setup.  The background is set to an imagebrush.  The custom item is showing behind the background range.  What needs to change to get the custom item to the foreground. 

    Thanks,

    Joe

    <telerik:SemicircleWestScale.Ranges>
                                <telerik:GaugeRange Min="0" Max="100">
                                    <telerik:GaugeRange.Background>
                                        <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/radiation_scale.png"/>
                                    </telerik:GaugeRange.Background>
                                </telerik:GaugeRange>
                                <telerik:GaugeRange Min="20" Max="80" >
                                    <telerik:GaugeRange.Background>
                                        <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/radiation_scale_green.png"/>
                                    </telerik:GaugeRange.Background>
                                </telerik:GaugeRange>
                            </telerik:SemicircleWestScale.Ranges>
                            <telerik:SemicircleWestScale.CustomItems>
                                <Image  telerik:ScaleObject.Value="{Binding Data.Value, UpdateSourceTrigger=PropertyChanged}" Source="pack://siteoforigin:,,,/Resources/radiation_marker.png" IsHitTestVisible="False" />
                            </telerik:SemicircleWestScale.CustomItems>
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 01 Mar 2013 Link to this post

    Hello Michael,

    This problem could be solved using the Canvas.ZIndex attachable property to display the textblock over the scale elements. The gauge control uses the following ZIndex value for its elements:
     - 100 for Ranges
     - 200 for Ticks
     - 300 for Labels
     - 400 for Indicators
    For example you can set the Canvas.ZIndex value to 500 to display your image above the standard elements of the scale.

    But unfortunately, there is a problem with using this property in the Q1.2013 version of RadControls. We have created the PITS issue to fix it. The fix should be available in the nearest internal build. You can track it using the following link:
    http://www.telerik.com/support/pits.aspx#/public/wpf/14385

    As workaround you can use Marker with custom template which will contain your image.
    The sample code is below.

    <telerik:SemicircleWestScale.Indicators>
        <telerik:Marker Value="{Binding Data.Value, UpdateSourceTrigger=PropertyChanged}"
                        Canvas.ZIndex="500">
            <telerik:Marker.Template>
                <ControlTemplate TargetType="telerik:Marker">
                    <Image Source="pack://siteoforigin:,,,/Resources/radiation_marker.png" IsHitTestVisible="False" />
                </ControlTemplate>
            </telerik:Marker.Template>
        </telerik:Marker>
    </telerik:SemicircleWestScale.Indicators>

    Greetings,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Michael
    Michael avatar
    6 posts
    Member since:
    Feb 2013

    Posted 04 Mar 2013 Link to this post

    The reason we are using a custom item is because the marker rotates.  Is there a way to not have the marker rotate around the gauge?
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 05 Mar 2013 Link to this post

    Hi Michael,

    You can use RadialScale.RotationMode attachable property for these purposes. For example:
    <telerik:SemicircleWestScale.Indicators>
        <telerik:Marker Value="{Binding Data.Value, UpdateSourceTrigger=PropertyChanged}"
            telerik:RadialScale.RotationMode="None"
            Canvas.ZIndex="500">
            <telerik:Marker.Template>
                <ControlTemplate TargetType="telerik:Marker">
                    <Image Source="pack://siteoforigin:,,,/Resources/radiation_marker.png" IsHitTestVisible="False" />
                </ControlTemplate>
            </telerik:Marker.Template>
        </telerik:Marker>
    </telerik:SemicircleWestScale.Indicators>


    Kind regards,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top