CODEWITHSUNDEEP
xamarin.forms
Sergiy Divnych
Sergiy Divnych

Reputation: 149

Avatar image clickable and display on screen Xamarin.Forms

I want to make my avatar image which is in a circle clickable. After click it has to be displayed on screen like in FB. So how I can implement this in my code?

        listView.Header = "";
        listView.HeaderTemplate = new DataTemplate(() =>
        {
            var avatarLayout = new StackLayout()
            {
                HeightRequest = 350,
            };

            var grid = new Grid();
            grid.HeightRequest = 400;
            grid.BackgroundColor = Color.White;

            grid.RowDefinitions.Add(new RowDefinition());
            grid.RowDefinitions.Add(new RowDefinition());

            var bgrImg = new Image();
            bgrImg.Aspect = Aspect.Fill;
            bgrImg.Source = ImageSource.FromFile("abstract_background.jpg");

            var avImg = new CircleImage();
            avImg.VerticalOptions = new LayoutOptions(LayoutAlignment.Center, false);
            avImg.Source = ImageSource.FromFile("about_background.png");

            grid.Children.Add(bgrImg, 0, 0);
            grid.Children.Add(avImg);
            Grid.SetRowSpan(avImg, 2);
            avatarLayout.Children.Add(grid);

Example of my avatar

Upvotes: 0

Views: 331

Answers (1)

Jason
Jason

Reputation: 89129

You can make an element tappable by using a GestureRecognizer

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
    // handle the tap
};
image.GestureRecognizers.Add(tapGestureRecognizer);

Upvotes: 1

Related Questions