CompositionNineGridBrush 类

定义

在对源画笔的内容应用 Nine-Grid 拉伸后,使用 CompositionBrush 绘制 SpriteVisual 。 九网格拉伸的源可以由 CompositionColorBrush、CompositionSurfaceBrush 或 CompositionEffectBrush 类型的任意 CompositionBrush 进行。

public ref class CompositionNineGridBrush sealed : CompositionBrush
/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 196608)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class CompositionNineGridBrush final : CompositionBrush
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 196608)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class CompositionNineGridBrush : CompositionBrush
Public NotInheritable Class CompositionNineGridBrush
Inherits CompositionBrush
继承
Object Platform::Object IInspectable CompositionObject CompositionBrush CompositionNineGridBrush
属性

Windows 要求

设备系列
Windows 10 Anniversary Edition (在 10.0.14393.0 中引入)
API contract
Windows.Foundation.UniversalApiContract (在 v3.0 中引入)

示例

将 Nine-Grid 拉伸应用于按钮资产 (CompositionSurfaceBrushSource)

private SpriteVisual CreateNineGridVisualFromImageSurface(ICompositionSurface imgSurface)
{
  CompositionSurfaceBrush sourceBrush = _compositor.CreateSurfaceBrush(imgSurface);

  // imgSurface is 50x50 pixels; nine-grid insets, as measured in the asset, are:
  // left = 1, top = 5, right = 10, bottom = 20 (in pixels)

  // create NineGridBrush to paint onto SpriteVisual
  CompositionNineGridBrush ninegridBrush = _compositor.CreateNineGridBrush();

  // set SurfaceBrush as Source to NineGridBrush
  ninegridBrush.Source = sourceBrush;

  // set Nine-Grid Insets
  ninegridBrush.SetInsets(1, 5, 10, 20);

  // set appropriate Stretch on SurfaceBrush for Center of Nine-Grid
  sourceBrush.Stretch = CompositionStretch.Fill;

  // create SpriteVisual and paint w/ NineGridBrush
  SpriteVisual visual = _compositor.CreateSpriteVisual();
  visual.Size = new Vector2(100, 75);
  visual.Brush = ninegridBrush;

  return visual;
}

(CompositionColorBrush) 创建纯色边框

private SpriteVisual CreateBorderVisual(SpriteVisual childContent, float borderThickness, Color borderColor)
{
  SpriteVisual borderVisual = _compositor.CreateSpriteVisual();
  borderVisual.Size = childContent.Size + new Vector2(2 * borderThickness);

  // create NineGridBrush w/ ColorBrush Source
  CompositionNineGridBrush ninegridBrush = _compositor.CreateNineGridBrush();
  ninegridBrush.Source = _compositor.CreateColorBrush(borderColor);
  ninegridBrush.SetInsets(borderThickness);

  // opt out of drawing Center of Nine-Grid
  ninegridBrush.IsCenterHollow = true;

  // paint SpriteVisual w/ NineGridBrush
  borderVisual.Brush = ninegridBrush;

  // set child visual appropriately; manage size/scale changed events separately
  childContent.Offset = new Vector3(borderThickness, borderThickness, 0);
  borderVisual.Children.InsertAtTop(childContent);

  return borderVisual;
}

使用 ExpressionAnimation 动态更新嵌入比例

private void CounterScaleInsets(SpriteVisual ninegridVisual)
{
  CompositionNineGridBrush ninegridBrush = (CompositionNineGridBrush)ninegridVisual.Brush;

  // use expressions to counter a scale transformation on visual so as to maintain a constant inset thickness
  ExpressionAnimation counterScaleXAnimation = _compositor.CreateExpressionAnimation("1/visual.Scale.X");
  counterScaleXAnimation.SetReferenceParameter("visual", ninegridVisual);

  ExpressionAnimation counterScaleYAnimation = _compositor.CreateExpressionAnimation("1/visual.Scale.Y"); 
  counterScaleYAnimation.SetReferenceParameter("visual", ninegridVisual);

  // start ExpressionAnimation on Nine-Grid InsetScales
  ninegridBrush.StartAnimation("LeftInsetScale", counterScaleXAnimation);
  ninegridBrush.StartAnimation("RightInsetScale", counterScaleXAnimation);

  ninegridBrush.StartAnimation("TopInsetScale", counterScaleYAnimation);
  ninegridBrush.StartAnimation("BottomInsetScale", counterScaleYAnimation);
}

将效果应用于 Nine-Grid Stretched content (CompositionNineGridBrush 作为 CompositionEffectBrush)

