Forum Xamarin.Forms

Image Overlap

roy_rosenbergroy_rosenberg Member
edited March 31 in Xamarin.Forms

Hello,
I saw this youtube example for creating a popup message with image overlay, the video called Custom Message Box in Xamarin Forms (Part 1)
unfortunately, I'm not allowed to post links (You have to be around for a little while longer before you can post links)
anyway, I created the following (very much like the youtube example):

<pg:PopupPage  xmlns:pg="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup" xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Xamarin.WeatherApp.MessageBox">
    <Grid HeightRequest="265" VerticalOptions="End">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Frame Grid.RowSpan="2" HeightRequest="225" VerticalOptions="End" CornerRadius="30" Padding="20,0" BackgroundColor="White">
            <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Image Source="target.png"
                       HorizontalOptions="Center" VerticalOptions="Start" Aspect="Fill" HeightRequest="80" 
                       WidthRequest="80" Margin="0,-40,0,0"  />
                <StackLayout Orientation="Vertical" Spacing="10" VerticalOptions="Center" HorizontalOptions="Center">
                    <Label Text="Congratulations!" FontSize="20" FontAttributes="Bold"  TextColor="#E10555" HorizontalOptions="Center"/>
                    <Label Text="You have just been named the best archer in the Kings Landing..." HeightRequest="50" TextColor="#363636" FontSize="15" />
                </StackLayout>
            </Grid>
        </Frame>
        <Button Grid.Row="1" Text="CONTINUE" TextColor="White" HeightRequest="45" BackgroundColor="#E10555" Clicked="Button_Clicked" />
    </Grid>
</pg:PopupPage>

But I cannot get the image to overlap (overlay?)

What am I missing? why the image is trimmed
please help, Thanks!

Best Answer

  • Accepted Answer

    OK, got it... I put the image after the frame in a new column and change the TranslationY

    <Grid HeightRequest="265" VerticalOptions="End" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
            <Frame Grid.Row="1" Grid.RowSpan="2"  HeightRequest="225" VerticalOptions="End" CornerRadius="30" Padding="20,0" BackgroundColor="White">
                <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <StackLayout Orientation="Vertical" Spacing="10" VerticalOptions="Center" HorizontalOptions="Center">
                        <Label Text="Congratulations!" FontSize="20" FontAttributes="Bold"  TextColor="#E10555" HorizontalOptions="Center"/>
                        <Label Text="You have just been named the best archer in the Kings Landing..." 
                               HeightRequest="50" TextColor="#363636" FontSize="15" />
                    </StackLayout>
                </Grid>
            </Frame>
            <Image Source="target.png" BackgroundColor="Transparent"
                           HorizontalOptions="Center" VerticalOptions="Start" Aspect="Fill" HeightRequest="80" 
                           WidthRequest="80" TranslationY="45" />
            <Button Grid.Row="2" Text="CONTINUE" TextColor="White" HeightRequest="45" BackgroundColor="#E10555" Clicked="Button_Clicked" />
        </Grid>
    

Answers

  • roy_rosenbergroy_rosenberg Member
    Accepted Answer

    OK, got it... I put the image after the frame in a new column and change the TranslationY

    <Grid HeightRequest="265" VerticalOptions="End" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
            <Frame Grid.Row="1" Grid.RowSpan="2"  HeightRequest="225" VerticalOptions="End" CornerRadius="30" Padding="20,0" BackgroundColor="White">
                <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <StackLayout Orientation="Vertical" Spacing="10" VerticalOptions="Center" HorizontalOptions="Center">
                        <Label Text="Congratulations!" FontSize="20" FontAttributes="Bold"  TextColor="#E10555" HorizontalOptions="Center"/>
                        <Label Text="You have just been named the best archer in the Kings Landing..." 
                               HeightRequest="50" TextColor="#363636" FontSize="15" />
                    </StackLayout>
                </Grid>
            </Frame>
            <Image Source="target.png" BackgroundColor="Transparent"
                           HorizontalOptions="Center" VerticalOptions="Start" Aspect="Fill" HeightRequest="80" 
                           WidthRequest="80" TranslationY="45" />
            <Button Grid.Row="2" Text="CONTINUE" TextColor="White" HeightRequest="45" BackgroundColor="#E10555" Clicked="Button_Clicked" />
        </Grid>
    
Sign In or Register to comment.