Xamarin Android просмотрщик изображений по клику - PullRequest
Новая
       9

Xamarin Android просмотрщик изображений по клику

0 голосов
/ 03 марта 2020

Идея этой функции, которую я хочу встроить в приложение, заключается в том, что когда пользователь нажимает (нажимает) на изображение, которое находится на странице списка, оно будет отображать изображение в полноэкранном режиме, как в примере ниже. И когда пользователь снова нажимает на изображение или, возможно, на кнопку, он закрывается обратно на главную страницу.

Obs: этот пример из Materialise. CSS <<a href="https://materializecss.com/media.html" rel="nofollow noreferrer">https://materializecss.com/media.html> и я хотел бы повторить эту функцию в приложении Xamarin Android.

Image from Materialize.css Opened image from Materialize.css

В настоящее время я не могу найти примеров реализации этого в Xamarin Native для Android, большинство в Интернете - для форм Xamarin, и я не мог тогда заставить работать на нативный.

Я также не смог найти плагин на NuGet для этого. Если он есть, он тоже будет очень полезен.

My layout

Изображение выше - мой макет карты. Карта будет повторяться, как список, для всех элементов на главной странице. Изображение поступит в формате Base64 из API.

1 Ответ

0 голосов
/ 03 марта 2020

Вам нужно добавить Image.GestureRecognizers, и оно будет работать так, как вы ожидали. Эта ссылка может быть полезна для вас . В Xaml добавьте следующий код. 

 <Image Source="{Binding imageSource}" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding OnImageTapped}"
                                      CommandParameter="{Binding Source={x:Reference largeImage},Path=IsVisible}">
                </TapGestureRecognizer>
            </Image.GestureRecognizers>
        </Image>'

И добавьте еще один макет в абсолютный макет и добавьте следующий код. 

 <Grid IsVisible="{Binding ...}" x:Name="largeImage"
                 AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Image Source="{Binding ...}" Aspect="AspectFit" Grid.Row="0"/>
        <Button Grid.Row="1" Text="Hide" Command="{Binding ...}" CommandParameter="{Binding Source={x:Reference largeImage},Path=IsVisible}">
        </Button>
    </Grid>

В коде просто сделайте макет видимым.

...