1. Home
  2. Forum
  3. Xamarin.Forms
  4. Open image from Listview full screen

Open image from Listview full screen

I have trying to find some solution in forum but don't find one who work.

I have starting with Essential Ui Kit demo and in Photoview there is some images but i like to open them on a full screen when click on it.
Probably need a new view for this but don't know how to pass ImageURL on it :(

Best Regards

7 Replies 1 reply marked as answer
MI milka August 10, 2020 06:38 AM UTC

Link project exemple

Attachment: app9_72c05797.zip

HM Hemalatha Marikumar Syncfusion Team August 10, 2020 08:03 AM UTC

Hi milka, 
 
Greetings from Syncfusion.  
 
We have achieved your requirement by using ImageTapCommand in PhotosViewModel and passing that url in its command parameter as per in below code snippet 
 
PhotoPage.Xaml 
… 
 
            <listView:SfListView ItemsSource="{Binding Photos}"  
                                 Padding="15,0,15,15" 
                                 ItemSize="150"  
                                 x:Name="listView" 
                                 ItemSpacing="4"   
                                 IsScrollBarVisible="False" 
                                 SelectionBackgroundColor="Transparent"               
                                 TapCommand="{Binding ImageTapCommand}"> 
 
                <listView:SfListView.DataSource> 
                    <data:DataSource> 
                         
                    </data:DataSource> 
                </listView:SfListView.DataSource> 
 
                <listView:SfListView.GroupHeaderTemplate> 
                    <DataTemplate> 
                        <StackLayout Orientation="Horizontal"> 
                            <Label Text="{Binding Key,StringFormat='{0:MMMM dd, yyyy}'}"  
                                   FontFamily="{StaticResource Montserrat-SemiBold}" 
                                   FontSize="12" 
                                   Margin="0,5,0,0" 
                                   LineHeight="{OnPlatform Android=1.25, 
                                                        Default=-1}" 
                                   TextColor="{DynamicResource Gray-800}" 
                                   VerticalOptions="Center" 
                                   HorizontalOptions="StartAndExpand"/> 
                        </StackLayout> 
                    </DataTemplate> 
                </listView:SfListView.GroupHeaderTemplate> 
 
                <listView:SfListView.ItemTemplate> 
                    <DataTemplate> 
                        <Grid BackgroundColor="{DynamicResource Gray-200}"> 
                            <Image Aspect="AspectFill" 
                                   BackgroundColor="{DynamicResource Gray-200}" 
                                   HeightRequest="150"  
                                   WidthRequest="150"> 
                                  <Image.Source> 
                                      <UriImageSource Uri="{Binding ImageURL}" 
                                                      CacheValidity="14" 
                                                      CachingEnabled="true"/> 
                                </Image.Source> 
                                <Image.GestureRecognizers> 
                                    <TapGestureRecognizer Command="{Binding Source={x:Reference listView}, Path=BindingContext.ImageTapCommand}" CommandParameter="{Binding ImageURL}"/> 
                                </Image.GestureRecognizers> 
                            </Image> 
                        </Grid> 
                    </DataTemplate> 
                </listView:SfListView.ItemTemplate> 
 
                <listView:SfListView.LayoutManager> 
                    <listView:GridLayout SpanCount="{core:OnPlatformOrientationIntValue PhonePortrait=2,PhoneLandscape=5,TabletPortrait=6,TabletLandscape=10,Desktop=10}"/> 
                </listView:SfListView.LayoutManager> 
            </listView:SfListView> 
        </StackLayout> 
 
public class PhotosViewModel : BaseViewModel 
    { 
        #region Fields 
 
        private Command editCommand; 
 
        private Command imageTapCommand; 
 
.. 
        /// <summary> 
        /// Gets the image tap command 
        /// </summary> 
        public Command ImageTapCommand 
        { 
            get 
            { 
                return this.imageTapCommand ?? (this.imageTapCommand = new Command(this.OnImageTapped)); 
            } 
        } 
 
.. 
 
        /// <summary> 
        /// Invoked when the album image is clicked 
        /// </summary> 
        /// <param name="obj">The Object</param> 
        private void OnImageTapped(object obj) 
        { 
            App.Current.MainPage.Navigation.PushAsync(new ContentPage() 
            { 
                Content = new StackLayout() 
                { 
                    Children = 
                    { 
                        new Image() 
                        { 
                            Source = ImageSource.FromUri(new System.Uri(obj.ToString())), 
                            HorizontalOptions = LayoutOptions.FillAndExpand, 
                            VerticalOptions = LayoutOptions.FillAndExpand 
                        } 
 
                    } 
                } 
                 
            }); 
        } 
 
.. 
    } 
 
 
Output: 
 
 
 
 
Please check and let us know. 
 
Regards,
Hemalatha M. 


Marked as answer
MI milka August 10, 2020 03:58 PM UTC

Hello,
Great thank you :)
Is it possible to pass 2 parameters cause i like to have updatedDate also in a label.

Thank you very much


MI milka August 11, 2020 06:34 AM UTC

i have trying :
adding a new DataMember :

[DataMember(Name = "twoParam")]
        public string TwoParam
        {
            get
            {
               return this.updatedDate + "€" + this.ImageURL;
            }

            set
            {
                 this.twoParam = value;
            }
        }

Then i binding in parametre TwoParam
and OnImageTapped i add :

string allparam = obj.ToString();
string param1 = allparam.Substring(0, allparam.IndexOf("€"));
string param2 = allparam.Substring(allparam.IndexOf("€") + 1);

Probably ugly and not the best solution but it work :)

YP Yuvaraj Palanisamy Syncfusion Team August 12, 2020 07:12 AM UTC

Hi Milka, 
 
We have achieved your requirement by passing the CommandParameter as Model and get the Date and image url in the OnImagetapped method argument of ViewModel class. 
 
Code snippet: 
Photo.xaml 
<Image.GestureRecognizers> 
    <TapGestureRecognizer Command="{Binding Source={x:Reference listView}, Path=BindingContext.ImageTapCommand}" CommandParameter="{Binding .}"/> 
</Image.GestureRecognizers> 
 
PhotoViewModel.cs 
private void OnImageTapped(object obj) 
{ 
    var photo = obj as Photo; 
    App.Current.MainPage.Navigation.PushAsync(new ContentPage() 
    { 
        Content = new StackLayout() 
        { 
            Children = 
            { 
                new Label() {Text = photo.Date.ToString()}, 
                new Image() 
                { 
                    Source = ImageSource.FromUri(new System.Uri(photo.ImageURL.ToString())), 
                    HorizontalOptions = LayoutOptions.FillAndExpand, 
                    VerticalOptions = LayoutOptions.FillAndExpand 
                } 
 
            } 
        } 
    }); 
} 
 
Also, we have prepared the sample for your reference. Please find the sample from the below location. 
 
  
Please let us know if you need any concern. 

Regards, 
Yuvaraj 


MI milka August 12, 2020 02:27 PM UTC

Great, thank you very much for all :)
So nice support team.

HM Hemalatha Marikumar Syncfusion Team August 13, 2020 04:50 AM UTC

Hi milka, 
 
Thanks for your valuable feedback. 
 
Please let us know if you need any further assistance.  
 
Regards,
Hemalatha M. 


Loader.
Up arrow icon