How to rotate images in GridView - xamarin

Question

A collection of images are showing in GridView using Xamarin Android with Mvvm Cross, but the problem is there are two button which rotates clock and anti clock direction with 90 degrees for each click all cells(or images) should be rotate within the GridView.
How can I achieve it?
Here is my viewModel collection which will be bind to GridView,
private ObservableCollection<Snapshot> _snapshotsItemSource;
public ObservableCollection<Snapshot> SnapshotsItemSource
{
get { return _snapshotsItemSource; }
set
{
_snapshotsItemSource = value;
RaisePropertyChanged(() => SnapshotsItemSource);
}
}
And my Model object is,
public class Snapshot : MvxViewModel
{
string _ID;
public string ID
{
get
{
return _ID;
}
set
{
_ID = value;
ImageUrl = string.Format("http://{0}:{1}/GetSnapshot?ID={2}", TIConstants.Device.IpAdd, TIConstants.PortNo, value);
}
}
string _ImageUrl;
public string ImageUrl
{
get
{
return _ImageUrl;
}
set
{
_ImageUrl = value;
RaisePropertyChanged("ImageUrl");
}
}
}
And My view is,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mvvm="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<MvvmCross.Binding.Droid.Views.MvxGridView
android:id="#+id/gvSnapshots"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="3"
android:layout_alignParentTop="true"
mvvm:MvxItemTemplate="#layout/snapshotcellview"
mvvm:MvxBind="ItemsSource SnapshotsItemSource" />
<RelativeLayout
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="#dimen/section_height"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<ImageButton
android:id="#+id/btnRotateLeft"
android:layout_alignParentLeft="true"
android:src="#drawable/abc_text_select_handle_left_mtrl_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageButton
android:id="#+id/btnRotateRight"
android:layout_alignParentRight="true"
android:src="#drawable/abc_text_select_handle_left_mtrl_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

Answer 1

Try With Glide, is This helpful for you
Glide
.with( context )
.load( "image Url" )
.transform( new RotateTransformation( context, 90f ))
.into( imageView );

Answer 2

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
// Use this to return your custom view for this Fragment
// return inflater.Inflate(Resource.Layout.YourFragment, container, false);
base.OnCreateView(inflater, container, savedInstanceState);
var view = this.BindingInflate(Resource.Layout.SnapshotsView, null);
var toolbar = ((MainActivity)this.Activity).FindViewById(Resource.Id.toolbar);
var txtTitle = ((MainActivity)this.Activity).FindViewById<TextView>(Resource.Id.TitleText);
txtTitle.Text = ViewModel.ViewTitle;
RegisterEvents();
ViewModel.SetItemSource();
var btnLeft = view.FindViewById<ImageButton>(Resource.Id.btnRotateLeft);
btnLeft.Click += BtnLeft_Click;
var btnRight = view.FindViewById<ImageButton>(Resource.Id.btnRotateRight);
btnRight.Click += BtnRight_Click;
grid = view.FindViewById<MvxGridView>(Resource.Id.gvSnapshots);
mAdapter = new SnapshotsDataViewAdapter(this.Activity, (IMvxAndroidBindingContext)BindingContext);
grid.Adapter = mAdapter;
grid.OnItemClickListener = this;
return view;
}
void BtnLeft_Click(object sender, EventArgs e)
{
currentRotation = currentRotation + 1;
mAdapter.NotifyDataSetChanged();
}
void BtnRight_Click(object sender, EventArgs e)
{
currentRotation = currentRotation - 1;
mAdapter.NotifyDataSetChanged();
}
static int currentRotation = 0;
static float RotationTranslation = 0;
private class SnapshotsDataViewAdapter : MvxAdapter
{
SnapshotsViewModel mViewModel;
public SnapshotsDataViewAdapter(FragmentActivity context, IMvxAndroidBindingContext bindingContext) : base(context, bindingContext)
{
mViewModel = bindingContext.DataContext as SnapshotsViewModel;
}
protected override View GetBindableView(View convertView, object dataContext, ViewGroup parent, int templateId)
{
View row = convertView;
try
{
var item = (BSSnapshot)dataContext;
if (row == null)
{
row = BindingContext.BindingInflate(templateId, parent, false);
}
var imgView = row.FindViewById<ImageView>(Resource.Id.imgRotate1);
Picasso.With(Android.App.Application.Context).Load(item.ImageUrl).Into(imgView);
imgView.Rotation = currentRotation*90;
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine(ex.Message);
}
finally
{}
return row;
}
}
Here I used Picasso as Glide was not able to getting add to the project and it is working fine.