单击时如何在整个屏幕上显示图像?

时间:2021-01-05 15:58:44

标签: c# image xamarin

如果有人点击它,我想在整个屏幕上显示图像。图像是从数据库加载的,只是该图像的 url。我该怎么做,代码看起来像这样。

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);
            }                
        }
    }

1 个答案:

答案 0 :(得分:1)

<块引用>

如果有人点击它,我想在整个屏幕上显示图像。

您可以将 TapGestureRecognizer 添加到 Image,当您点击 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;
    }
}