CODEWITHSUNDEEP
xamllayoutxamarin.forms
Joyce de Lanna
Joyce de Lanna

Reputation: 1543

Half of an image above other image in xamarin forms

I am working with xamarin forms And I need to create a layout with two objects positionated like that:

enter image description here

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>

Upvotes: 11

Views: 2408

Answers (1)

Diego Rafael Souza
Diego Rafael Souza

Reputation: 5313

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: enter image description here

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

Upvotes: 6

Related Questions