Can anyone provide a XamWebRadialGauge template that uses only a half circle, rather than the full ellipse? I've tried using a Path and setting the start and end angle on the gauge to 180,360 but the control still centers around what the full ellipse would be and then my path shows up in the middle of that, so I can't get things to align correctly.
Here's my attempt below. Any help would be much appreciated.
Thanks,Keith
<UserControl.Resources> <Style x:Key="BlackGauge" TargetType="igGauge:XamWebRadialGauge"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igGauge:XamWebRadialGauge"> <Grid> <Path Stroke="Gray" Fill="LightGray" StrokeThickness="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto" Stretch="Uniform" > <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="0,100" > <PathFigure.Segments> <ArcSegment Size="100,300" RotationAngle="0" IsLargeArc="False" SweepDirection="Clockwise" Point="100,100"/> <LineSegment Point="0,100"></LineSegment> </PathFigure.Segments> </PathFigure > </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> <ContentPresenter x:Name="RootElement"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <igGauge:XamWebRadialGauge x:Name="radial" Margin="5" Style="{StaticResource BlackGauge}" > <igGauge:XamWebRadialGauge.Scales> <igGauge:RadialGaugeScale StartValue="0" EndValue="100" StartAngle="180" EndAngle="360" > <igGauge:RadialGaugeScale.LabelGroups> <igGauge:RadialGaugeLabelGroup Foreground="Black" Extent="0.7" Interval="20" Orientation="Horizontal" PreTerminal="0" ZIndex="1"/> </igGauge:RadialGaugeScale.LabelGroups> <igGauge:RadialGaugeScale.Needles> <igGauge:RadialGaugeNeedle EndExtent="0.55" InverseBrushRotation="False" Value="30" ZIndex="1"/> </igGauge:RadialGaugeScale.Needles> <igGauge:RadialGaugeScale.Ranges> <igGauge:RadialGaugeRange EndValue="100" Fill="OrangeRed" InnerExtentEnd="0.5" InnerExtentStart="0.5" OuterExtent="0.6" Stroke="{x:Null}"/> </igGauge:RadialGaugeScale.Ranges> <igGauge:RadialGaugeScale.TickMarkGroups> <igGauge:RadialGaugeTickMarkGroup EndExtent="0.6" Interval="10" StartExtent="0.5" ZIndex="1"/> <igGauge:RadialGaugeTickMarkGroup EndExtent="0.6" Interval="5" StartExtent="0.5" ZIndex="1"/> </igGauge:RadialGaugeScale.TickMarkGroups> </igGauge:RadialGaugeScale> </igGauge:XamWebRadialGauge.Scales> </igGauge:XamWebRadialGauge> </Grid>
try translating the ContentPresenter in your ControlTemplate down 50 pixels:
<ContentPresenter x:Name="RootElement"> <ContentPresenter.RenderTransform> <TranslateTransform Y="50" /> </ContentPresenter.RenderTransform> </ContentPresenter>
Thanks David. That works pretty well if I statically size the gauge (i'd played with grid rows too and that worked out alright having the path span 1 row and content presenter span 2). But, one thing I love about your gauges versus others I've looked at is they resize well. If I just drop the XAML above on a user control and show just that and resize the browser, it gets off. I can figure the static size and get that right, and then scaletransform as needed on resize, but I'd love to not have to do it that way. Can you think of any way to make things scale nicely without needing to handling the transform manually?Either way, I have path now that'll work, so that's further than I was. Thanks again,Keith
i wish i could make that translate transform relative. but since i can't, here's another solution: it uses a Grid in the ControlTemplate to offset the Path.
<ControlTemplate TargetType="igGauge:XamWebRadialGauge"> <Grid> <Grid.RowDefinitions> <RowDefinition Height=".1*" /> <RowDefinition Height=".45*" /> <RowDefinition Height=".45*" /> </Grid.RowDefinitions> <Path Stroke="Gray" Fill="LightGray" StrokeThickness="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto" Stretch="Uniform" Grid.Row="1" > <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="0,100" > <PathFigure.Segments> <ArcSegment Size="100,300" RotationAngle="0" IsLargeArc="False" SweepDirection="Clockwise" Point="100,100"/> <LineSegment Point="0,100"></LineSegment> </PathFigure.Segments> </PathFigure > </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> <ContentPresenter x:Name="RootElement" Grid.RowSpan="3" /> </Grid> </ControlTemplate>
I have a sample semi-circular radial gauge that was provided by Chris Taylor of Soluxions and which I think is worth sharing:
The sample source code for the above gauge is also attached.
try using a top margin or a rendertransform to shift everything down. if that doesn't help, maybe a picture or some sample code/xaml would help me diagnose the problem better.
Hi,
I need only the half-crcle Guage meter without any border. I am able to do this with the help of previous comments but there are some white space comes on the bottom half of the guage. How can I remove the white space in bottom half?
Perfect! Thanks, David. I was heading down that path with the Grid, just didn't think to add the .1 buffer row at top. I can work from here to pretty it up (believe it or not, that's not the final look I'm going for... :-) ).