private void DesaturateNineGridVisual(SpriteVisual ninegridVisual)
{
  // get the NineGridBrush that the SpriteVisual is painted with
  CompositionNineGridBrush ninegridBrush = (CompositionNineGridBrush)ninegridVisual.Brush;

  // get or define IGraphicsEffect
  var saturationEffect = new SaturationEffect
  {
    Saturation = 0f,
    Source = new CompositionEffectSourceParameter("source"),
  };

  // create EffectBrush from EffectFactory
  CompositionEffectFactory saturationFactory = _compositor.CreateEffectFactory(saturationEffect);
  CompositionEffectBrush saturationBrush = saturationFactory.CreateBrush();

  // input NineGridBrush to EffectBrush
  saturationBrush.SetSourceParameter("source", ninegridBrush);

  // paint SpriteVisual with EffectBrush (w/ NineGridBrush as source parameter)
  ninegridVisual.Brush = saturationBrush;
}

将 Nine-Grid 拉伸应用于不透明度掩码 (CompositionNineGridBrush 作为 CompositionMaskBrush)

private SpriteVisual CreateMaskedRoundedRectVisual(ICompositionSurface myRoundedRectMaskSurface)
{
  // ColorBrush to be set as MaskBrush.Source
  CompositionColorBrush colorBrush = _compositor.CreateColorBrush(Colors.Blue);

  // SurfaceBrush w/ opacity mask surface
  CompositionSurfaceBrush roundedRectBrush = _compositor.CreateSurfaceBrush(myRoundedRectMaskSurface);
  roundedRectBrush.Stretch = CompositionStretch.Fill; // stretch for center of nine-grid

  // NineGridBrush w/ insets on opacity mask surface
  CompositionNineGridBrush ninegridBrush = _compositor.CreateNineGridBrush();
  ninegridBrush.Source = roundedRectBrush;
  ninegridBrush.SetInsets(_cornerRadius); // the radius, in pixels, of the corner as specified on my opacity mask surface 

  // Create MaskBrush
  CompositionMaskBrush maskBrush = _compositor.CreateMaskBrush();
  maskBrush.Source = colorBrush;
  maskBrush.Mask = ninegridBrush;

  // Paint SpriteVisual with MaskBrush
  SpriteVisual sprite = _compositor.CreateSpriteVisual();
  sprite.Size = new Vector2(300, 200);
  sprite.Brush = maskBrush;
  return sprite;
}

注解

Nine-Grid 拉伸是指将源画笔的内容 (要绘制到 SpriteVisual) 到 9 个矩形的网格中,从而在调整大小后保留角矩形的大小,如下图所示:

九个网格部分的延伸

调整或缩放使用 CompositionNineGridBrush 绘制的 SpriteVisual 时, 左右边距 (矩形 4 和 6) 沿垂直轴拉伸,上边距和下边距矩形 (矩形 2 和 8) 沿水平轴拉伸,中心 (矩形 5) 沿两个轴拉伸,而角 (矩形 1,3,7, 和 9) 不拉伸。

CompositionNineGridBrush 的 Source 属性接受两种类型之一的画笔:

CompositionSurfaceBrush 源说明

插入指定为在与 CompositionSurfaceBrush 关联的 ICompositionSurface 的坐标空间中测量的像素值。 在图面的坐标空间中指定的内插与在 SpriteVisual 上绘制时出现的内插之间的关系如下所示:

Inset_Surface*InsetScale=Inset_SpriteVisual

CompositionSurfaceBrush。Stretch 属性指定如何拉伸 Nine-Grid 中心的内容。

九网格中心拉伸

在带 CompositionStretch.Fill 的圆角矩形资产上指定的 NineGridBrush Insets;以像素为单位指定, (在包含资产的 ICompositionSurface 的坐标空间中测量)

CompositionNineGridBrush 不是为了将 Nine-Grid 缩放应用于通过以下属性之一应用转换的 CompositionSurfaceBrush 源:

  • CompositionSurfaceBrush.AnchorPoint
  • CompositionSurfaceBrush.CenterPoint
  • CompositionSurfaceBrush.Offset
  • CompositionSurfaceBrush.RotationAngle
  • CompositionSurfaceBrush.RotationAngleInDegrees
  • CompositionSurfaceBrush.Scale
  • CompositionSurfaceBrush.TransformMatrix 如果向 CompositionNineGridBrush 的 CompositionSurfaceBrush 源应用转换操作,则不会绘制像素内容。

将 Nine-Grid 拉伸应用于不透明度掩码

CompositionSurfaceBrush 源的内容也可能是不透明度掩码表面。 然后,可将生成的 CompositionNineGridBrush 设置为 CompositionMaskBrushMask。 这样,当不透明度掩码受拉伸 Nine-Grid 限制时,允许被屏蔽的内容根据需要缩放。

同样,CompositionMaskBrush也可以为 CompositionNineGridBrush 类型。

将效果应用于 CompositionNineGridBrush

