Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
780
Template for a half-circle gauge?
posted

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>

Parents
  • 28496
    Offline posted

    try translating the ContentPresenter in your ControlTemplate down 50 pixels:

                                <ContentPresenter x:Name="RootElement">
                                    <ContentPresenter.RenderTransform>
                                        <TranslateTransform Y="50" />
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>

Reply Children