Hi I would like to know what the easies way to rotate a Grid would be. I have 4 pages:

 private static Figure[] array;
 public App ()
    {
        Initialize(array); // Fills array with figures with ImageSources
        InitializeComponent ();
        MainPage = new Page(array,Color.Red);
    }


class Figure
{
private ImageSource Source {get; set;}
public Figure(ImageSource source)
   {
       Source = source;
   }
}

class Page
{
private Color Color;
private Grid Grid;
public Page (Figure[] Figures, Color color)
   {
       Color = color;
       // Now this is where I need help...
   }
}

I would like to have a Grid always the same size and always filled with the same array but depending on the Color the orientation should change. In fact the whole Grid should just rotate 90degrees depending on the Color. These Grids should have ImageButtons which bind to the Imagesource of the figure (with a Converter). I thought about Creating 4Grids in Xaml and implement everything by hand and just give every page the custom Grid. Another option I came up with was creating one Grid only and using the rotation-method of the Grid (but with this option I have to rotate back every child of the Grid as otherwise the pictures would rotate with the Grid... As I think both solutions are quite inconvenient I was wondering what other options I have. Maybe someone can help me? Thanks a lot...

CodePudding user response：

Example of ImageSources that change based on a setting.

XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestBugs.MainPage">
    <StackLayout>
        <Label Text="Test"/>
        <Grid ColumnDefinitions="50,50" RowDefinitions="50,50">
            <Image Grid.Row="0" Grid.Column="0" Source="{Binding Source1A}" BackgroundColor="Red"/>
            <Image Grid.Row="0" Grid.Column="1" Source="{Binding Source1B}" BackgroundColor="Green"/>
            <Image Grid.Row="1" Grid.Column="0" Source="{Binding Source2A}" BackgroundColor="Blue"/>
            <Image Grid.Row="1" Grid.Column="1" Source="{Binding Source2B}" BackgroundColor="Yellow"/>
        </Grid>
    </StackLayout>
</ContentPage>

C#:

using System;
using System.Collections.Generic;
using System.Reflection;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TestBugs
{
    public partial class MainPage : ContentPage
    {
        // REPLACE "TestBugs" with your project's assembly name.
        public const string AssemblyName = "TestBugs";


        public enum Orientation
        {
            One, Two, Three, Four
        }

        const int NOrientations = 4;


        public MainPage()
        {
            // Assuming stored locally in files or resources.
            // If need server queries, recommend not doing this in constructor.
            LoadOurImages();

            InitializeComponent();
            // In this simple example, the binding sources are in the page itself.
            BindingContext = this;
        }


        protected override void OnAppearing()
        {
            base.OnAppearing();

            BackgroundTestLoop();
        }

        static Random Rand = new Random();

        private void BackgroundTestLoop()
        {
            Task.Run(async () =>
            {
                const int NTimes = 20;
                for (int i = 0; i < NTimes; i  )
                {
                    await Task.Delay(3000);

                    Orientation nextOrient = (Orientation)Rand.Next(NOrientations);
                    // Only affect UI from main thread.
                    Device.BeginInvokeOnMainThread(() =>
                    {
                        Orient = nextOrient;
                    });
                }
            });
        }

        public Orientation Orient {
            get => _orient;
            set
            {
                _orient = value;
                // When Orient changes, that affects the values of these properties.
                // OnPropertyChanged is from super-class BindableObject.
                OnPropertyChanged(nameof(Source1A));
                OnPropertyChanged(nameof(Source1B));
                OnPropertyChanged(nameof(Source2A));
                OnPropertyChanged(nameof(Source2B));
            }
        }
        private Orientation _orient = Orientation.One;

        // Public getters. These change when Orient changes.
        public ImageSource Source1A => Sources[Indexes1A[(int)Orient]];
        public ImageSource Source1B => Sources[Indexes1B[(int)Orient]];
        public ImageSource Source2A => Sources[Indexes2A[(int)Orient]];
        public ImageSource Source2B => Sources[Indexes2B[(int)Orient]];


        List<string> ResourcePaths = new List<string> {
            "apple.png", "banana.png", "car.png", "dog.png"};

        List<ImageSource> Sources = new List<ImageSource>();

        // Change these as needed.
        List<int> Indexes1A = new List<int> { 0, 1, 2, 3 };
        List<int> Indexes1B = new List<int> { 1, 2, 3, 0 };
        List<int> Indexes2A = new List<int> { 2, 3, 0, 1 };
        List<int> Indexes2B = new List<int> { 3, 0, 1, 2 };



        private void LoadOurImages()
        {
            foreach (var path in ResourcePaths)
                Sources.Add(CreateOurSource(path));
        }

        private ImageSource CreateOurSource(string resourcePath)
        {
            // For embedded resources stored in project folder "Media".
            var resourceID = $"{AssemblyName}.Media.{resourcePath}";
            // Our media is in the cross-platform assembly. Find that from this page.
            Assembly assembly = this.GetType().GetTypeInfo().Assembly;
            ImageSource source = ImageSource.FromResource(resourceID, assembly);
            return source;
        }
    }
}