Xamarin形式的平移图像

Question

I try to create a ContentPage, where i can do an article presentation with rotation (just multiple images), comparable to this solution: http://www.360-javascriptviewer.com/index.html . When the user does a Pan Gesture the image needs to be exchanged.

View:

<ContentPage.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  <Image Source="{Binding SelectedArticleImage.ImageSource}"
         VerticalOptions="FillAndExpand"
         HorizontalOptions="FillAndExpand">      
    <Image.GestureRecognizers>
      <PanGestureRecognizer PanUpdated="OnPanUpdated"/>   
  </Image.GestureRecognizers>    
  </Image>
  <Label Text="A simple Label for test purposes"/>
</StackLayout>
</ContentPage.Content>

Viewmodel/Model:

public partial class RotationPage : ContentPage
{
    public RotationPage()
    {
        InitializeComponent();
        BindingContext = App.Locator.Rotation;
    }

    public void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        App.Locator.Rotation.OnPanUpdated(sender, e);
    }
}
public class RotationViewModel : ViewModelBase
{
    private double panValueBeginning;
    private double panValueRunning;
    private double screenWidthFactor = 100;
    private List<ArticleImage> articleImages;

    private ArticleImage selectedArticleImage;
    public ArticleImage SelectedArticleImage
    {
        get
        {
            return (selectedArticleImage == null ? articleImages.FirstOrDefault() : selectedArticleImage);
        }
        set
        {
            Set(() => SelectedArticleImage, ref selectedArticleImage, value);
        }
    }

    public RotationViewModel()
    {
        articleImages = new List<ArticleImage>();
        LoadImageList();
    }

    private void LoadImageList()
    {
        for (int i = 0; i < 64; i++)
        {
            string name = "_" + (i + 1).ToString("D2") + ".jpg";
            articleImages.Add(new ArticleImage(name));
        }
    }

    public void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        Debug.WriteLine(e.StatusType.ToString() + ": " + e.TotalX);
        switch (e.StatusType)
        {
            case GestureStatus.Started:
                panValueRunning = 0;
                break;

            case GestureStatus.Running:
                panValueRunning = e.TotalX;
                SelectImage(e.StatusType, e.TotalX);
                break;

            case GestureStatus.Completed:
                panValueBeginning = panValueRunning;
                SelectImage(e.StatusType, e.TotalX);
                break;

            case GestureStatus.Canceled:
                panValueBeginning = 0;
                break;

        }
    }

    private void SelectImage(GestureStatus status, double totalX)
    {
        double panValueRelative = (panValueBeginning + panValueRunning) % screenWidthFactor;
        double panValueAbsolute = (panValueRelative < 0 ? screenWidthFactor : 0) + panValueRelative;
        int index = Convert.ToInt32(Math.Max(1, Math.Min((panValueAbsolute / screenWidthFactor) * articleImages.Count, articleImages.Count))) - 1;
        SelectedArticleImage = articleImages[index];
    }
}

public class ArticleImage
{
    public string Path { get; }
    public ImageSource ImageSource { get; set; }

    public ArticleImage(string path)
    {
        Path = path;
        ImageSource.FromFile(path);
    }
}

I hope you understand what i tried to do: OnPanUpdated loads a new Image from the Filesystem, depending on how far the user panned. On UWP Platform it is working, but far away from running... very laggy and no "realtime" rotation. On Android I get an out of memory exception after 2 successful pans. Is my approach generally wrong? How could I handle the image changing?

Thanks for any answers!

Answer 1

It sort of looks like you are trying to emulate what a CarouselView does. You may want to take a look at using this control which will allow you to swipe between images. It also is virtualized, so you will likely not run into those memory issues.

There is a post on the Xamarin blog to help get started, here .

This package is available on NuGet and is currently a pre-release version, so make sure you are searching with Include PreRelease Packages checked in Visual Studio.

Sample from blog post:

Since the CarouselView is in a separate assembly, we must bring in the CarouselView's namespace in root of our page:

xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"

Then, add the control to your page content:

<cv:CarouselView ItemsSource="{Binding Images}" x:Name="CarouselImages">
    <cv:CarouselView.ItemTemplate>
      <DataTemplate>
        <Grid>
          <Image Source="{Binding Url}"/>
        </Grid>
      </DataTemplate>
    </cv:CarouselView.ItemTemplate>
  </cv:CarouselView>

If you are building applications for Windows, a DataTemplate needs to be added to the Application Resources in the App.xaml of the application.

First add a new namespace in the root node:

xmlns:uwp="using:Xamarin.Forms.Platform"

Then add the following to the Application.Resources node:

<DataTemplate x:Key="ItemTemplate">
    <uwp:ItemControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</DataTemplate>

It should look something like this:

<Application
    x:Class="MyApp.UWP.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:uwp="using:Xamarin.Forms.Platform"
    xmlns:local="using:MyApp.UWP"
    RequestedTheme="Light">
    <Application.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <uwp:ItemControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
        </DataTemplate>
    </Application.Resources>
</Application>

Linker Considerations

To ensure that the CarouselView does not get “Linked-out” when compiling in release mode ensure that you are using Compiled XAML by adding the following code into the project's AssemblyInfo.cs where your XAMLexists:

using Xamarin.Forms.Xaml;
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

Or add the following code after the Forms.Init(); call in each project:

var cv = typeof (Xamarin.Forms.CarouselView);
var assembly = Assembly.Load(cv.FullName);

Additional Resources:

Forms Documentation

Source code for sample