How to show image over whole screen when clicked on?

Question

I want to show image on whole screen if someone clicks on it. Image is loaded from database, just url of that image. How can i do that, code looks like this.

public void GetAllPlanes()
    {
        string _dbPath = Path.Combine(System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal), "myDB.db3");
        var db = new SQLiteConnection(_dbPath);            
        for (int a = 1; a <= DatabaseNmbr(); a++)
        {                
            var rowData = db.Table<Airplane>().FirstOrDefault(i => i.Id == a);
            if (rowData.Plane != null && rowData.Airline != null && rowData.Registration != null && rowData.Registration != null && rowData.Airport != null && rowData.Url != null)
            {
                //vzhled
                Frame cardFrame = new Frame
                {
                    BackgroundColor = Color.FromHex("#00d2ff"),
                    CornerRadius = 30,
                    Margin = new Thickness(0, 60, 0, -20),
                    Content = new StackLayout
                    {
                        Children =
                        {
                            new Label {Text = "Plane " + a, TextColor = Color.White, HorizontalOptions = LayoutOptions.Center, FontSize = 30 },
                            new Image { Source = rowData.Url },
                            new Label {Text = "Plane:" + rowData.Plane, TextColor = Color.White, FontSize = 20 },
                            new Label {Text = "Airline:" + rowData.Airline, TextColor = Color.White, FontSize = 15 },
                            new Label {Text = "Livery:" + rowData.Livery, TextColor = Color.White, FontSize = 15 },
                            new Label {Text = "Registration:" + rowData.Registration, TextColor = Color.White, FontSize = 15 },
                            new Label {Text = "Airport:" + rowData.Airport, TextColor = Color.White, FontSize = 15 },
                            new Label {Text = "Date:" + rowData.Date, TextColor = Color.White, FontSize = 15 },
                            new Label {Text = "Comment:" + rowData.Comment, TextColor = Color.White, FontSize = 15}                                
                        }
                    }
                };
                Contenttest.Children.Add(cardFrame);
            }                
        }
    }

Answer 1

I want to show image on whole screen if someone clicks on it.

You can add TapGestureRecognizer to Image, when you Tap in Image, navigating to another to display entire image.

ContentPage1:

 public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();   

        for (int i=0;i<4;i++)
        {
            Image image = new Image { Source = "https://aka.ms/campus.jpg", HeightRequest = 100, WidthRequest = 100 };

            var tapGestureRecognizer = new TapGestureRecognizer();
            //          tapGestureRecognizer.NumberOfTapsRequired = 2; // double-tap
            tapGestureRecognizer.Tapped += OnTapGestureRecognizerTapped;
            image.GestureRecognizers.Add(tapGestureRecognizer);
            Frame cardFrame = new Frame
            {

                CornerRadius = 30,

                Content = new StackLayout               
                {
                    Children =
                    {
                        new Label {Text="Panel "+i, HorizontalOptions = LayoutOptions.Center, FontSize = 30 },
                         image
                       
                    }
                }
            };
            Contenttest.Children.Add(cardFrame);
        }
    }

    private async void OnTapGestureRecognizerTapped(object sender, EventArgs e)
    {
        var imageSender = (Image)sender;
       await Navigation.PushAsync(new Page2(imageSender.Source));
    }
}

ContentPage2:

<StackLayout>
        <Image
            x:Name="image1"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand" />
    </StackLayout>

public partial class Page2 : ContentPage
{
    public Page2(ImageSource source)
    {
        InitializeComponent();
        image1.Source = source;
    }
}