I tried several solutions, but still remains below, the tests that I have done are: first solution
<RelativeLayout x:Name="locationLayout" Grid.Row="0" Grid.Column="0" VerticalOptions="End" HorizontalOptions="End">
<Image x:Name="locationIcon"/>
<Label Text="Posizione" x:Name="posizioneLabel" TextColor="#fff" HorizontalTextAlignment="Center" FontSize="Medium"></Label>
</RelativeLayout>
I would like that the label was above image, I have to make a hover effect.
you can find a solution that dynamically over the image remains the label object in the bottom?
You could try putting the objects in the same Grid
<Grid>
<Image x:Name="locationIcon"/>
<Label Text="Posizione" x:Name="posizioneLabel" TextColor="#fff" HorizontalTextAlignment="Center" FontSize="Medium"></Label>
</Grid>
This will render the Image at the back and the text ontop centered horizontally at the top
The best way to accomplish this is to create the view in the C# code-behind, because, in the code-behind, we can take advantage of using Func
s to dynamically resize our UI and align the UI relative to other elements.
This Stack Overflow post has more information about how to center UI Elements in Xamarin.Forms:
Xamarin.Forms: How to center views using Relative Layout? `Width` and `Height` return -1
using System;
using Xamarin.Forms;
namespace SampleApp
{
public class App : Application
{
public App()
{
var floatingLabel = new Label
{
Text = "This Label Is Centered"
};
var circleImage = new Image
{
Source = "circle"
};
var relativeLayout = new RelativeLayout();
Func<RelativeLayout, double> getfloatingLabelHeight = (p) => floatingLabel.Measure(p.Width, p.Height).Request.Height;
Func<RelativeLayout, double> getfloatingLabelWidth = (p) => floatingLabel.Measure(p.Width, p.Height).Request.Width;
Func<RelativeLayout, double> getCircleImageHeight = (p) => circleImage.Measure(p.Width, p.Height).Request.Height;
Func<RelativeLayout, double> getCircleImageWidth = (p) => circleImage.Measure(p.Width, p.Height).Request.Width;
relativeLayout.Children.Add(circleImage,
Constraint.RelativeToParent(parent => parent.Width / 2 - getCircleImageWidth(parent) / 2),
Constraint.RelativeToParent(parent => parent.Height / 2 - getCircleImageHeight(parent) / 2)
);
relativeLayout.Children.Add(floatingLabel,
Constraint.RelativeToView(circleImage, (parent, view) => view.X + getCircleImageWidth(parent) / 2 - getfloatingLabelWidth(parent) / 2),
Constraint.RelativeToView(circleImage, (parent, view) => view.Y + getCircleImageHeight(parent) / 2 - getfloatingLabelHeight(parent) / 2)
);
MainPage = new ContentPage { Content = relativeLayout };
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.