CompositionNineGridBrush クラス
定義
重要
一部の情報は、リリース前に大きく変更される可能性があるプレリリースされた製品に関するものです。 Microsoft は、ここに記載されている情報について、明示または黙示を問わず、一切保証しません。
ソース ブラシのコンテンツに Nine-Grid ストレッチを適用した後、CompositionBrush で SpriteVisual を描画します。 9 グリッド ストレッチのソースは、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
- 継承
- 属性
Windows の要件
デバイス ファミリ |
Windows 10 Anniversary Edition (10.0.14393.0 で導入)
|
API contract |
Windows.Foundation.UniversalApiContract (v3.0 で導入)
|
例
ボタンアセットに 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) |
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) |
適用対象
こちらもご覧ください
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示