共用方式為


CompositionNineGridBrush 類別

定義

在套用 Nine-Grid Stretching 至來源筆刷的內容之後,使用 CompositionBrush 繪製 SpriteVisual 。 九格線延展的來源可以由 CompositionColorBrush、CompositionSurfaceBrush 或 CompositionEffectBrush 類型的 CompositionBrush 所組成。

public ref class CompositionNineGridBrush sealed : CompositionBrush
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.Foundation.LiftedContract, 65536)]
/// [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.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.Foundation.WindowsAppSDKContract, 65536)]
class CompositionNineGridBrush final : CompositionBrush
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.Foundation.LiftedContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class CompositionNineGridBrush : CompositionBrush
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.Foundation.WindowsAppSDKContract), 65536)]
public sealed class CompositionNineGridBrush : CompositionBrush
Public NotInheritable Class CompositionNineGridBrush
Inherits CompositionBrush
繼承
Object Platform::Object IInspectable CompositionObject CompositionBrush CompositionNineGridBrush
屬性

範例

將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延展套用至 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 來源的注意事項

內嵌會指定為以與CompositionSurfaceBrush相關聯之 ICompositionSurface座標空間中測量的圖元值。 在 Surface 座標空間中指定的 inset 與內嵌之間的關聯性,如同在 SpriteVisual 上繪製時所顯示,如下所示:

Inset_Surface*InsetScale=Inset_SpriteVisual

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

九格線中心的延展

使用 CompositionStretch.Fill 在圓角矩形資產上指定的 NineGridBrush Insets;Inset 會以圖元為單位指定, (以包含資產的 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 接著可以設定為 Mask 設定為 CompositionMaskBrush。 這可讓遮罩內容視需要縮放,而不透明度遮罩受限於Nine-Grid Stretching。

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

將效果套用至 CompositionNineGridBrush

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

CompositionColorBrush 來源的注意事項

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

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

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

內嵌刻度屬性提供一種機制,可從筆刷的座標空間 (Nine-Grid Inset 調整,例如影像) 圖元空間到 SpriteVisual的圖元空間。 例如,內嵌刻度屬性可用來控制內嵌粗細,以回應從 NineGridBrush 繪製到 SpriteVisual 的 SpriteVisual ,或在其視覺化樹狀結構中繪製任意上階 (,例如 DPI 小數位數的情況等等。) 。 在此情況下, ExpressionAnimation會提供一種方法來動態更新內嵌小數位數的值。

屬性

BottomInset

從來源內容的下邊緣內嵌,指定底端資料列的粗細。 預設為 0.0f。

BottomInsetScale

要套用至 BottomInset 的規模。 預設為 1.0f。

Comment

要與 CompositionObject 建立關聯的字串。

(繼承來源 CompositionObject)
Compositor

用來建立這個CompositionObjectCompositor

(繼承來源 CompositionObject)
DispatcherQueue

取得 CompositionObject 的 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)
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)

適用於

另請參閱