如何根据 属性 最简单的方法旋转网格

Question

您好，我想知道旋转网格的简单方法是什么。 我有 4 页：

 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...
   }
}

我希望 Grid 始终具有相同的大小并且始终填充相同的数组，但是根据 Color 的方向应该改变。事实上，整个网格应该根据颜色旋转 90 度。这些网格应该有 ImageButtons 绑定到图形的图像源（带有转换器）。我考虑过在 Xaml 中创建 4Grids 并手动实现所有内容，并为每个页面提供自定义网格。我想出的另一种选择是只创建一个网格并使用网格的旋转方法（但是使用这个选项我必须旋转网格的每个子元素，否则图片会随着网格旋转......正如我认为的那样这两种解决方案都很不方便我想知道我还有什么其他选择。也许有人可以帮助我吗？非常感谢...

Answer 1

根据设置更改的 ImageSources 示例。

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;
        }
    }
}