コンポジションのブラシ
UWP アプリケーションから画面に表示されるすべてのものが、ブラシによって描画されたために表示されます。 ブラシを使用すると、単純な単色から画像や描画、複雑な効果チェーンまで、コンテンツを含むユーザー インターフェイス (UI) オブジェクトを描画できます。 このトピックでは、CompositionBrush を使用した描画の概念について説明します。
XAML UWP アプリを扱う場合、XAML ブラシまたは CompositionBrush を使用して UIElement を塗りつぶすことができます。 通常、シナリオが XAML ブラシでサポートされている場合は、XAML ブラシを選択する方が簡単で推奨されます。 たとえば、ボタンの色をアニメーション化し、テキストまたは図形の塗りつぶしを画像で変更します。 その一方で、アニメーション化されたマスク、アニメーション化された 9 グリッド ストレッチ、エフェクト チェーンを使用した塗りつぶしなど、XAML ブラシではサポートされていない処理を行う場合は、XamlCompositionBrushBase を使用することで、CompositionBrush で UIElement を塗りつぶすことができます。
Visual レイヤーを操作する場合は、CompositionBrush を使用して SpriteVisual の領域を描画する必要があります。
前提条件
この概要では、 Visual レイヤーの概要で説明されているように、基本的なコンポジション アプリケーションの構造を理解していることを前提としています。
CompositionBrush を使用したペイント
CompositionBrush出力で領域を"塗りつぶす"。 ブラシが異なれば、出力の種類も異なります。 一部のブラシは、単色で領域を塗りつぶし、他のブラシはグラデーション、画像、カスタム描画、または効果で塗りつぶします。 他のブラシの動作を変更する特殊なブラシもあります。 たとえば、不透明度マスクを使用して CompositionBrush で塗りつぶす領域を制御したり、9 グリッドを使用して領域を塗りつぶすときに CompositionBrush に適用されるストレッチを制御することができます。 CompositionBrush には、次のいずれかの種類を指定できます。
| クラス | 詳細 | で導入 |
|---|---|---|
| CompositionColorBrush | 単色で領域を塗りつぶします。 | Windows 10、バージョン 1511 (SDK 10586) |
| CompositionSurfaceBrush | ICompositionSurface の内容で領域を塗りつぶします。 | Windows 10、バージョン 1511 (SDK 10586) |
| CompositionEffectBrush | コンポジション効果の内容で領域を塗りつぶします。 | Windows 10、バージョン 1511 (SDK 10586) |
| CompositionMaskBrush | 不透明度マスクを使用して CompositionBrush を使用してビジュアルを描画します | Windows 10、バージョン 1607 (SDK 14393) |
| CompositionNineGridBrush | NineGrid ストレッチを使用して CompositionBrush で領域を塗りつぶします | Windows 10、バージョン 1607 (SDK 14393) |
| CompositionLinearGradientBrush | 線形グラデーションで領域を塗りつぶします | Windows 10、バージョン 1709 (SDK 16299) |
| CompositionRadialGradientBrush | 放射状グラデーションを使用して領域を塗りつぶします。 | Windows 10、バージョン 1903 (Insider Preview SDK) |
| CompositionBackdropBrush | アプリケーションから背景ピクセルをサンプリングするか、デスクトップ上のアプリケーションのウィンドウのすぐ後ろにあるピクセルをサンプリングして領域を描画します。 CompositionEffectBrush などの別の CompositionBrush への入力として使用されます | Windows 10、バージョン 1607 (SDK 14393) |
単色による塗りつぶし
CompositionColorBrushは、単色で領域を塗りつぶします。 SolidColorBrush の色を指定するには、さまざまな方法があります。 たとえば、アルファ、赤、青、緑 (ARGB) チャネルを指定したり、 Colors クラスによって提供される定義済みの色のいずれかを使用したりできます。
次の図とコードは、黒い色のブラシで塗りつぶされ、0x9ACD32の色の値を持つ単色のブラシで塗りつぶされる四角形を作成する小さなビジュアル ツリーを示しています。
Compositor _compositor;
ContainerVisual _container;
SpriteVisual _colorVisual1, _colorVisual2;
CompositionColorBrush _blackBrush, _greenBrush;
_compositor = Window.Current.Compositor;
_container = _compositor.CreateContainerVisual();
_blackBrush = _compositor.CreateColorBrush(Colors.Black);
_colorVisual1= _compositor.CreateSpriteVisual();
_colorVisual1.Brush = _blackBrush;
_colorVisual1.Size = new Vector2(156, 156);
_colorVisual1.Offset = new Vector3(0, 0, 0);
_container.Children.InsertAtBottom(_colorVisual1);
_ greenBrush = _compositor.CreateColorBrush(Color.FromArgb(0xff, 0x9A, 0xCD, 0x32));
_colorVisual2 = _compositor.CreateSpriteVisual();
_colorVisual2.Brush = _greenBrush;
_colorVisual2.Size = new Vector2(150, 150);
_colorVisual2.Offset = new Vector3(3, 3, 0);
_container.Children.InsertAtBottom(_colorVisual2);
線状グラデーションによる塗りつぶし
CompositionLinearGradientBrushは、線形グラデーションで領域を塗りつぶします。 線形グラデーションは、直線 (グラデーション軸) に沿って 2 つ以上の色をブレンドします。 GradientStop オブジェクトを使用して、グラデーションの色とその位置を指定します。
次の図とコードは、LinearGradientBrush で塗りつぶされた SpriteVisual を示しています。赤と黄色の色を使用して 2 つの停止があります。
Compositor _compositor;
SpriteVisual _gradientVisual;
CompositionLinearGradientBrush _redyellowBrush;
_compositor = Window.Current.Compositor;
_redyellowBrush = _compositor.CreateLinearGradientBrush();
_redyellowBrush.ColorStops.Add(_compositor.CreateColorGradientStop(0, Colors.Red));
_redyellowBrush.ColorStops.Add(_compositor.CreateColorGradientStop(1, Colors.Yellow));
_gradientVisual = _compositor.CreateSpriteVisual();
_gradientVisual.Brush = _redyellowBrush;
_gradientVisual.Size = new Vector2(156, 156);
放射状グラデーションによる塗りつぶし
CompositionRadialGradientBrushは、放射状グラデーションを使って領域を塗りつぶします。 放射状グラデーションは、楕円の中心から始まり、楕円の半径で終了するグラデーションを成す 2 つ以上の色をブレンドします。 GradientStop オブジェクトは、グラデーションの色と位置を定義するために使用されます。
次の図とコードは、2 つの GradientStops を使用した RadialGradientBrush で塗りつぶされた SpriteVisual を示しています。
Compositor _compositor;
SpriteVisual _gradientVisual;
CompositionRadialGradientBrush RGBrush;
_compositor = Window.Current.Compositor;
RGBrush = _compositor.CreateRadialGradientBrush();
RGBrush.ColorStops.Add(_compositor.CreateColorGradientStop(0, Colors.Aquamarine));
RGBrush.ColorStops.Add(_compositor.CreateColorGradientStop(1, Colors.DeepPink));
_gradientVisual = _compositor.CreateSpriteVisual();
_gradientVisual.Brush = RGBrush;
_gradientVisual.Size = new Vector2(200, 200);
画像による塗りつぶし
CompositionSurfaceBrushは、ICompositionSurface にレンダリングされたピクセルで領域を描画します。 たとえば、CompositionSurfaceBrush を使用すると、 LoadedImageSurface API を使用して、ICompositionSurface サーフェスにレンダリングされたイメージで領域を描画できます。
次の図とコードは、LoadedImageSurface を使用して ICompositionSurface にレンダリングされた甘草のビットマップで塗りつぶされた SpriteVisual を示しています。 CompositionSurfaceBrush のプロパティを使用して、ビジュアルの境界内でビットマップを拡大および配置できます。
Compositor _compositor;
SpriteVisual _imageVisual;
CompositionSurfaceBrush _imageBrush;
_compositor = Window.Current.Compositor;
_imageBrush = _compositor.CreateSurfaceBrush();
// The loadedSurface has a size of 0x0 till the image has been downloaded, decoded and loaded to the surface. We can assign the surface to the CompositionSurfaceBrush and it will show up once the image is loaded to the surface.
LoadedImageSurface _loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/licorice.jpg"));
_imageBrush.Surface = _loadedSurface;
_imageVisual = _compositor.CreateSpriteVisual();
_imageVisual.Brush = _imageBrush;
_imageVisual.Size = new Vector2(156, 156);
カスタム図面を使用して描画する
CompositionSurfaceBrush を使用して、Win2D (または D2D) を使用してレンダリングされた ICompositionSurface のピクセルで領域を描画することもできます。
次のコードは、Win2D を使用して ICompositionSurface にレンダリングされたテキスト ランで塗りつぶされた SpriteVisual を示しています。 Win2D を使用するには、 Win2D NuGet パッケージをプロジェクトに含める必要があります。
Compositor _compositor;
CanvasDevice _device;
CompositionGraphicsDevice _compositionGraphicsDevice;
SpriteVisual _drawingVisual;
CompositionSurfaceBrush _drawingBrush;
_device = CanvasDevice.GetSharedDevice();
_compositionGraphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(_compositor, _device);
_drawingBrush = _compositor.CreateSurfaceBrush();
CompositionDrawingSurface _drawingSurface = _compositionGraphicsDevice.CreateDrawingSurface(new Size(256, 256), DirectXPixelFormat.B8G8R8A8UIntNormalized, DirectXAlphaMode.Premultiplied);
using (var ds = CanvasComposition.CreateDrawingSession(_drawingSurface))
{
ds.Clear(Colors.Transparent);
var rect = new Rect(new Point(2, 2), (_drawingSurface.Size.ToVector2() - new Vector2(4, 4)).ToSize());
ds.FillRoundedRectangle(rect, 15, 15, Colors.LightBlue);
ds.DrawRoundedRectangle(rect, 15, 15, Colors.Gray, 2);
ds.DrawText("This is a composition drawing surface", rect, Colors.Black, new CanvasTextFormat()
{
FontFamily = "Comic Sans MS",
FontSize = 32,
WordWrapping = CanvasWordWrapping.WholeWord,
VerticalAlignment = CanvasVerticalAlignment.Center,
HorizontalAlignment = CanvasHorizontalAlignment.Center
}
);
_drawingBrush.Surface = _drawingSurface;
_drawingVisual = _compositor.CreateSpriteVisual();
_drawingVisual.Brush = _drawingBrush;
_drawingVisual.Size = new Vector2(156, 156);
同様に、CompositionSurfaceBrush を使用して、Win2D 相互運用機能を使用して SwapChain で SpriteVisual を描画することもできます。 このサンプル では、Win2D を使用して SpriteVisual をスワップチェーンで描画する方法の例を示します。
ビデオでペイントする
CompositionSurfaceBrushを使用して、MediaPlayer クラスを介して読み込まれたビデオを使用してレンダリングされた ICompositionSurface のピクセルで領域を描画することもできます。
次のコードは、ビデオが ICompositionSurface に読み込まれた SpriteVisual を示しています。
Compositor _compositor;
SpriteVisual _videoVisual;
CompositionSurfaceBrush _videoBrush;
// MediaPlayer set up with a create from URI
_mediaPlayer = new MediaPlayer();
// Get a source from a URI. This could also be from a file via a picker or a stream
var source = MediaSource.CreateFromUri(new Uri("https://go.microsoft.com/fwlink/?LinkID=809007&clcid=0x409"));
var item = new MediaPlaybackItem(source);
_mediaPlayer.Source = item;
_mediaPlayer.IsLoopingEnabled = true;
// Get the surface from MediaPlayer and put it on a brush
_videoSurface = _mediaPlayer.GetSurface(_compositor);
_videoBrush = _compositor.CreateSurfaceBrush(_videoSurface.CompositionSurface);
_videoVisual = _compositor.CreateSpriteVisual();
_videoVisual.Brush = _videoBrush;
_videoVisual.Size = new Vector2(156, 156);
フィルター効果を使用してペイントする
CompositionEffectBrushは CompositionEffect の出力を持つ領域を描画します。 ビジュアル レイヤーの効果は、色、グラデーション、画像、ビデオ、スワップチェーン、UI の領域、ビジュアルのツリーなどのソース コンテンツのコレクションに適用されるアニメーション化可能なフィルター効果と考えることができます。 通常、ソース コンテンツは別の CompositionBrush を使用して指定されます。
次の図とコードは、飽和フィルター効果が適用された猫の画像で塗りつぶされた SpriteVisual を示しています。
Compositor _compositor;
SpriteVisual _effectVisual;
CompositionEffectBrush _effectBrush;
_compositor = Window.Current.Compositor;
var graphicsEffect = new SaturationEffect {
Saturation = 0.0f,
Source = new CompositionEffectSourceParameter("mySource")
};
var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
_effectBrush = effectFactory.CreateBrush();
CompositionSurfaceBrush surfaceBrush =_compositor.CreateSurfaceBrush();
LoadedImageSurface loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/cat.jpg"));
SurfaceBrush.surface = loadedSurface;
_effectBrush.SetSourceParameter("mySource", surfaceBrush);
_effectVisual = _compositor.CreateSpriteVisual();
_effectVisual.Brush = _effectBrush;
_effectVisual.Size = new Vector2(156, 156);
CompositionBrushes を使用してエフェクトを作成する方法の詳細については、「ビジュアル レイヤーの Effects」を参照してください。
不透明度マスクを適用した CompositionBrush を使用したペイント
CompositionMaskBrushは、不透明度マスクが適用された CompositionBrush で領域を塗りつぶします。 不透明度マスクのソースには、CompositionColorBrush、CompositionLinearGradientBrush、CompositionSurfaceBrush、CompositionEffectBrush、CompositionNineGridBrush のいずれかの CompositionBrush を指定できます。 不透明度マスクは CompositionSurfaceBrush として指定する必要があります。
次の図とコードは、CompositionMaskBrush で塗りつぶされた SpriteVisual を示しています。 マスクのソースは CompositionLinearGradientBrush であり、円の画像をマスクとして使用して円のようにマスクされます。
Compositor _compositor;
SpriteVisual _maskVisual;
CompositionMaskBrush _maskBrush;
_compositor = Window.Current.Compositor;
_maskBrush = _compositor.CreateMaskBrush();
CompositionLinearGradientBrush _sourceGradient = _compositor.CreateLinearGradientBrush();
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(0,Colors.Red));
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(1,Colors.Yellow));
_maskBrush.Source = _sourceGradient;
LoadedImageSurface loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/circle.png"), new Size(156.0, 156.0));
_maskBrush.Mask = _compositor.CreateSurfaceBrush(loadedSurface);
_maskVisual = _compositor.CreateSpriteVisual();
_maskVisual.Brush = _maskBrush;
_maskVisual.Size = new Vector2(156, 156);
NineGrid ストレッチを使用した CompositionBrush を使用したペイント
CompositionNineGridBrushは、9 グリッドメタファーを使用してストレッチされた CompositionBrush で領域を描画します。 9 グリッドのメタファーを使用すると、CompositionBrush のエッジとコーナーを中心とは異なる方法で引き伸ばすことができます。 9 グリッド ストレッチのソースは、CompositionColorBrush、CompositionSurfaceBrush、または CompositionEffectBrush のいずれかの CompositionBrush で実行できます。
次のコードは、CompositionNineGridBrush で塗りつぶされた SpriteVisual を示しています。 マスクのソースは、Nine-Grid を使用してストレッチされる CompositionSurfaceBrush です。
Compositor _compositor;
SpriteVisual _nineGridVisual;
CompositionNineGridBrush _nineGridBrush;
_compositor = Window.Current.Compositor;
_ninegridBrush = _compositor.CreateNineGridBrush();
// nineGridImage.png is 50x50 pixels; nine-grid insets, as measured relative to the actual size of the image, are: left = 1, top = 5, right = 10, bottom = 20 (in pixels)
LoadedImageSurface _imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/nineGridImage.png"));
_nineGridBrush.Source = _compositor.CreateSurfaceBrush(_imageSurface);
// set Nine-Grid Insets
_ninegridBrush.SetInsets(1, 5, 10, 20);
// set appropriate Stretch on SurfaceBrush for Center of Nine-Grid
sourceBrush.Stretch = CompositionStretch.Fill;
_nineGridVisual = _compositor.CreateSpriteVisual();
_nineGridVisual.Brush = _ninegridBrush;
_nineGridVisual.Size = new Vector2(100, 75);
背景ピクセルを使用してペイントする
CompositionBackdropBrush は、領域の背景のコンテンツを使用して領域を塗りつぶします。 CompositionBackdropBrush は単独では使用されませんが、代わりに EffectBrush のような別の CompositionBrush への入力として使用されます。 たとえば、CompositionBackdropBrush をぼかし効果への入力として使用すると、フロストガラス効果を実現できます。
次のコードは、CompositionSurfaceBrush を使用してイメージを作成する小さなビジュアル ツリーと、イメージの上にフロストガラスオーバーレイを示しています。 フロストガラスオーバーレイは、画像の上に EffectBrush で満たされた SpriteVisual を配置することによって作成されます。 EffectBrush は、ぼかし効果への入力として CompositionBackdropBrush を使用します。
Compositor _compositor;
SpriteVisual _containerVisual;
SpriteVisual _imageVisual;
SpriteVisual _backdropVisual;
_compositor = Window.Current.Compositor;
// Create container visual to host the visual tree
_containerVisual = _compositor.CreateContainerVisual();
// Create _imageVisual and add it to the bottom of the container visual.
// Paint the visual with an image.
CompositionSurfaceBrush _licoriceBrush = _compositor.CreateSurfaceBrush();
LoadedImageSurface loadedSurface =
LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/licorice.jpg"));
_licoriceBrush.Surface = loadedSurface;
_imageVisual = _compositor.CreateSpriteVisual();
_imageVisual.Brush = _licoriceBrush;
_imageVisual.Size = new Vector2(156, 156);
_imageVisual.Offset = new Vector3(0, 0, 0);
_containerVisual.Children.InsertAtBottom(_imageVisual)
// Create a SpriteVisual and add it to the top of the containerVisual.
// Paint the visual with an EffectBrush that applies blur to the content
// underneath the Visual to create a frosted glass effect.
GaussianBlurEffect blurEffect = new GaussianBlurEffect(){
Name = "Blur",
BlurAmount = 1.0f,
BorderMode = EffectBorderMode.Hard,
Source = new CompositionEffectSourceParameter("source");
};
CompositionEffectFactory blurEffectFactory = _compositor.CreateEffectFactory(blurEffect);
CompositionEffectBrush _backdropBrush = blurEffectFactory.CreateBrush();
// Create a BackdropBrush and bind it to the EffectSourceParameter source
_backdropBrush.SetSourceParameter("source", _compositor.CreateBackdropBrush());
_backdropVisual = _compositor.CreateSpriteVisual();
_backdropVisual.Brush = _licoriceBrush;
_backdropVisual.Size = new Vector2(78, 78);
_backdropVisual.Offset = new Vector3(39, 39, 0);
_containerVisual.Children.InsertAtTop(_backdropVisual);
CompositionBrushes の組み合わせ
多くの CompositionBrush では、他の CompositionBrush が入力として使用されます。 たとえば、SetSourceParameter メソッドを使用して、CompositionEffectBrush への入力として別の CompositionBrush を設定できます。 次の表は、CompositionBrushes でサポートされている組み合わせの概要を示しています。 サポートされていない組み合わせを使用すると、例外がスローされることに注意してください。
| Brush | EffectBrush.SetSourceParameter() | MaskBrush.Mask | MaskBrush.Source | NineGridBrush.Source |
|---|---|---|---|---|
| CompositionColorBrush | YES | YES | YES | YES |
| CompositionLinear GradientBrush |
YES | YES | YES | 使用不可 |
| CompositionSurfaceBrush | YES | YES | YES | YES |
| CompositionEffectBrush | 使用不可 | NO | YES | 使用不可 |
| CompositionMaskBrush | 使用不可 | 使用不可 | 使用不可 | 使用不可 |
| CompositionNineGridBrush | YES | YES | YES | 使用不可 |
| CompositionBackdropBrush | YES | NO | 使用不可 | 使用不可 |
XAML ブラシと CompositionBrush の使用
次の表に、アプリケーションで UIElement または SpriteVisual を描画するときに XAML またはコンポジション ブラシの使用を規定するかどうかを示します。
Note
XAML UIElement に CompositionBrush が推奨される場合、CompositionBrush は XamlCompositionBrushBase を使用してパッケージ化されていると見なされます。
関連項目
ネイティブ DirectX と Direct2D 相互運用を BeginDraw および EndDraw と組み合わせて使用する
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示