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>
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... :-) ).
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>