Circular Gauge CustomImage Needle

Gauge for WPF Forum

The latest build of this product (v21.1.3) was released 3 months ago, which was before this thread was created.
Posted 2 months ago by Victor Tolosana
Version: 21.1.3
Avatar

Hello, 

Can you please share some example of the CustomImage needle type on a circular gauge please ?

I couldn't find any in the Sample Browser.

Is it possible to resize the image to always fit in the gauge, even when its size changes ?

I would like to use images as I can't seem to resize geometry paths.

Thank you.

Comments (4)

Posted 2 months ago by Actipro Software Support - Cleveland, OH, USA
Avatar

The CustomImage needle type will draw the image at its native resolution, so it will not grow as the gauge changes size.

You mention you are looking at CustomImage because the geometry paths are not resizing. Maybe we could focus on that instead? Could you post a quick sample of what you're trying to do with geometry paths that isn't working? If its more complex than a forum post, could you send a sample to our support email address and remove the bin/obj folders from the zip file?


Actipro Software Support

Posted 2 months ago by Victor Tolosana
Avatar

Ok, thanks for the info.

Here is a sample of my code. The needle is a geometry path and it is always the same absolute size, it doesn't shrink/grow as the rest of the gauge. 

<Grid>
        <DockPanel x:Name="GaugesDockPanel" LastChildFill="False" Visibility="Hidden">

            <!-- Roll Gauge -->
            <gauge:CircularGauge x:Name="GaugeRoll" Visibility="Collapsed" DockPanel.Dock="Right" HorizontalAlignment="Right" Grid.Column="6" 
                                 VerticalAlignment="Bottom" Margin="{Binding Path=Margins}" FrameType="CircularTopGradient" Width="{Binding Path=GaugesSize}" Height="{Binding Path=GaugesSize}" 
                                 Radius="100%" Background="#444444" RimBrush="#444444">
                <gauge:CircularGauge.Scales>
                    <gauge:CircularScale Radius="94%" StartAngle="270" SweepAngle="360" IsBarVisible="False" BarExtent="0">
                        <gauge:CircularScale.TickSets>
                            <gauge:CircularTickSet IsReversed="True"  Minimum="-180" Maximum="180" MajorInterval="30" MinorInterval="10">
                                <gauge:CircularTickSet.Ticks>
                                    <gauge:CircularTickMarkMinor TickMarkAscent="1.3%" TickMarkExtent="6%"
													Background="WhiteSmoke"
													ScalePlacement="Inside" />
                                    <gauge:CircularTickMarkMajor TickMarkAscent="2.6%" TickMarkExtent="15%"
													Background="WhiteSmoke"
													ScalePlacement="Inside"/>
                                    <gauge:CircularTickLabelCustom Value="90" Foreground="White" FontWeight="Bold"
													    ScalePlacement="Inside" FontSize="17%" Text="Roll" ScaleOffset="125%"/>
                                </gauge:CircularTickSet.Ticks>
                                <gauge:CircularTickSet.Pointers>
                                    <gauge:CircularPointerNeedle Value="0" x:Name="GaugeRollNeedle" NeedleType="CustomGeometry"
													Background="{shared:LinearGradientBrush White, Gray, GradientType=TopToBottom}"
													BorderBrush="DarkGray" BorderWidth="1" PointerAscent="100" PointerExtent="25"
													ScalePlacement="Inside" ScaleOffset="2" PointerDirection="ShortestDistance">
                                        <gauge:CircularPointerNeedle.Geometry>
                                            <GeometryGroup>
                                                <Geometry>M 0 50.096071 C 0 49.573651 0 50.426351 0 49.903931 C 0 49.381521 2.20826 48.963591 4.96857 48.963591 L 9.93714 48.963591 L 9.93714 39.560191 C 9.93714 33.918151 10.26838 30.156791 10.76524 30.156791 C 11.24873 30.156791 11.59333 33.307211 11.59333 37.727371 L 11.59333 45.297941 C 13.31643 42.832831 14.62127 42.267491 17.39 42.533301 L 17.39 19.513371 C 17.39 -4.71931 18.28872 -6.41696 20.15147 14.616011 C 20.56346 19.267881 20.9155 33.295161 21.52961 36.896321 C 23.12006 46.222871 22.73386 44.036851 24.0288 45.906251 C 25.32374 47.775641 25.32374 52.224361 24.0288 54.093751 C 22.73386 55.963151 23.12006 53.777131 21.52961 63.103681 C 20.9155 66.704841 20.56346 80.732121 20.15147 85.383991 C 18.28872 106.41696 17.39 104.71931 17.39 80.486631 L 17.39 57.466701 C 14.62127 57.732511 13.31643 57.167171 11.59333 54.702061 L 11.59333 62.272631 C 11.59333 66.692791 11.24873 69.843211 10.76524 69.843211 C 10.26838 69.843211 9.93714 66.081851 9.93714 60.439811 L 9.93714 51.036411 L 4.96857 51.036411 C 2.20826 51.036411 0 50.618481 0 50.096071 z</Geometry>
                                            </GeometryGroup>
                                        </gauge:CircularPointerNeedle.Geometry>
                                    </gauge:CircularPointerNeedle>                                    
                                </gauge:CircularTickSet.Pointers>
                            </gauge:CircularTickSet>
                        </gauge:CircularScale.TickSets>
                    </gauge:CircularScale>
                </gauge:CircularGauge.Scales>
            </gauge:CircularGauge>

Thank you for your help.

Answer - Posted 2 months ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Thank you for providing the sample XAML. It looks like the issue is that the PointerAscent and PointerExtent values are expressed as absolute sizes. If you want the geometry to grow dynamically with the gauge, the sizes need to be expressed as a percentage. I pasted your sample needle into our Dynamic Sizing QuickStart for Gauge and then changed the PointerAccent from "100" to "100%" and the PointerExtent from "25" to "25%". With that change, I see the needle geometry scale up and down as the gauge is resized.


Actipro Software Support

Posted 2 months ago by Victor Tolosana
Avatar

Thank you very much, it works as expected !

I don't know how I missed it.

Have a nice day.

Add Comment

Please log in to a validated account to post comments.