CODEWITHSUNDEEP
xamarin.forms
Sreejith Sree
Sreejith Sree

Reputation: 3766

Xamarin Forms : Show the image in full screen on tap of Listview image

Dears,

I have an image in my listview. For that image, I set Aspect="AspectFill".

On tap of that image, I need to view the image in full screen and the background will be a blur.

My requirement is like the initial tap of WhatsApp dp. In WhatsApp, On initial tap of dp full-screen image showing on top of WhatsApp contacts.

Thanks in advance.

Upvotes: 0

Views: 2728

Answers (3)

Sreejith Sree
Sreejith Sree

Reputation: 3766

Completed this feature using Rg.Plugins.Popup

https://github.com/rotorgames/Rg.Plugins.Popup

Upvotes: 1

Pratius Dubey
Pratius Dubey

Reputation: 673

Here is you answer

      <RowDefinition Height="*"/>
     </Grid.RowDefinitions>       
     <ListView x:Name="lstView" BackgroundColor="White" VerticalOptions="FillAndExpand" ItemsSource="{Binding ImageList}" ItemSelected="Handle_ItemSelected" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                <ViewCell>
    <StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" Padding="10">

                  <Image Aspect="AspectFill"
                         HeightRequest ="75" WidthRequest="75"
                         Source="{Binding ImageName}" />


                </StackLayout>
              </ViewCell>

                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    <Image Grid.RowSpan="1" Source="{Binding}" x:Name="grdImage" IsVisible="false"/>
</Grid>


    public POCPage()
    {
        InitializeComponent();
        ImageList = new ObservableCollection<Images>
        {
            new Images { ImageName = "first", ImageId = "1" },
            new Images { ImageName = "Four", ImageId = "2" },
            new Images { ImageName = "Second", ImageId = "3" },
            new Images { ImageName = "Third", ImageId = "4" }
        };

        lstView.ItemsSource = ImageList;
    }


    void Handle_ItemSelected(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e)
    {
        grdImage.IsVisible = true;
        lstView.IsVisible = false;
        var item = e.SelectedItem as Images;
        grdImage.Source = ImageSource.FromFile(item.ImageName);
    }

    private ObservableCollection<Images> imageList;

    public ObservableCollection<Images> ImageList
    {
        get
        {
            return imageList;
        }
        set
        {
            imageList = value;

        }
    }
}

public class Images
{
    public string ImageName
    {
        get;
        set;
    }

    public string ImageId
    {
        get;
        set;
    }

Upvotes: 0

Steve Chadbourne
Steve Chadbourne

Reputation: 6953

Put the Listview in a grid

Put an image in the same grid and set IsVisible to false. Make it full width and height.

On tap of the listview item set the image source to the tapped list view item image and set IsVisible to true.

You could nest the image in a stacklayout with a white opaque background for the blur effect.

Add a tap handler to the image to hide it again.

Upvotes: 0

Related Questions