CompositionNineGridBrush 類別
定義
重要
部分資訊涉及發行前產品,在發行之前可能會有大幅修改。 Microsoft 對此處提供的資訊,不做任何明確或隱含的瑕疵擔保。
在套用 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
- 繼承
- 屬性
範例
將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:將Nine-Grid延展套用至紋理影像表面。
- CompositionColorBrush:建立純色框線。
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 |
用來建立這個CompositionObject的Compositor。 (繼承來源 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。 |
方法
適用於
另請參閱
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應