Skip to content Skip to sidebar Skip to footer

Sliding Images With Xamarin

I am very new to Xamarin. What I am trying to do is build a simple application that has 3 images on it. Each image needs to slide horizontally to show the next image. I got this id

Solution 1:

For iOS you could use UIPageControl. You would have a different UIPageControl object for Head, Body, Feet. The idea is that you will have an UIView with a UIScrollView (also three of them). UIScrollView will contain all the different parts of body (e.g. heads). PageControl will handle the swipe gesture recognition and animations and you will set which part of the UIScrollView should be shown in UIPageControls event ValueChanged. The code will look something like this:

In ViewDidLoad: First you add the five head parts to UIScrollView. I assume that you have these five head parts in an array of UIViews called headPageViews.

RectangleF frame;
for (int i=0; i<5; i++)
{
    UIViewpageView= headPageViews[i];
    frame = headPageViews[i].Frame;
    // change Frame.X so that the views are next to each other in scrollView
    frame.X = i * this.scrollViewHead.Frame.Width;
    pageView.Frame = frame;
    this.scrollViewHead.AddSubViews(pageView);
}

In ViewDidLoad: Next you set up the UIPageControl which you added through interface builder:

this.pageControlHead = new UIPageControl(frame);
this.pageControlHead.HidesForSinglePage = true;
this.pageControlHead.ValueChanged += HandlePageControlHeadValueChanged;
this.pageControlHead.Pages = 5; this.viewHead.AddSubview(this.pageControlHead);

Somewhere in code: At last you handle the ValueChanged event:

privatevoidHandlePageControlHeadValueChanged(object sender, EventArgs e)
{
    this.scrollViewHead.SetContentOffset(new PointF(this.pageControlHead.CurrentPage * this.scrollViewHead.Frame.Width, 0), true);
}

Repeat these steps for other body parts and you should have the desired effect.

Solution 2:

You can also use 3 UIScrollViews in a UIViewController positioned as the image you have added, and set that UIScrollView to enable paging. set the cropped sections of image in those UIScrollViews, then you would be able to achieve it easily.

Hope this helps.

Post a Comment for "Sliding Images With Xamarin"