Relative not working
<RelativeLayout>
<telerikGauges:RadRadialGauge x:Name="gauge" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}" >
</telerikGauges:RadRadialGauge>
<Label RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=gauge, Property=X, Factor=0.33}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=gauge, Property=Y, Factor=0.33}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=gauge, Property=Width, Factor=0.33}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=gauge, Property=Height, Factor=0.33}">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="Speed: "/>
<Span Text="33"/>
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</RelativeLayout>
label alignment in top-left, it is not fine
Hello,
I am trying to binding the colors of a GaugeBarIndicator, but it doesn't work. The error is: "Cannot assign property "Color": Property does not exist, or is not assignable, or mismatching type between value and property"
Code XAML file:
<
telerikGauges:RadRadialGauge
x:Name
=
"gauge"
AxisRadiusFactor
=
"1"
StartAngle
=
"90"
SweepAngle
=
"360"
>
<
telerikGauges:RadRadialGauge.Axis
>
<
telerikGauges:GaugeLinearAxis
Minimum
=
"0"
Maximum
=
"1"
StrokeThickness
=
"0"
ShowLabels
=
"False"
/>
</
telerikGauges:RadRadialGauge.Axis
>
<
telerikGauges:RadRadialGauge.Indicators
>
<
telerikGauges:GaugeBarIndicator
Value
=
"1"
StartThickness
=
"10"
EndThickness
=
"10"
Fill
=
"#ebebeb"
/>
<
telerikGauges:GaugeBarIndicator
Value
=
"0.5"
StartCap
=
"Oval"
StartThickness
=
"10"
EndThickness
=
"10"
EndCap
=
"Oval"
IsOffsetRelative
=
"True"
>
<
telerikGauges:GaugeBarIndicator.GradientStops
>
<
telerikCommon:RadGradientStop
Offset
=
"0"
Color
=
"{Binding StartColor}"
/>
<
telerikCommon:RadGradientStop
Offset
=
"1"
Color
=
"{Binding EndColor}"
/>
</
telerikGauges:GaugeBarIndicator.GradientStops
>
</
telerikGauges:GaugeBarIndicator
>
</
telerikGauges:RadRadialGauge.Indicators
>
</
telerikGauges:RadRadialGauge
>
The property in C# file:
private
Color startColor;
public
Color StartColor
{
get
{
return
startColor; }
set
{
startColor = value;
OnNotifyPropertyChanged(
"StartColor"
);
}
}
Do you know how can I make it work?
Thank you.
Hi
I'm trying to use a RadHorizontalGauge with indicators that have some extra width (like a shape indicator which is a large circle or a text indicator containing some words) and i'm unable to display those properly when they are displaying near the Axis' edge values (they are being clipped). I've tried using the Gauge's Padding property (with and without IsClippedToBounds) and unable to get it working properly. The text/shape are being clipped at the edge of the axis and on occasions they are even displayed at an incorrect position (using both Left and Right padding seems to cause a mismatch between the axis tick/label position and the actual value they represent).
How do I get the Gauge to add "padding" to the canvas so the axis/indcators will have room to display longer text values? (like adding Margin to the Axes and Indicators but allow them to display on the entire canvas without being clipped to the axis bounds... the same effect as setting Minimum and Maximum to large values that cause the axis to draw itself farther than the edges, but without actually changing the Minimum/Maximum)
<
ContentView.Resources
>
<
ResourceDictionary
>
<
telerikCommon:RadPathGeometry
x:Key
=
"TickGeometry"
>
<
telerikCommon:RadPathFigure
StartPoint
=
"0.5, 0.5"
>
<
telerikCommon:RadArcSegment
Center
=
"0.5, 0.5"
Size
=
"1, 1"
SweepAngle
=
"360"
/>
</
telerikCommon:RadPathFigure
>
</
telerikCommon:RadPathGeometry
>
</
ResourceDictionary
>
</
ContentView.Resources
>
<
ContentView.Content
>
<
telerikGauges:RadHorizontalGauge
x:Name
=
"gauge1"
IsClippedToBounds
=
"False"
Padding
=
"30,0,30,0"
>
<
telerikGauges:RadGaugeBase.Indicators
>
<
telerikGauges:GaugeShapeIndicator
Value
=
"5"
Shape
=
"{StaticResource TickGeometry}"
Fill
=
"Green"
Position
=
"Center"
Offset
=
"15"
Size
=
"30"
PropertyChanged
=
"GaugeShapeIndicator_PropertyChanged"
/>
<
telerikGauges:GaugeTextIndicator
HorizontalTextPlacement
=
"Center"
StrokeThickness
=
"0"
Text
=
"Text of Indicator"
Value
=
"0"
TextColor
=
"Green"
TextMargin
=
"4"
Position
=
"Start"
VerticalTextPlacement
=
"Top"
Offset
=
"20"
/>
</
telerikGauges:RadGaugeBase.Indicators
>
<
telerikGauges:RadGaugeBase.Axis
>
<
telerikGauges:GaugeLinearAxis
Minimum
=
"0"
Maximum
=
"10"
Step
=
"1"
LabelPosition
=
"End"
LabelOffset
=
"20"
TickOffset
=
"10"
/>
</
telerikGauges:RadGaugeBase.Axis
>
</
telerikGauges:RadHorizontalGauge
>
</
ContentView.Content
>
I have a RadRadialGauge that is working almost exactly like my client wants. I have one issue - the max value label does not display, but the min value ("0 %") does. How can I make the max value label display? And is it possible for control the font sized used by the label?
<
telerikGauges:RadRadialGauge
Margin
=
"0"
Padding
=
"0"
BackgroundColor
=
"Yellow"
x:Name
=
"gauge"
HeightRequest
=
"150"
WidthRequest
=
"150"
>
<
telerikGauges:RadRadialGauge.Axis
>
<
telerikGauges:GaugeLinearAxis
ShowLabels
=
"true"
LabelFormat
=
"P0"
Maximum
=
"{Binding GaugeMax}"
Minimum
=
"0"
Step
=
"10"
StrokeThickness
=
"0"
/>
</
telerikGauges:RadRadialGauge.Axis
>
<
telerikGauges:RadRadialGauge.Indicators
>
<
telerikGauges:GaugeBarIndicator
StartThickness
=
"8"
EndThickness
=
"8"
Value
=
"{Binding GaugeMax}"
Fill
=
"#55A0A0A0"
/>
<
telerikGauges:GaugeBarIndicator
Fill
=
"#d5715b"
StartThickness
=
"8"
EndThickness
=
"8"
Value
=
"{Binding FarmTurnoverLast12Mo}"
StartCap
=
"Flat"
EndCap
=
"Flat"
IsOffsetRelative
=
"true"
>
</
telerikGauges:GaugeBarIndicator
>
<
telerikGauges:GaugeBarIndicator
StartThickness
=
"8"
EndThickness
=
"8"
Value
=
"{Binding GaugeMax}"
Fill
=
"#55A0A0A0"
Offset
=
"15"
/>
<
telerikGauges:GaugeBarIndicator
Fill
=
"#ac5b49"
StartThickness
=
"8"
EndThickness
=
"8"
Value
=
"{Binding ZipTurnoverLast12Mo}"
Offset
=
"15"
StartCap
=
"Flat"
EndCap
=
"Flat"
IsOffsetRelative
=
"true"
>
</
telerikGauges:GaugeBarIndicator
>
<
telerikGauges:GaugeBarIndicator
StartThickness
=
"8"
EndThickness
=
"8"
Value
=
"{Binding GaugeMax}"
Fill
=
"#55A0A0A0"
Offset
=
"25"
/>
<
telerikGauges:GaugeBarIndicator
Fill
=
"#e2a294"
StartThickness
=
"8"
EndThickness
=
"8"
Value
=
"{Binding CountyTurnoverLast12Mo}"
Offset
=
"25"
StartCap
=
"Flat"
EndCap
=
"Flat"
IsOffsetRelative
=
"true"
>
</
telerikGauges:GaugeBarIndicator
>
</
telerikGauges:RadRadialGauge.Indicators
>
</
telerikGauges:RadRadialGauge
>
Hi, I am using RadVerticalGauge for my app and I am encoutering an issue similar to https://www.telerik.com/forums/radradialgauge-not-taking-full-width.
Indeed, I would like to reduce the space taken by the gauge canvas. I have tried using negative margin on the gauge but without success.
Attached the current result.
How can I achieve this ?
Thanks in advance
Hello,
I am now trying out Telerik's controls for my company's needs and I am running into an issue where the RadRadialGauge is not taking up the whole available horizontal space. What we need is only the top half of the gauge, which I am managing by setting the SweepAngle and StartAngle, but the gauge is showing to be way too small. I have checked via the Android Layout Inspector that the Canvas itself is taking up the whole available space. My guess is that because the Gauge is put on the first row of a Grid, it is behaving like it should be a full Gauge rather than a half Gauge and that is why it is taking up less space. I am attaching some code that is similar to what we have now:
<
Grid
Padding
=
"20"
BackgroundColor
=
"White"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"*"
/>
<
RowDefinition
Height
=
"2*"
/>
</
Grid.RowDefinitions
>
<
Grid
HorizontalOptions
=
"FillAndExpand"
VerticalOptions
=
"FillAndExpand"
Grid.Row
=
"0"
IsVisible
=
"{Binding IsGaugeVisible}"
>
<
telerikGauges:RadRadialGauge
x:Name
=
"gauge"
SweepAngle
=
"180"
StartAngle
=
"180"
Margin
=
"0"
>
<
telerikGauges:RadRadialGauge.Axis
>
<
telerikGauges:GaugeLinearAxis
Maximum
=
"100"
Minimum
=
"0"
Step
=
"33"
StrokeThickness
=
"0"
ShowLabels
=
"False"
/>
</
telerikGauges:RadRadialGauge.Axis
>
<
telerikGauges:RadRadialGauge.Indicators
>
<
telerikGauges:GaugeShapeIndicator
Value
=
"{Binding CurrentPercent}"
Fill
=
"White"
Offset
=
"35"
Position
=
"Start"
/>
</
telerikGauges:RadRadialGauge.Indicators
>
<
telerikGauges:RadRadialGauge.Ranges
>
<
telerikGauges:GaugeRangesDefinition
StartThickness
=
"40"
EndThickness
=
"40"
>
<
telerikGauges:GaugeRange
Color
=
"{Static helpers:Constants.Squash}"
From
=
"0"
To
=
"{Binding FirstLimit}"
/>
<
telerikGauges:GaugeRange
Color
=
"{Static helpers:Constants.BlueyGreen}"
From
=
"{Binding FirstLimit}"
To
=
"{Binding SecondLimit}"
/>
<
telerikGauges:GaugeRange
Color
=
"{Static helpers:Constants.PaleRed}"
From
=
"{Binding SecondLimit}"
To
=
"100"
/>
</
telerikGauges:GaugeRangesDefinition
>
</
telerikGauges:RadRadialGauge.Ranges
>
</
telerikGauges:RadRadialGauge
>
<
StackLayout
Orientation
=
"Vertical"
VerticalOptions
=
"Center"
HorizontalOptions
=
"Center"
Spacing
=
"0"
Margin
=
"0, 0, 0, 20"
>
<
Label
Text
=
"{Binding CurrentPercent, StringFormat='{}{0}%'}"
VerticalTextAlignment
=
"Center"
HorizontalTextAlignment
=
"Center"
FontSize
=
"Large"
Margin
=
"0"
/>
<
Label
HorizontalTextAlignment
=
"Center"
VerticalTextAlignment
=
"Center"
FontSize
=
"Medium"
Text
=
"{Binding CurrentStatus}"
Margin
=
"0, 0, 0, 0"
/>
</
StackLayout
>
</
Grid
>
<
TableView
Intent
=
"Form"
Grid.Row
=
"1"
>
<
TableRoot
>
<
TableSection
>
<
ViewCell
>
<
StackLayout
Orientation
=
"Horizontal"
HorizontalOptions
=
"FillAndExpand"
>
<
Image
Source
=
"name"
VerticalOptions
=
"Center"
HorizontalOptions
=
"Start"
WidthRequest
=
"25"
BackgroundColor
=
"LawnGreen"
/>
</
StackLayout
>
</
ViewCell
>
</
TableSection
>
</
TableRoot
>
</
TableView
>
</
Grid
>
Best regards,
Konstantin
Hi all,
I use a very simple RadRadialGauge, when I run in debug my app everything is ok, but when I start it in release mode, I cannot see anything on real device, heres the code:
<telerikGauges:RadRadialGauge StartAngle="90" Margin="0" SweepAngle="360" HorizontalOptions="FillAndExpand" Padding="0" VerticalOptions="FillAndExpand" >
<telerikGauges:RadRadialGauge.Axis>
<telerikGauges:GaugeLinearAxis Maximum="1"
Minimum="0"
ShowLabels="False"
StrokeThickness="0" />
</telerikGauges:RadRadialGauge.Axis>
<telerikGauges:RadRadialGauge.Ranges>
<telerikGauges:GaugeRangesDefinition Offset="0">
<telerikGauges:GaugeRange Color="{StaticResource YukoLightBlue}"
From="0"
To="1" />
</telerikGauges:GaugeRangesDefinition>
</telerikGauges:RadRadialGauge.Ranges>
<telerikGauges:RadRadialGauge.Indicators>
<telerikGauges:GaugeRangeBarIndicator Fill="{StaticResource YukoForceDarkBlue}"
FromCap="ConcaveOval"
ToCap="Oval"
Offset="0"
From="0"
To="0.45" />
</telerikGauges:RadRadialGauge.Indicators>
</telerikGauges:RadRadialGauge>
Any helps is appreciated.
Thanks
Alessio
Hi All,
I want to create a customized radial gauge with animation as shown in attached image as 'DesiredOutput.png'. Can anyone please help me in achieving the same. What I am doing is creating two radial bars with same offset value and then showing the animation. This is working fine but problem with this is that i am unable to show color range with this approach(like green to dark green). Second approach is that i am creating gauge range which gives the proper color range but with no animation and no start and end cap oval. Please tell me the correct approach.
Note :- Attached are three images 'DesiredOutput.png' image is what I want and the other two are what I am able to achieve.
Any help is welcomed. Thanks very much.
I want to add labels on top of (or next to) a Radial Gauge where the respective GaugeRangeBarIndicator is.
01.
<
telerikGauges:RadRadialGauge
StartAngle
=
"90"
SweepAngle
=
"360"
HeightRequest
=
"200"
>
02.
<
telerikGauges:RadRadialGauge.Axis
>
03.
<
telerikGauges:GaugeLinearAxis
Maximum
=
"100"
04.
Minimum
=
"0"
05.
TickLength
=
"10"
06.
TickOffset
=
"2"
07.
ShowLabels
=
"False"
08.
StrokeThickness
=
"0"
/>
09.
</
telerikGauges:RadRadialGauge.Axis
>
10.
<
telerikGauges:RadRadialGauge.Ranges
>
11.
<
telerikGauges:GaugeRangesDefinition
Offset
=
"0"
>
12.
<
telerikGauges:GaugeRange
Color
=
"Gray"
13.
From
=
"0"
14.
To
=
"100"
/>
15.
</
telerikGauges:GaugeRangesDefinition
>
16.
</
telerikGauges:RadRadialGauge.Ranges
>
17.
<
telerikGauges:RadRadialGauge.Indicators
>
18.
<
telerikGauges:GaugeBarIndicator
EndCap
=
"Flat"
19.
Fill
=
"Green"
20.
StartCap
=
"Flat"
21.
Offset
=
"0"
22.
Value
=
"{Binding GreenYellow}"
/>
23.
<
telerikGauges:GaugeRangeBarIndicator
Fill
=
"Yellow"
24.
FromCap
=
"Flat"
25.
ToCap
=
"Flat"
26.
Offset
=
"0"
27.
From
=
"{Binding GreenYellow}"
28.
To
=
"{Binding YellowRed}"
/>
29.
<
telerikGauges:GaugeRangeBarIndicator
Fill
=
"Red"
30.
FromCap
=
"Flat"
31.
ToCap
=
"Flat"
32.
Offset
=
"0"
33.
From
=
"{Binding YellowRed}"
34.
To
=
"100"
/>
35.
</
telerikGauges:RadRadialGauge.Indicators
>
36.
</
telerikGauges:RadRadialGauge
>
How can I add labels next to the specific indicator section? Or is there a way that I can draw them manually?