UWP – 如何平铺背景图像?

在通用Windows应用程序中,我尝试使用背景图像(来自ImageSource)并将其平铺在控件上。

XAML

   

C#

 void UpdateBackground(ImageSource source) { // ... gridBackground.Background = new ImageBrush { ImageSource = source, Stretch = Stretch.None }; } 

根据MSDN ,ImageBrushinheritance自TileBrush。 它甚至说:

用于ImageBrush包括文本的装饰效果,或控件或布局容器的平铺背景。

我认为这应该平铺图像,如果拉伸被禁用,但唉,它只是在控件中间绘制图像。 我没有看到任何实际的属性来使它平铺。

在WPF中,有一个TileMode属性,可以设置ViewPort来指定磁贴的尺寸。 但这似乎在通用平台下缺席。

之前的问题涉及WinRT(Windows 8),但我希望使用基于画笔的解决方案,而不是用图像填充canvas。

如何使用UWP平铺背景图像?

之前的问题涉及WinRT(Windows 8),但我希望使用基于画笔的解决方案,而不是用图像填充canvas。

目前,在UWP应用程序中只有两种用于在Tile模式下显示背景图像的解决方案,其中第一个您知道填充canvas。

我正在使用的第二个是创建一个Panel并在其上绘制图像,这个想法来自本文

这种方法的作用是滥用我们绘制矩形形状的重复行集的事实。 首先,它尝试在顶部绘制一个块,其高度与我们的瓷砖相同。 然后它将该块复制下来,直到它到达底部。

我修改了一些代码并解决了一些问题:

 public class TiledBackground : Panel { public ImageSource BackgroundImage { get { return (ImageSource)GetValue(BackgroundImageProperty); } set { SetValue(BackgroundImageProperty, value); } } // Using a DependencyProperty as the backing store for BackgroundImage. This enables animation, styling, binding, etc... public static readonly DependencyProperty BackgroundImageProperty = DependencyProperty.Register("BackgroundImage", typeof(ImageSource), typeof(TiledBackground), new PropertyMetadata(null, BackgroundImageChanged)); private static void BackgroundImageChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { ((TiledBackground)d).OnBackgroundImageChanged(); } private static void DesignDataChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { ((TiledBackground)d).OnDesignDataChanged(); } private ImageBrush backgroundImageBrush = null; private bool tileImageDataRebuildNeeded = true; private byte[] tileImagePixels = null; private int tileImageWidth = 0; private int tileImageHeight = 0; private readonly BitmapPixelFormat bitmapPixelFormat = BitmapPixelFormat.Bgra8; private readonly BitmapTransform bitmapTransform = new BitmapTransform(); private readonly BitmapAlphaMode bitmapAlphaMode = BitmapAlphaMode.Straight; private readonly ExifOrientationMode exifOrientationMode = ExifOrientationMode.IgnoreExifOrientation; private readonly ColorManagementMode coloManagementMode = ColorManagementMode.ColorManageToSRgb; public TiledBackground() { this.backgroundImageBrush = new ImageBrush(); this.Background = backgroundImageBrush; this.SizeChanged += TiledBackground_SizeChanged; } private async void TiledBackground_SizeChanged(object sender, SizeChangedEventArgs e) { await this.Render((int)e.NewSize.Width, (int)e.NewSize.Height); } private async void OnBackgroundImageChanged() { tileImageDataRebuildNeeded = true; await Render((int)this.ActualWidth, (int)this.ActualHeight); } private async void OnDesignDataChanged() { tileImageDataRebuildNeeded = true; await Render((int)this.ActualWidth, (int)this.ActualHeight); } private async Task RebuildTileImageData() { BitmapImage image = BackgroundImage as BitmapImage; if ((image != null) && (!DesignMode.DesignModeEnabled)) { string imgUri = image.UriSource.OriginalString; if (!imgUri.Contains("ms-appx:///")) { imgUri += "ms-appx:///"; } var imageSource = new Uri(imgUri); StorageFile storageFile = await StorageFile.GetFileFromApplicationUriAsync(imageSource); using (var imageStream = await storageFile.OpenAsync(FileAccessMode.Read)) { BitmapDecoder decoder = await BitmapDecoder.CreateAsync(imageStream); var pixelDataProvider = await decoder.GetPixelDataAsync(this.bitmapPixelFormat, this.bitmapAlphaMode, this.bitmapTransform, this.exifOrientationMode, this.coloManagementMode ); this.tileImagePixels = pixelDataProvider.DetachPixelData(); this.tileImageHeight = (int)decoder.PixelHeight; this.tileImageWidth = (int)decoder.PixelWidth; } } } private byte[] CreateBackgroud(int width, int height) { int bytesPerPixel = this.tileImagePixels.Length / (this.tileImageWidth * this.tileImageHeight); byte[] data = new byte[width * height * bytesPerPixel]; int y = 0; int fullTileInRowCount = width / tileImageWidth; int tileRowLength = tileImageWidth * bytesPerPixel; //Stage 1: Go line by line and create a block of our pattern //Stop when tile image height or required height is reached while ((y < height) && (y < tileImageHeight)) { int tileIndex = y * tileImageWidth * bytesPerPixel; int dataIndex = y * width * bytesPerPixel; //Copy the whole line from tile at once for (int i = 0; i < fullTileInRowCount; i++) { Array.Copy(tileImagePixels, tileIndex, data, dataIndex, tileRowLength); dataIndex += tileRowLength; } //Copy the rest - if there is any //Length will evaluate to 0 if all lines were copied without remainder Array.Copy(tileImagePixels, tileIndex, data, dataIndex, (width - fullTileInRowCount * tileImageWidth) * bytesPerPixel); y++; //Next line } //Stage 2: Now let's copy those whole blocks from top to bottom //If there is not enough space to copy the whole block, skip to stage 3 int rowLength = width * bytesPerPixel; int blockLength = this.tileImageHeight * rowLength; while (y <= (height - tileImageHeight)) { int dataBaseIndex = y * width * bytesPerPixel; Array.Copy(data, 0, data, dataBaseIndex, blockLength); y += tileImageHeight; } //Copy the rest line by line //Use previous lines as source for (int row = y; row < height; row++) Array.Copy(data, (row - tileImageHeight) * rowLength, data, row * rowLength, rowLength); return data; } private async Task Render(int width, int height) { Stopwatch fullsw = Stopwatch.StartNew(); if (tileImageDataRebuildNeeded) await RebuildTileImageData(); if ((height > 0) && (width > 0)) { using (var randomAccessStream = new InMemoryRandomAccessStream()) { Stopwatch sw = Stopwatch.StartNew(); var backgroundPixels = CreateBackgroud(width, height); sw.Stop(); Debug.WriteLine("Background generation finished: {0} ticks - {1} ms", sw.ElapsedTicks, sw.ElapsedMilliseconds); BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, randomAccessStream); encoder.SetPixelData(this.bitmapPixelFormat, this.bitmapAlphaMode, (uint)width, (uint)height, 96, 96, backgroundPixels); await encoder.FlushAsync(); if (this.backgroundImageBrush.ImageSource == null) { BitmapImage bitmapImage = new BitmapImage(); randomAccessStream.Seek(0); bitmapImage.SetSource(randomAccessStream); this.backgroundImageBrush.ImageSource = bitmapImage; } else ((BitmapImage)this.backgroundImageBrush.ImageSource).SetSource(randomAccessStream); } } else this.backgroundImageBrush.ImageSource = null; fullsw.Stop(); Debug.WriteLine("Background rendering finished: {0} ticks - {1} ms", fullsw.ElapsedTicks, fullsw.ElapsedMilliseconds); } } 

用法:

    

截图

检查 Github中 的解决方案

所有这些变体对GPU都很重要。 您应该使用BorderEffect通过Composition API创建它。

  var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; var canvasDevice = CanvasDevice.GetSharedDevice(); var graphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(compositor, canvasDevice); var bitmap = await CanvasBitmap.LoadAsync(canvasDevice, new Uri("ms-appx:///YourProject/Assets/texture.jpg")); var drawingSurface = graphicsDevice.CreateDrawingSurface(bitmap.Size, DirectXPixelFormat.B8G8R8A8UIntNormalized, DirectXAlphaMode.Premultiplied); using (var ds = CanvasComposition.CreateDrawingSession(drawingSurface)) { ds.Clear(Colors.Transparent); ds.DrawImage(bitmap); } var surfaceBrush = compositor.CreateSurfaceBrush(drawingSurface); surfaceBrush.Stretch = CompositionStretch.None; var border = new BorderEffect { ExtendX = CanvasEdgeBehavior.Wrap, ExtendY = CanvasEdgeBehavior.Wrap, Source = new CompositionEffectSourceParameter("source") }; var fxFactory = compositor.CreateEffectFactory(border); var fxBrush = fxFactory.CreateBrush(); fxBrush.SetSourceParameter("source", surfaceBrush); var sprite = compositor.CreateSpriteVisual(); sprite.Size = new Vector2(1000000); sprite.Brush = fxBrush; ElementCompositionPreview.SetElementChildVisual(YourCanvas, sprite); 

我尝试了1000000×1000000大小的精灵,它没有付出任何努力。

如果您的尺寸大于16386px, Win2d会抛出exception。

难道没有办法以更多依赖于绘图原语的方式执行此操作,可能是从UWP Panel转到Composition API并从那里转到Direct 2D? 这似乎是“正确”的方式,可以避免直接摆弄像素。

看看我对这个问题的回答 :

您可以使用Win2D库进行平铺。 他们也有示例代码 ; 在“效果”下有一个平铺样本( EffectsSample.xaml.cs )。

实际上,现在可以创建自定义画笔(在Composition API和Win2D的帮助下)来实现平铺效果。 代码示例: UWP TiledBrush

简而言之,您只需将XamlCompositionBrushBase子类XamlCompositionBrushBase并覆盖它的OnConnected方法:

 public class TiledBrush : XamlCompositionBrushBase { protected override void OnConnected() { var surface = LoadedImageSurface.StartLoadFromUri(ImageSourceUri); var surfaceBrush = Compositor.CreateSurfaceBrush(surface); surfaceBrush.Stretch = CompositionStretch.None; var borderEffect = new BorderEffect() { Source = new CompositionEffectSourceParameter("source"), ExtendX = Microsoft.Graphics.Canvas.CanvasEdgeBehavior.Wrap, ExtendY = Microsoft.Graphics.Canvas.CanvasEdgeBehavior.Wrap }; var borderEffectFactory = Compositor.CreateEffectFactory(borderEffect); var borderEffectBrush = borderEffectFactory.CreateBrush(); borderEffectBrush.SetSourceParameter("source", surfaceBrush); } } 

然后按预期使用它: