This is a migrated thread and some comments may be shown as answers.

Relative Layot

1 Answer 21 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Oleg
Top achievements
Rank 1
Oleg asked on 12 Nov 2020, 07:50 AM

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

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 13 Nov 2020, 11:38 AM

Hello Oleg,

This is not related to the usage of RadGauge, if you replace RadGauge with a simple Xamarin.Forms BoxView, the same result can be observed.

It's rather related to the way RelativeLayout handles Factor value - the Factor is what percentage of the parent or view you want to use. Here is a good explanation on this: Can someone explain to me the constraints, factor and constant in xamarin forms?

I guess that you would need to add Constant value as well to make it work:

<RelativeLayout>
    <telerikGauges:RadRadialGauge BackgroundColor="Yellow" 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,Constant=100}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=gauge, Property=Y, Factor=0.33,Constant=20}"
            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>

I hope I was able to guide into the right direction, so you can achieve the required layout.

Regards,
Yana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Gauges
Asked by
Oleg
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or