CompositionNineGridBrush クラス

定義

名前空間:

Microsoft.UI.Composition

ソース ブラシのコンテンツにNine-Gridストレッチを適用した後、CompositionBrush で SpriteVisual を描画します。 9 グリッド ストレッチのソースは、CompositionColorBrush 型、CompositionSurfaceBrush 型、CompositionEffectBrush 型の任意の CompositionBrush を使用できます。

public ref class CompositionNineGridBrush sealed : 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.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

属性

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

例

ボタンアセットにNine-Gridストレッチを適用する (CompositionSurfaceBrushソース)

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に効果を適用する ( CompositionEffectBrush への入力として CompositionNineGridBrush)

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 プロパティは、次の 2 種類のブラシのいずれかを受け入れます。

• CompositionSurfaceBrush: テクスチャイメージサーフェスにNine-Gridストレッチを適用します。
• CompositionColorBrush: 単色の境界線を作成します。

CompositionSurfaceBrush ソースに関する注意事項

インセットは、CompositionSurfaceBrush に関連付けられている ICompositionSurface の座標空間で測定されるピクセル値として指定されます。 SpriteVisual で描画したときに表示されるサーフェスの座標空間で指定されたインセットとインセットの関係は次のとおりです。

Inset_Surface*InsetScale=Inset_SpriteVisual

CompositionSurfaceBrush。Stretch プロパティは、Nine-Gridの中心のコンテンツをストレッチする方法を指定します。

CompositionStretch.Fill で丸められた四角形アセットに指定された NineGridBrush Insets。Insets はピクセル単位で指定されます (アセットを含む ICompositionSurface の座標空間で測定されます)

CompositionNineGridBrush は、次のいずれかのプロパティを使用して変換が適用されている CompositionSurfaceBrush ソースにNine-Gridスケーリングを適用するようには設計されていません。

• CompositionSurfaceBrush.AnchorPoint
• CompositionSurfaceBrush.CenterPoint
• CompositionSurfaceBrush.Offset
• CompositionSurfaceBrush.RotationAngle
• CompositionSurfaceBrush.RotationAngleInDegrees
• CompositionSurfaceBrush.Scale
• CompositionSurfaceBrush.TransformMatrix CompositionNineGridBrush に対して CompositionSurfaceBrush ソースに変換操作が適用されている場合、ピクセル コンテンツは描画されません。

不透明度マスクにNine-Gridストレッチを適用する

CompositionSurfaceBrush ソースの内容は、不透明度マスク サーフェスである場合もあります。 結果として得られる CompositionNineGridBrush は、CompositionMaskBrush にマスクとして設定できます。 これにより、不透明度マスクがNine-Gridストレッチの対象になっている間に、マスクされているコンテンツを必要に応じてスケーリングできます。

同様に、CompositionMaskBrush のソースは CompositionNineGridBrush 型でもかまいません。

CompositionNineGridBrush への効果の適用

CompositionNineGridBrush を CompositionEffectBrush にソースとして設定して、IGraphics または Windows.UI.Composition.Effect をNine-Gridストレッチ コンテンツに適用できます。

CompositionColorBrush ソースに関する注意事項

IsCenterHollow プロパティと組み合わせて、CompositionColorBrushソースを使用すると、単色の境界線を作成できます。 CompositionColorBrushソースのインセットは SpriteVisual 自体の座標空間で測定されることに注意してください。

インセットの太さとインセットスケールに関する注意事項

関連する SpriteVisual の Size プロパティが変更された場合、CompositionNineGridBrush のインセットの太さは変更されません。

インセット スケール プロパティは、ブラシの座標空間 (画像のピクセル空間など) から SpriteVisual の座標空間にNine-Gridインセットをスケーリングするメカニズムを提供します。 たとえば、Inset スケール プロパティを使用して、NineGridBrush が描画される SpriteVisual から継承されたスケール変換、または Visual ツリー内の任意の先祖 (DPI スケールの場合など) に応じて、インセットの太さを制御できます。 この場合、 ExpressionAnimationは、インセット スケールの値を動的に更新する手段を提供します。

プロパティ

BottomInset	下の行の太さを指定するソース コンテンツの下端からのインセット。 既定値は 0.0f です。
BottomInsetScale	BottomInset に適用するスケール。 既定値は 1.0f です。
Comment	CompositionObject に関連付ける文字列。 (継承元 CompositionObject)
Compositor	この CompositionObject の作成に使用するコンポジター。 (継承元 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()	アンマネージ リソースの解放またはリセットに関連付けられているアプリケーション定義のタスクを実行します。 (継承元 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)

こちらもご覧ください

• CompositionBrush
• IClosable