CompositionNineGridBrush 可以设置为 CompositionEffectBrush 的源,以对其 Nine-Grid 拉伸内容应用 IGraphics 或 Windows.UI.Composition.Effect。

CompositionColorBrush 源说明

结合 IsCenterHollow 属性, CompositionColorBrush 允许创建纯色边框。 请注意, CompositionColorBrush 的内插在 SpriteVisual 本身的坐标空间中测量。

有关嵌入粗细和嵌入刻度的说明

如果更改关联 SpriteVisualSize 属性,则 CompositionNineGridBrush 的嵌入粗细不会更改。

嵌入比例属性提供了一种从画笔坐标空间 ((例如图像的像素空间) 到 SpriteVisual 的像素空间)缩放 Nine-Grid 嵌入的机制。 例如,内插刻度属性可用于控制嵌入粗细,以响应从 NineGridBrush 绘制到的 SpriteVisual 继承的缩放转换,或者在其 Visual 树 (的任意上级(例如,在 DPI 缩放的情况下)) 。 在这种情况下, ExpressionAnimation提供了一种动态更新内插刻度值的方法。

属性

BottomInset

来自源内容的下边缘的内插,该内容指定底部行的粗细。 默认为 0.0f。

BottomInsetScale

要应用于 BottomInset 的缩放。 默认为 1.0f。

Comment

要与 CompositionObject 关联的字符串。

(继承自 CompositionObject)
Compositor

用于创建此 CompositionObject 的 Compositor

(继承自 CompositionObject)
Dispatcher

CompositionObject 的调度程序。

(继承自 CompositionObject)
DispatcherQueue

获取 CompostionObject 的 DispatcherQueue

(继承自 CompositionObject)
ImplicitAnimations

附加到此对象的隐式动画集合。

(继承自 CompositionObject)
IsCenterHollow

指示是否绘制 Nine-Grid 的中心。

LeftInset

从指定左列粗细的源内容的左边缘进行插页。 默认为 0.0f。

LeftInsetScale

要应用于 LeftInset 的缩放。 默认为 1.0f。

Properties

CompositionObject 关联的属性的集合。

(继承自 CompositionObject)
RightInset

从指定右列粗细的源内容的右边缘进行插页。 默认为 0.0f。

RightInsetScale

要应用于 RightInset 的缩放。 默认为 1.0f。

Source

要 Nine-Grid 拉伸内容的画笔。 可以是 CompositionSurfaceBrush 或 CompositionColorBrush 类型。

TopInset

来自源内容的上边缘的内插,该内容指定顶行的粗细。 默认为 0.0f。

TopInsetScale

要应用于 TopInset 的缩放。 默认为 1.0f。

方法

Close()

关闭 CompositionObject 并释放系统资源。

(继承自 CompositionObject)
ConnectAnimation(String, CompositionAnimation)

连接和动画。

(继承自 CompositionObject)
DisconnectAnimation(String)

断开动画的连接。

(继承自 CompositionObject)
Dispose()

执行与释放或重置非托管资源关联的应用程序定义的任务。

(继承自 CompositionObject)
PopulatePropertyInfo(String, AnimationPropertyInfo)

定义可进行动画处理的属性。

(继承自 CompositionObject)
SetInsets(Single)

对顶部、底部、左侧和右侧使用相同的值设置 CompositionNineGridBrush 的内插。 默认为 0.0f。

SetInsets(Single, Single, Single, Single)

使用顶部、底部、左侧和右侧的指定值设置 CompositionNineGridBrush 的内插。 默认为 0.0f。

SetInsetScales(Single)

设置要应用于左侧、顶部、右侧和底部的相同 () 比例。 默认为 1.0f。

SetInsetScales(Single, Single, Single, Single)

设置要分别应用于左侧、顶部、右侧和底部的嵌入的刻度。 默认为 1.0f。

StartAnimation(String, CompositionAnimation)

使用 对象的指定属性连接动画并启动动画。

(继承自 CompositionObject)
StartAnimation(String, CompositionAnimation, AnimationController)

使用 对象的指定属性连接动画并启动动画。

(继承自 CompositionObject)
StartAnimationGroup(ICompositionAnimationBase)

启动动画组。

CompositionObject 上的 StartAnimationGroup 方法可用于启动 CompositionAnimationGroup。 组中的所有动画将同时在 对象上启动。

(继承自 CompositionObject)
StopAnimation(String)

断开动画与指定属性的连接并停止动画。

(继承自 CompositionObject)
StopAnimationGroup(ICompositionAnimationBase)

停止动画组。

(继承自 CompositionObject)
TryGetAnimationController(String)

返回指定属性上运行的动画的 AnimationController。

(继承自 CompositionObject)

适用于

另请参阅