Как в Мауи установить фон Grid\Border\Frame как мозаичный, учитывая образец плитки для его заполнения?

Я разрабатываю игру для Мауи и хочу установить фон каждого уровня игры (сетка, но также может быть Border\Frame) в соответствии с типом уровня. Я хочу сделать это, используя образец изображения плитки, которое будет продублировано для заполнения фона.

Возможно ли это из коробки? Или мне следует написать для него собственный элемент управления?

Например, я ищу что-то вроде: (добавлено дополнительное объяснение)

<Border>
    <Border.Background>
        <Image Source = "volcano_tile.png" Mode = "Tiled"/>
    </Border.Background>
</Border>

вулкан_тайл.png:

Ожидаемым результатом будет заполнение всего фона границы несколькими плитками:

Спасибо!

Совершенно непонятно, чего вы пытаетесь достичь.

Julian 15.06.2024 23:07

Посмотрите на этот ответ stackoverflow.com/a/75280677/3392605

Mustafa Mutasim 16.06.2024 10:01
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
2
92
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не нашел стандартного простого способа сделать это на xaml, поэтому реализовал решение с помощью SkiaSharp:

Это мой код тестера:

Во-первых, я создал вспомогательный класс, который получает ширину и высоту желаемого целевого мозаичного изображения, а также сам tileImage. Используя SKBitmap, он создает и возвращает мозаичное изображение:

internal class ImageTiler
{
    public static SKBitmap CreateTiledImage(int width, int height, SKBitmap tileImage)
    {
        // Create a new bitmap with the desired dimensions
        var tiledBitmap = new SKBitmap(width, height);
        using (var canvas = new SKCanvas(tiledBitmap))
        {
            // Loop through the width and height of the new image
            for (int y = 0; y < height; y += tileImage.Height)
            {
                for (int x = 0; x < width; x += tileImage.Width)
                {
                    // Draw the tile image at the current position
                    canvas.DrawBitmap(tileImage, x, y);
                }
            }
        }
        return tiledBitmap;
    }

    public static SKBitmap LoadImage(string resourcePath)
    {
        var assembly = Assembly.GetExecutingAssembly();
        var resourceName = $"TilesTester.Resources.Images.{resourcePath}";
        
        //var imageSource = ImageSource.FromFile(resourcePath);
        using (var stream = assembly.GetManifestResourceStream(resourceName))
        {
            return SKBitmap.Decode(stream);
        }
    }
}

Затем я загрузил изображение плитки png-ресурса и использовал ImageTiler для его создания и отображения с помощью SKCanvasView:

// Load the image to be tiled
string imagePath = "volcanotile.png";
SKBitmap tileImage = ImageTiler.LoadImage(imagePath);

// Define the dimensions of the new image
int newWidth = 800;
int newHeight = 600;

// Create the tiled image
SKBitmap tiledImage = ImageTiler.CreateTiledImage(newWidth, newHeight, tileImage);

var canvasView = new SKCanvasView();
canvasView.PaintSurface += (sender, args) =>
{
    var canvas = args.Surface.Canvas;
    canvas.Clear();
    canvas.DrawBitmap(tiledImage, new SKRect(0, 0, newWidth, newHeight));
};

// Add the SKImageView as a Content to the page
Content = canvasView;

Результат (скриншот изменен после изменения изображения плитки на лучшее и добавления динамического выбора плитки):

Другие вопросы по теме