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