CompositionNineGridBrush 類別

  • 參考

定義

命名空間:
Windows.UI.Composition
編輯

在套用 Nine-Grid Stretching 至來源筆刷的內容之後，使用 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
屬性
ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

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

(CompositionColorBrushSource) 建立純色框線

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 內容， (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 Stretching 套用至 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) 的來源筆刷內容分割成九個矩形的格線，如此一來，在調整大小時會保留邊角矩形的大小，如下圖所示：

延展九個方格區段

使用 CompositionNineGridBrush 繪製的 SpriteVisual 調整大小或縮放時， 左右邊界 (矩形 4 和 6) 沿著垂直軸延展、上邊界和下邊界矩形 (矩形 2 和 8) 沿著水準軸延展，而中央 (矩形 5) 沿著兩個軸延展，而邊角 (矩形 1，3，7 和 9) 不會延展。

CompositionNineGridBrush 的 Source 屬性接受兩種類型之一的筆刷：

CompositionSurfaceBrush 來源的注意事項

Inset 會指定為圖元值，以與CompositionSurfaceBrush相關聯的ICompositionSurface座標空間來測量。 在 SpriteVisual 上繪製時所指定的內嵌與內嵌之間的關聯性如下：

Inset_Surface*InsetScale=Inset_SpriteVisual

CompositionSurfaceBrush。Stretch 屬性會指定如何延展 Nine-Grid 中心的內容。

九方格中心延展

使用 CompositionStretch.Fill 在圓角矩形資產上指定的 NineGridBrush Insets;Insets 是以圖元指定， (以包含資產的 ICompositionSurface 座標空間來測量)

CompositionNineGridBrush 並非設計成將 Nine-Grid 調整套用至 CompositionSurfaceBrush 來源，該來源會透過下列其中一個屬性套用轉換：

  • CompositionSurfaceBrush.AnchorPoint
  • CompositionSurfaceBrush.CenterPoint
  • CompositionSurfaceBrush.Offset
  • CompositionSurfaceBrush.RotationAngle
  • CompositionSurfaceBrush.RotationAngleInDegrees
  • CompositionSurfaceBrush.Scale
  • CompositionSurfaceBrush.TransformMatrix 如果將轉換作業套用至 CompositionSurfaceBrush 來源至 CompositionNineGridBrush ，則不會繪製任何圖元內容。

將 Nine-Grid 延展套用至不透明度遮罩

CompositionSurfaceBrush來源的內容也可能是不透明度遮罩表面。 產生的 CompositionNineGridBrush 接著可以設定為CompositionMaskBrush的Mask。 這可讓遮罩的內容視需要調整，而不透明度遮罩受限於 Nine-Grid Stretching。

同樣地，CompositionMaskBrush的來源也可能是 CompositionNineGridBrush 類型。

將效果套用至 CompositionNineGridBrush

CompositionNineGridBrush 可以設定為 CompositionEffectBrush 的來源，以將 IGraphics 或 Windows.UI.Composition.Effect 套用至其 Nine-Grid Stretched 內容。

CompositionColorBrush 來源的注意事項

與 IsCenterHollow 屬性搭配使用， CompositionColorBrushSource 可讓您建立純色框線。 請注意， CompositionColorBrush來源 的內嵌會以 SpriteVisual 本身的座標空間來測量。

內嵌粗細和內嵌刻度注意事項

如果相關聯SpriteVisual的Size屬性變更，CompositionNineGridBrush 的內嵌粗細不會變更。

內嵌尺規屬性提供從筆刷座標空間 (調整 Nine-Grid Inset 的機制，例如影像的圖元空間) 到 SpriteVisual的座標空間。 例如，內嵌尺規屬性可用來控制內嵌粗細，以回應從 NineGridBrush 繪製到 SpriteVisual 的 SpriteVisual 轉換，或在其視覺化樹狀結構中繪製任意上階 (，例如在 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()

執行與釋放 (Free)、釋放 (Release) 或重設 Unmanaged 資源相關聯之應用程式定義的工作。

(繼承來源 CompositionObject)
PopulatePropertyInfo(String, AnimationPropertyInfo)

定義可以產生動畫效果的屬性。

(繼承來源 CompositionObject)
SetInsets(Single)

設定 CompositionNineGridBrush 使用上、下、左和右相同的值來設定 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)

適用於

另請參閱