Questions on UI for Xamarin Forum

1 answer

143 views

Relative Layot

Relative not working

label alignment in top-left, it is not fine

Gauges

answered on 13 Nov 2020

3 answers

753 views

Binding Color in Gradient Stops

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.

Gauges

answered on 11 May 2020

7 answers

278 views

RadHorizontalGauge - Axis/Indicators and padding

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>

Gauges

answered on 25 Nov 2019

1 answer

87 views

GaugeLinearAxis shows Min label but not Max label

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>

Gauges

answered on 10 Jun 2019

3 answers

129 views

RadVerticalGauge does not take full canavs space

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

Gauges

answered on 11 Feb 2019

3 answers

176 views

RadRadialGauge not taking full width

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>

Again, out goal is for the half Gauge we have to occupy the full space that is available. The version of the controls I am using is the latest Trial version. So far I can see that if I set the Grid that contains the Gauge to have a RowSpan of 2, the Gauge appears at the center of the screen and occupies most of the width available. My problem with that approach is that I need it at the start of the screen, and setting VerticalOptions to StartAndExpand does not really help - the Gauge appears small again. I hope you will be able to help me with this as we are seriously considering buying the Xamarin UI pack if it proves possible to do what we want.

Best regards,

Konstantin

Gauges

answered on 06 Nov 2018

6 answers

96 views

Question about the possibilities of charts and gauges in Telerik UI for Xamarin Forms

Hi everyone,

A while ago we developed an app for one of our customers, using Telerik UI for Xamarin Forms. The app is used for showing financial data.
Recently, our client has made changes to the specifications and design of the used Telerik components.

At this moment my most experienced Xamarin developer is not available, but I need information if the design and specifications made are possible or not in Telerik UI for Xamarin Forms.
Can you provide me with information? As soon as I know what is or is not possible, I can pass this on to my client, after which my developer will be able to realize this as soon as he is present again.
Underlying information: The data from the charts and widgets is fed from an underlying database and can be configured yourself (the customer can decide for himself which financial data is shown where and hat is shown (line chart, piechart, bar chart or gauge))
See the added images

Gauge
In the current app of our customer, we did not use gauges. So far, we do not have any experience with it yet. I read on the Telerik website that a lot can be customized, but can not find clear information about how far this is possible.
Is this design of the gauge within Telerik possible? Think of the shape, whether it is possible to give the color / color gradient per gauge, the needle

Barchart
Is it possible to give a color gradient?

Linechart
In the desktop version of the application we use Telerik UI for ASP.NET MVC. Here, bullets are shown per series in a line chart. Is this also possible in the Xamarin Forms version?

Gauges

answered on 12 Sep 2018

1 answer

126 views

Bug - RadRadialGauge is not visible in Release on an Android device

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

Gauges

answered on 29 May 2018

4 answers

152 views

Problem in Customizing Radial Gauge

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.

Gauges