XAML 在WinUI 3 - Composition API中重复笔刷或平铺图像?

bsxbgnwa  于 2022-12-07  发布在  其他
关注(0)|答案(2)|浏览(160)

我发现很难看到如何简单地用位图的重复副本覆盖矩形XAML元素!我正在使用带有Windows应用程序SDK的WinUI 3。我想在我的应用程序中使用重复的图像作为背景元素。
它似乎涉及到组合API。Deiderik KrohlsJetChopper给出了一些诱人的线索......然而(a)对于所需的接口,似乎没有稳定发布的NuGet包,并且(B)这似乎是一个非常复杂的方式来做一些应该是简单和(c)这些解决方案似乎需要额外的工作来与WinUI 3类(如ImageSource和BitmapImage)集成。
有什么建议吗?

vs91vp4v

vs91vp4v1#

您可以使用CommunityToolkit中的TilesBrush
安装CommunityToolkit.WinUI.UI.MediaNuGet软件包并尝试以下代码:

<Window
    x:Class="TileBrushes.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="using:CommunityToolkit.WinUI.UI.Media"
    mc:Ignorable="d">

    <Grid ColumnDefinitions="*,*">
        <Border Grid.Column="0">
            <TextBlock Text="No tiles" />
        </Border>
        <Border Grid.Column="1">
            <Border.Background>
                <toolkit:TilesBrush TextureUri="ms-appx:///Assets/StoreLogo.png" />
            </Border.Background>
            <TextBlock Text="Tiles" />
        </Border>
    </Grid>
</Window>
n3ipq98p

n3ipq98p2#

您可以使用Direct2D效果,即Tile Effect。此效果是硬件加速的。Microsoft提供了一个名为Win2D的小工具,可用于WinUI:Microsoft.Graphics.Win2D
创建标准WinUI3应用程序项目后,添加此nuget,并针对此XAML:

<StackPanel
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      Orientation="Horizontal">
      <canvas:CanvasControl
          x:Name="myCanvas"
          Width="128"
          Height="128"
          CreateResources="myCanvas_CreateResources"
          Draw="myCanvas_Draw" />
  </StackPanel>

您可以使用C#程式码显示重复的影像,如下所示:

public sealed partial class MainWindow : Window
  {
      public MainWindow()
      {
          this.InitializeComponent();
      }

      // handle canvas' CreateResources event for Win2D (Direct2D) resources
      private void myCanvas_CreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
          => args.TrackAsyncAction(CreateResources(sender).AsAsyncAction());

      // create all needed resources async (here a bitmap)
      CanvasBitmap _canvasBitmap;
      private async Task CreateResources(CanvasControl sender)
      {
          // this is my 32x32 image downloaded from https://i.stack.imgur.com/454HU.jpg?s=32&g=1
          _canvasBitmap = await CanvasBitmap.LoadAsync(sender, @"c:\downloads\smo.jpg");
      }

      // handle canvas' Draw event
      // check quickstart https://microsoft.github.io/Win2D/WinUI3/html/QuickStart.htm
      private void myCanvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
      {
          // create an intermediate command list as a feed to the Direct2D effect
          using var list = new CanvasCommandList(sender);
          using var session = list.CreateDrawingSession();
          session.DrawImage(_canvasBitmap);

          // create the Direct2D effect (here Tile effect https://learn.microsoft.com/en-us/windows/win32/direct2d/tile)
          using var tile = new TileEffect();
          tile.Source = list;
          
          // use image size as source rectangle
          tile.SourceRectangle = _canvasBitmap.Bounds;

          // draw the effect (using bitmap as input)
          args.DrawingSession.DrawImage(tile);
      }
  }

下面是我的StackOverflow头像作为位图源的结果:

图像是32x32,画布是128x128,因此我们有4x4的瓷砖。

相关问题