I am working with xamarin forms And I need to create a layout with two objects positionated like that:
half of one(circle) above the other object(square)
I have searched and it seem I need to use relative layout... I tried to do that setting the both objects in the same grid (row and line 0), and then, using constraintX to set the second in the same Y with factor 0 and a negative constant...But it didn't work. The a deleted the lines and can't show here, unfortunately...the only thing that happend in this is: the both was in the same position in y, but I could do like the image above... Can someone help me with an example, idea or anything? thank you very much!
My code now - the rodape image is the square and the reload is the circle I now the fact that the reload is under the square is wrong, but, for now, it is pretend the visual...an it gives me a result close that I want...but not exactly
<!--Rodapé Grid--> <RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" BackgroundColor="Black"> <Grid BackgroundColor="Red" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=0}"> <Grid.RowDefinitions> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Image Source="rodape.png" Aspect="Fill" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="FranqueadoOnTapGestureRecognizerTapped"/> </Image.GestureRecognizers> </Image> <!--Escrito Rodapé--> <StackLayout Orientation="Vertical" VerticalOptions="End" HorizontalOptions="FillAndExpand" Grid.Row="0" Spacing="0" Grid.Column="0"> <Image Source="reloadicon.png"/> <StackLayout Orientation="Horizontal" HorizontalOptions="Center"> <local:MyLabel NamedFontSize="Medium" FontSizeFactor="0.7" Text="Seja um Franqueado:" TextColor="White" FontAttributes="Bold" Style="{StaticResource labelsfont}"/> <local:MyLabel NamedFontSize="Medium" FontSizeFactor="0.7" Text="montanaexpress.com" Style="{StaticResource labelsfont}" TextColor="{StaticResource laranjacolor}"/> </StackLayout> </StackLayout> </Grid> </RelativeLayout> 1 Answers
Answers 1
Try something like this, I think it's simpler:
<Grid> <BoxView Grid.Column="0" Grid.Row="1" Color="Red" HeightRequest="20" HorizontalOptions="FillAndExpand"/> <Frame Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" BackgroundColor="Yellow" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" WidthRequest="40" HeightRequest="40" CornerRadius="40" Margin="0,5,0,10"/> </Grid> What you'll get: 
EDIT:
As you've required at comments, using your images you should do something like this:
<Grid> <Image Grid.Row="1" Grid.Column="0" Source="rodape.png" Aspect="Fill" HorizontalOptions="FillAndExpand"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="FranqueadoOnTapGestureRecognizerTapped"/> </Image.GestureRecognizers> </Image> <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="reloadicon.png" HorizontalOptions="CenterAndExpand" VerticalOptions="Center"/> </Grid> Note: I'm not able to figure out how the labels and the image should be displayed in your layout. You have to add it manually
0 comments:
Post a Comment