イメージ、描画、およびビジュアルによる塗りつぶしPainting with Images, Drawings, and Visuals

このトピックでは、、 ImageBrush DrawingBrush、およびVisualBrushオブジェクトを使用して、イメージ、 Drawing、またはVisualを使用して領域を塗りつぶす方法について説明します。This topic describes how to use ImageBrush, DrawingBrush, and VisualBrush objects to paint an area with an image, a Drawing, or a Visual.

必須コンポーネントPrerequisites

このトピックを理解するには、Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) に用意されているさまざまな種類のブラシとその基本的な機能を理解している必要があります。To understand this topic, you should be familiar with the different types of brushes Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides and their basic features. 概要については、「WPF のブラシの概要」を参照してください。For an introduction, see the WPF Brushes Overview.

イメージで領域を塗りつぶすPaint an Area with an Image

ImageBrushImageSourceを使用して領域を塗りつぶします。An ImageBrush paints an area with an ImageSource. で使用ImageSourceする最も一般的な型BitmapImageは、ビットマップグラフィックを表すです。ImageBrushThe most common type of ImageSource to use with an ImageBrush is a BitmapImage, which describes a bitmap graphic. DrawingImage使用すると、 Drawingオブジェクトを使用して描画できますが、代わりにをDrawingBrush使用する方が簡単です。You can use a DrawingImage to paint using a Drawing object, but it is simpler to use a DrawingBrush instead. ImageSourceオブジェクトの詳細については、「イメージングの概要」を参照してください。For more information about ImageSource objects, see the Imaging Overview.

を使用してImageBrush描画するにBitmapImageは、を作成し、それを使用してビットマップコンテンツを読み込みます。To paint with an ImageBrush, create a BitmapImage and use it to load the bitmap content. BitmapImageに、を使用してImageSourceImageBrushのプロパティを設定します。Then, use the BitmapImage to set the ImageSource property of the ImageBrush. 最後に、描画ImageBrushするオブジェクトにを適用します。Finally, apply the ImageBrush to the object you want to paint. Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)は、を読み込むイメージのパスImageSourceを使用しImageBrushて、のプロパティを設定することもできます。In Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), you can also just set the ImageSource property of the ImageBrush with the path of the image to load.

Brush すべてImageBrushのオブジェクトと同様に、を使用して、図形、パネル、コントロール、テキストなどのオブジェクトを塗りつぶすことができます。Like all Brush objects, an ImageBrush can be used to paint objects such as shapes, panels, controls, and text. 次の図は、 ImageBrushで実現できるいくつかの効果を示しています。The following illustration shows some effects that can be achieved with an ImageBrush.

Imagebrush の出力例ImageBrush output examples
ImageBrush で描画されたオブジェクトObjects painted by an ImageBrush

既定では、 ImageBrushは描画される領域を完全に埋めるようにイメージを拡大します。描画された領域の縦横比がイメージよりも異なる場合は、イメージがゆがめられる可能性があります。By default, an ImageBrush stretches its image to completely fill the area being painted, possibly distorting the image if the painted area has a different aspect ratio than the image. この動作を変更するには、 Stretchプロパティを既定値のFillから、 None Uniform、またはUniformToFillに変更します。You can change this behavior by changing the Stretch property from its default value of Fill to None, Uniform, or UniformToFill. ImageBrushTileBrush一種であるため、イメージブラシが出力領域を塗りつぶす方法を正確に指定し、パターンを作成することもできます。Because ImageBrush is a type of TileBrush, you can specify exactly how an image brush fills the output area and even create patterns. 高度なTileBrush機能の詳細については、「タイルブラシの概要」を参照してください。For more information about advanced TileBrush features, see the TileBrush Overview.

例:ビットマップイメージを使用したオブジェクトの塗りつぶしExample: Paint an Object with a Bitmap Image

次の例ではImageBrush 、を使用BackgroundしてCanvasのを描画します。The following example uses an ImageBrush to paint the Background of a Canvas.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.BrushExamples.ImageBrushExample"
  WindowTitle="ImageBrush Example"
  Background="White">

  <StackPanel>

    <Canvas
      Height="200" Width="300">
      <Canvas.Background>
        <ImageBrush ImageSource="sampleImages\Waterlilies.jpg" />
      </Canvas.Background>
    </Canvas>

    
  </StackPanel>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace Microsoft.Samples.BrushExamples
{

    public class ImageBrushExample : Page
    {
    
        public ImageBrushExample()
        {
        
            StackPanel mainPanel = new StackPanel();
            canvasBackgroundExample(mainPanel);
            this.Content = mainPanel;
        
        }
                 

        private void canvasBackgroundExample(Panel mainPanel)
        {
            
            BitmapImage theImage = new BitmapImage
                (new Uri("sampleImages\\Waterlilies.jpg", UriKind.Relative));
            
            ImageBrush myImageBrush = new ImageBrush(theImage);
            
            Canvas myCanvas = new Canvas();
            myCanvas.Width = 300;
            myCanvas.Height = 200;
            myCanvas.Background = myImageBrush;
            
            mainPanel.Children.Add(myCanvas);
    
    
        }
    
    }

}

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Imaging

Namespace Microsoft.Samples.BrushExamples

    Public Class ImageBrushExample
        Inherits Page

        Public Sub New()

            Dim mainPanel As New StackPanel()
            canvasBackgroundExample(mainPanel)
            Me.Content = mainPanel

        End Sub


        Private Sub canvasBackgroundExample(ByVal mainPanel As Panel)

            Dim theImage As New BitmapImage(New Uri("sampleImages\Waterlilies.jpg", UriKind.Relative))

            Dim myImageBrush As New ImageBrush(theImage)

            Dim myCanvas As New Canvas()
            myCanvas.Width = 300
            myCanvas.Height = 200
            myCanvas.Background = myImageBrush

            mainPanel.Children.Add(myCanvas)


        End Sub

    End Class

End Namespace

描画を使用して領域を塗りつぶすPaint an Area with a Drawing

DrawingBrush使用すると、図形、テキスト、画像、およびビデオを使用して領域を塗りつぶすことができます。A DrawingBrush enables you to paint an area with shapes, text, images, and video. 描画ブラシ内の図形自体は、純色、グラデーション、イメージ、または別DrawingBrushの図形で塗りつぶすことができます。Shapes inside a drawing brush may themselves be painted with a solid color, gradient, image, or even another DrawingBrush. 次の図は、のいくつかDrawingBrushの使用方法を示しています。The following illustration demonstrates some uses of a DrawingBrush.

DrawingBrush の出力例DrawingBrush output examples
DrawingBrush で塗りつぶされたオブジェクトObjects painted by a DrawingBrush

DrawingBrush 、オブジェクトをDrawing使用して領域を塗りつぶします。A DrawingBrush paints an area with a Drawing object. オブジェクトDrawingは、形状、ビットマップ、ビデオ、テキスト行など、表示される内容を記述します。A Drawing object describes visible content, such as a shape, bitmap, video, or a line of text. さまざまな種類の描画で、さまざまな種類のコンテンツを記述します。Different types of drawings describe different types of content. 次の一覧に、さまざまな種類の描画オブジェクトを示します。The following is a list of the different types of drawing objects.

Drawingオブジェクトの詳細については、「 Drawing オブジェクトの概要」を参照してください。For more information about Drawing objects, see the Drawing Objects Overview.

と同様に、 DrawingBrushはをDrawing拡大して出力領域を塗りつぶします。 ImageBrushLike an ImageBrush, a DrawingBrush stretches its Drawing to fill its output area. この動作をオーバーライドするには、 Stretchプロパティをの既定のFill設定から変更します。You can override this behavior by changing the Stretch property from its default setting of Fill. 詳細については、Stretch プロパティを参照してください。For more information, see the Stretch property.

例:描画によるオブジェクトの塗りつぶしExample: Paint an Object with a Drawing

次の例は、3 つの楕円の描画によってオブジェクトを塗りつぶす方法を示しています。The following example shows how to paint an object with a drawing of three ellipses. GeometryDrawingは、省略記号を説明するために使用されます。A GeometryDrawing is used to describe the ellipses.

<Button Content="A Button">
  <Button.Background>
    <DrawingBrush>
      <DrawingBrush.Drawing>
        <GeometryDrawing Brush="LightBlue">
          <GeometryDrawing.Geometry>
            <GeometryGroup>
              <EllipseGeometry RadiusX="12.5" RadiusY="25" Center="25,50" />
              <EllipseGeometry RadiusX="12.5" RadiusY="25" Center="50,50" />
              <EllipseGeometry RadiusX="12.5" RadiusY="25" Center="75,50" />
            </GeometryGroup>
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Thickness="1" Brush="Gray" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Button.Background>
</Button>
// Create a DrawingBrush.
DrawingBrush myDrawingBrush = new DrawingBrush();

// Create a drawing.
GeometryDrawing myGeometryDrawing = new GeometryDrawing();
myGeometryDrawing.Brush = Brushes.LightBlue;
myGeometryDrawing.Pen = new Pen(Brushes.Gray, 1);
GeometryGroup ellipses = new GeometryGroup();
ellipses.Children.Add(new EllipseGeometry(new Point(25,50), 12.5, 25));
ellipses.Children.Add(new EllipseGeometry(new Point(50,50), 12.5, 25));
ellipses.Children.Add(new EllipseGeometry(new Point(75,50), 12.5, 25));

myGeometryDrawing.Geometry = ellipses;
myDrawingBrush.Drawing = myGeometryDrawing;

Button myButton = new Button();
myButton.Content = "A Button";

// Use the DrawingBrush to paint the button's background.
myButton.Background = myDrawingBrush;
' Create a DrawingBrush.
Dim myDrawingBrush As New DrawingBrush()

' Create a drawing.
Dim myGeometryDrawing As New GeometryDrawing()
myGeometryDrawing.Brush = Brushes.LightBlue
myGeometryDrawing.Pen = New Pen(Brushes.Gray, 1)
Dim ellipses As New GeometryGroup()
ellipses.Children.Add(New EllipseGeometry(New Point(25,50), 12.5, 25))
ellipses.Children.Add(New EllipseGeometry(New Point(50,50), 12.5, 25))
ellipses.Children.Add(New EllipseGeometry(New Point(75,50), 12.5, 25))

myGeometryDrawing.Geometry = ellipses
myDrawingBrush.Drawing = myGeometryDrawing

Dim myButton As New Button()
myButton.Content = "A Button"

' Use the DrawingBrush to paint the button's background.
myButton.Background = myDrawingBrush

ビジュアルで領域を塗りつぶすPaint an Area with a Visual

すべてのブラシの最も汎用性と強力な機能でVisualBrushあるは、をVisual使用して領域を描画します。The most versatile and powerful of all the brushes, the VisualBrush paints an area with a Visual. Visualは、多くの便利なグラフィカルコンポーネントの先祖として機能する低レベルのグラフィック型です。A Visual is a low-level graphical type that serves as the ancestor of many useful graphical components. たとえばWindow、、 FrameworkElement、およびControlの各クラスは、すべてのVisual種類のオブジェクトです。For example, the Window, FrameworkElement, and Control classes are all types of Visual objects. を使用するとWindows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) 、ほとんどすべてのグラフィックオブジェクトを使用して領域を塗りつぶすことができます。VisualBrushUsing a VisualBrush, you can paint areas with almost any Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) graphical object.

注意

はオブジェクトのFreezable型ですが、 Visualプロパティが以外nullの値に設定されている場合、固定 (読み取り専用) にすることはできません。 VisualBrushAlthough VisualBrush is a type of Freezable object, it cannot be frozen (made read-only) when its Visual property is set to a value other than null.

Visualコンテンツを指定するには、 VisualBrush2 つの方法があります。There are two ways to specify the Visual content of a VisualBrush.

UIElement ( Visual VisualBrush trueパネルやコントロールAutoLayoutContentなどVisual ) の新しいを定義すると、プロパティがに設定されている場合、とその子要素でレイアウトシステムが実行されます。UIElementWhen you define a new Visual for a VisualBrush and that Visual is a UIElement (such as a panel or control), the layout system runs on the UIElement and its child elements when the AutoLayoutContent property is set to true. ただし、ルートUIElementは基本的にシステムの残りの部分から分離されており、外部レイアウトはこの境界をはことはできません。However, the root UIElement is essentially isolated from the rest of the system: styles, and external layout can't permeate this boundary. したがって、ルートUIElementのサイズを明示的に指定する必要があります。これは、唯一のVisualBrush親がであるため、描画される領域に自動的にサイズを変更することはできないためです。Therefore, you should explicitly specify the size of the root UIElement, because its only parent is the VisualBrush and therefore it cannot automatically size itself to the area being painted. Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) でのレイアウトの詳細については、「レイアウト」を参照してください。For more information about layout in Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF), see the Layout.

ImageBrush同様DrawingBrushに、 VisualBrushは、その内容を出力領域に合わせて拡大します。Like ImageBrush and DrawingBrush, a VisualBrush stretches its content to fill its output area. この動作をオーバーライドするには、 Stretchプロパティをの既定のFill設定から変更します。You can override this behavior by changing the Stretch property from its default setting of Fill. 詳細については、Stretch プロパティを参照してください。For more information, see the Stretch property.

例:ビジュアルを使用してオブジェクトを塗りつぶすExample: Paint an Object with a Visual

次の例では、さまざまなコントロールとパネルを使用して四角形を塗りつぶします。In the following example, several controls and a panel are used to paint a rectangle.

<Rectangle Width="150" Height="150" Stroke="Black" Margin="5,0,5,0">
  <Rectangle.Fill>
    <VisualBrush>
      <VisualBrush.Visual>
        <StackPanel Background="White">
          <Rectangle Width="25" Height="25" Fill="Red" Margin="2" />
          <TextBlock FontSize="10pt" Margin="2">Hello, World!</TextBlock>
          <Button Margin="2">A Button</Button>
        </StackPanel>
      </VisualBrush.Visual>
    </VisualBrush>
  </Rectangle.Fill>
</Rectangle>
VisualBrush myVisualBrush = new VisualBrush();

// Create the visual brush's contents.
StackPanel myStackPanel = new StackPanel();
myStackPanel.Background = Brushes.White;

Rectangle redRectangle = new Rectangle();
redRectangle.Width = 25;
redRectangle.Height =25; 
redRectangle.Fill = Brushes.Red;
redRectangle.Margin = new Thickness(2);
myStackPanel.Children.Add(redRectangle);

TextBlock someText = new TextBlock();
FontSizeConverter myFontSizeConverter = new FontSizeConverter();
someText.FontSize = (double)myFontSizeConverter.ConvertFrom("10pt");
someText.Text = "Hello, World!";
someText.Margin = new Thickness(2);
myStackPanel.Children.Add(someText);

Button aButton = new Button();
aButton.Content = "A Button";
aButton.Margin = new Thickness(2);
myStackPanel.Children.Add(aButton);

// Use myStackPanel as myVisualBrush's content.
myVisualBrush.Visual = myStackPanel;

// Create a rectangle to paint.
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 150;
myRectangle.Height = 150;
myRectangle.Stroke = Brushes.Black;
myRectangle.Margin = new Thickness(5,0,5,0);

// Use myVisualBrush to paint myRectangle.
myRectangle.Fill = myVisualBrush;

Dim myVisualBrush As New VisualBrush()

' Create the visual brush's contents.
Dim myStackPanel As New StackPanel()
myStackPanel.Background = Brushes.White

Dim redRectangle As New Rectangle()
With redRectangle
    .Width = 25
    .Height = 25
    .Fill = Brushes.Red
    .Margin = New Thickness(2)
End With
myStackPanel.Children.Add(redRectangle)

Dim someText As New TextBlock()
Dim myFontSizeConverter As New FontSizeConverter()
someText.FontSize = CDbl(myFontSizeConverter.ConvertFrom("10pt"))
someText.Text = "Hello, World!"
someText.Margin = New Thickness(2)
myStackPanel.Children.Add(someText)

Dim aButton As New Button()
aButton.Content = "A Button"
aButton.Margin = New Thickness(2)
myStackPanel.Children.Add(aButton)

' Use myStackPanel as myVisualBrush's content.
myVisualBrush.Visual = myStackPanel

' Create a rectangle to paint.
Dim myRectangle As New Rectangle()
With myRectangle
    .Width = 150
    .Height = 150
    .Stroke = Brushes.Black
    .Margin = New Thickness(5, 0, 5, 0)
End With

' Use myVisualBrush to paint myRectangle.
myRectangle.Fill = myVisualBrush

例:反射を作成するExample: Create a Reflection

前の例では、背景としVisualて使用するために新しいを作成する方法を示しました。The preceding example showed how to create a new Visual for use as a background. また、を使用しVisualBrushて既存のビジュアルを表示することもできます。この機能により、反射や拡大などの興味深い視覚効果を生み出すことができます。You can also use a VisualBrush to display an existing visual; this capability enables you to produce interesting visual effects, such as reflections and magnification. 次の例ではVisualBrush 、を使用して、 Border複数の要素を含むのリフレクションを作成します。The following example uses a VisualBrush to create a reflection of a Border that contains several elements. 次の図は、この例で生成される出力を示しています。The following illustration shows the output that this example produces.

反映されたビジュアルオブジェクトA reflected Visual object
反映された Visual オブジェクトA reflected Visual object

using System;
using System.Windows;
using System.Windows.Data;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Effects;
using System.Windows.Media.Imaging;
using System.IO;
using System.Collections.ObjectModel;
using System.Windows.Shapes;
namespace SDKSample
{
    public partial class ReflectionExample : Page
    {
        public ReflectionExample()
        {
            // Create a name scope for the page.
            NameScope.SetNameScope(this, new NameScope());

            this.Background = Brushes.Black;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(50);

            Border myReflectedBorder = new Border();
            this.RegisterName("ReflectedVisual", myReflectedBorder);

            // Create a gradient background for the border.
            GradientStop firstStop = new GradientStop();
            firstStop.Offset = 0.0;
            Color firstStopColor = new Color();
            firstStopColor.R = 204;
            firstStopColor.G = 204;
            firstStopColor.B = 255;
            firstStopColor.A = 255;
            firstStop.Color = firstStopColor;
            GradientStop secondStop = new GradientStop();
            secondStop.Offset = 1.0;
            secondStop.Color = Colors.White;

            GradientStopCollection myGradientStopCollection = new GradientStopCollection();
            myGradientStopCollection.Add(firstStop);
            myGradientStopCollection.Add(secondStop);

            LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();
            myLinearGradientBrush.StartPoint = new Point(0, 0.5);
            myLinearGradientBrush.EndPoint = new Point(1, 0.5);
            myLinearGradientBrush.GradientStops = myGradientStopCollection;

            myReflectedBorder.Background = myLinearGradientBrush;

            // Add contents to the border.
            StackPanel borderStackPanel = new StackPanel();
            borderStackPanel.Orientation = Orientation.Horizontal;
            borderStackPanel.Margin = new Thickness(10);

            TextBlock myTextBlock = new TextBlock();
            myTextBlock.TextWrapping = TextWrapping.Wrap;
            myTextBlock.Width = 200;
            myTextBlock.Text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit." +
                               " Suspendisse vel ante. Donec luctus tortor sit amet est." +
                               " Nullam pulvinar odio et wisi." +
                               " Pellentesque quis magna. Sed pellentesque." +
                               " Nulla euismod." +
                               "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.";

            borderStackPanel.Children.Add(myTextBlock);

            StackPanel ellipseStackPanel = new StackPanel();

            Ellipse ellipse1 = new Ellipse();
            ellipse1.Margin = new Thickness(10);
            ellipse1.Height = 50;
            ellipse1.Width = 50;
            ellipse1.Fill = Brushes.Black;
            ellipseStackPanel.Children.Add(ellipse1);
            Ellipse ellipse2 = new Ellipse();
            ellipse2.Margin = new Thickness(10);
            ellipse2.Height = 50;
            ellipse2.Width = 50;
            ellipse2.Fill = Brushes.Black;
            ellipseStackPanel.Children.Add(ellipse2);
            Ellipse ellipse3 = new Ellipse();
            ellipse3.Margin = new Thickness(10);
            ellipse3.Height = 50;
            ellipse3.Width = 50;
            ellipse3.Fill = Brushes.Black;
            ellipseStackPanel.Children.Add(ellipse3);
            borderStackPanel.Children.Add(ellipseStackPanel);

            myReflectedBorder.Child = borderStackPanel;

            // Create divider rectangle
            Rectangle dividerRectangle = new Rectangle();
            dividerRectangle.Height = 1;
            dividerRectangle.Fill = Brushes.Gray;
            dividerRectangle.HorizontalAlignment = HorizontalAlignment.Stretch;

            // Create the object to contain the reflection.
            Rectangle reflectionRectangle = new Rectangle();

            // Bind the height of the rectangle to the border height.
            Binding heightBinding = new Binding();
            heightBinding.ElementName = "ReflectedVisual";
            heightBinding.Path = new PropertyPath(Rectangle.HeightProperty);
            BindingOperations.SetBinding(reflectionRectangle, Rectangle.HeightProperty, heightBinding);

            // Bind the width of the rectangle to the border width.
            Binding widthBinding = new Binding();
            widthBinding.ElementName = "ReflectedVisual";
            widthBinding.Path = new PropertyPath(Rectangle.WidthProperty);
            BindingOperations.SetBinding(reflectionRectangle, Rectangle.WidthProperty, widthBinding);

            // Creates the reflection.
            VisualBrush myVisualBrush = new VisualBrush();
            myVisualBrush.Opacity = 0.75;
            myVisualBrush.Stretch = Stretch.None;
            Binding reflectionBinding = new Binding();
            reflectionBinding.ElementName = "ReflectedVisual";
            BindingOperations.SetBinding(myVisualBrush, VisualBrush.VisualProperty, reflectionBinding);

            ScaleTransform myScaleTransform = new ScaleTransform();
            myScaleTransform.ScaleX = 1;
            myScaleTransform.ScaleY = -1;
            TranslateTransform myTranslateTransform = new TranslateTransform();
            myTranslateTransform.Y = 1;

            TransformGroup myTransformGroup = new TransformGroup();
            myTransformGroup.Children.Add(myScaleTransform);
            myTransformGroup.Children.Add(myTranslateTransform);

            myVisualBrush.RelativeTransform = myTransformGroup;

            reflectionRectangle.Fill = myVisualBrush;

            // Create a gradient background for the border.
            GradientStop firstStop2 = new GradientStop();
            firstStop2.Offset = 0.0;
            Color c1 = new Color();
            c1.R = 0;
            c1.G = 0;
            c1.B = 0;
            c1.A = 255;
            firstStop2.Color = c1;
            GradientStop secondStop2 = new GradientStop();
            secondStop2.Offset = 0.5;
            Color c2 = new Color();
            c2.R = 0;
            c2.G = 0;
            c2.B = 0;
            c2.A = 51;
            firstStop2.Color = c2;
            GradientStop thirdStop = new GradientStop();
            thirdStop.Offset = 0.75;
            Color c3 = new Color();
            c3.R = 0;
            c3.G = 0;
            c3.B = 0;
            c3.A = 0;
            thirdStop.Color = c3;

            GradientStopCollection myGradientStopCollection2 = new GradientStopCollection();
            myGradientStopCollection2.Add(firstStop2);
            myGradientStopCollection2.Add(secondStop2);
            myGradientStopCollection2.Add(thirdStop);

            LinearGradientBrush myLinearGradientBrush2 = new LinearGradientBrush();
            myLinearGradientBrush2.StartPoint = new Point(0.5, 0);
            myLinearGradientBrush2.EndPoint = new Point(0.5, 1);
            myLinearGradientBrush2.GradientStops = myGradientStopCollection2;

            reflectionRectangle.OpacityMask = myLinearGradientBrush2;

            BlurBitmapEffect myBlurBitmapEffect = new BlurBitmapEffect();
            myBlurBitmapEffect.Radius = 1.5;

            reflectionRectangle.BitmapEffect = myBlurBitmapEffect;

            myStackPanel.Children.Add(myReflectedBorder);
            myStackPanel.Children.Add(dividerRectangle);
            myStackPanel.Children.Add(reflectionRectangle);
            this.Content = myStackPanel;

        }
        /*
    <Rectangle 
      Height="{Binding Path=ActualHeight, ElementName=ReflectedVisual}" 
      Width="{Binding Path=ActualWidth, ElementName=ReflectedVisual}">

      <Rectangle.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <GradientStop Color="#FF000000" Offset="0.0" />
          <GradientStop Color="#33000000" Offset="0.5" />
          <GradientStop Color="#00000000" Offset="0.75" />
        </LinearGradientBrush>
      </Rectangle.OpacityMask>

      <Rectangle.BitmapEffect>
        <BlurBitmapEffect Radius="1.5" />
      </Rectangle.BitmapEffect>
      
    </Rectangle>
  </StackPanel>
</Page>

*/
        
    }
}

Imports System.Windows
Imports System.Windows.Data
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Effects
Imports System.Windows.Media.Imaging
Imports System.IO
Imports System.Collections.ObjectModel
Imports System.Windows.Shapes
Namespace SDKSample
    Partial Public Class ReflectionExample
        Inherits Page
        Public Sub New()
            ' Create a name scope for the page.
            NameScope.SetNameScope(Me, New NameScope())

            Me.Background = Brushes.Black
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(50)

            Dim myReflectedBorder As New Border()
            Me.RegisterName("ReflectedVisual", myReflectedBorder)

            ' Create a gradient background for the border.
            Dim firstStop As New GradientStop()
            firstStop.Offset = 0.0
            Dim firstStopColor As New Color()
            firstStopColor.R = 204
            firstStopColor.G = 204
            firstStopColor.B = 255
            firstStopColor.A = 255
            firstStop.Color = firstStopColor
            Dim secondStop As New GradientStop()
            secondStop.Offset = 1.0
            secondStop.Color = Colors.White

            Dim myGradientStopCollection As New GradientStopCollection()
            myGradientStopCollection.Add(firstStop)
            myGradientStopCollection.Add(secondStop)

            Dim myLinearGradientBrush As New LinearGradientBrush()
            myLinearGradientBrush.StartPoint = New Point(0, 0.5)
            myLinearGradientBrush.EndPoint = New Point(1, 0.5)
            myLinearGradientBrush.GradientStops = myGradientStopCollection

            myReflectedBorder.Background = myLinearGradientBrush

            ' Add contents to the border.
            Dim borderStackPanel As New StackPanel()
            borderStackPanel.Orientation = Orientation.Horizontal
            borderStackPanel.Margin = New Thickness(10)

            Dim myTextBlock As New TextBlock()
            myTextBlock.TextWrapping = TextWrapping.Wrap
            myTextBlock.Width = 200
            myTextBlock.Text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit." & " Suspendisse vel ante. Donec luctus tortor sit amet est." & " Nullam pulvinar odio et wisi." & " Pellentesque quis magna. Sed pellentesque." & " Nulla euismod." & "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."

            borderStackPanel.Children.Add(myTextBlock)

            Dim ellipseStackPanel As New StackPanel()

            Dim ellipse1 As New Ellipse()
            ellipse1.Margin = New Thickness(10)
            ellipse1.Height = 50
            ellipse1.Width = 50
            ellipse1.Fill = Brushes.Black
            ellipseStackPanel.Children.Add(ellipse1)
            Dim ellipse2 As New Ellipse()
            ellipse2.Margin = New Thickness(10)
            ellipse2.Height = 50
            ellipse2.Width = 50
            ellipse2.Fill = Brushes.Black
            ellipseStackPanel.Children.Add(ellipse2)
            Dim ellipse3 As New Ellipse()
            ellipse3.Margin = New Thickness(10)
            ellipse3.Height = 50
            ellipse3.Width = 50
            ellipse3.Fill = Brushes.Black
            ellipseStackPanel.Children.Add(ellipse3)
            borderStackPanel.Children.Add(ellipseStackPanel)

            myReflectedBorder.Child = borderStackPanel

            ' Create divider rectangle
            Dim dividerRectangle As New Rectangle()
            dividerRectangle.Height = 1
            dividerRectangle.Fill = Brushes.Gray
            dividerRectangle.HorizontalAlignment = HorizontalAlignment.Stretch

            ' Create the object to contain the reflection.
            Dim reflectionRectangle As New Rectangle()

            ' Bind the height of the rectangle to the border height.
            Dim heightBinding As New Binding()
            heightBinding.ElementName = "ReflectedVisual"
            heightBinding.Path = New PropertyPath(Rectangle.HeightProperty)
            BindingOperations.SetBinding(reflectionRectangle, Rectangle.HeightProperty, heightBinding)

            ' Bind the width of the rectangle to the border width.
            Dim widthBinding As New Binding()
            widthBinding.ElementName = "ReflectedVisual"
            widthBinding.Path = New PropertyPath(Rectangle.WidthProperty)
            BindingOperations.SetBinding(reflectionRectangle, Rectangle.WidthProperty, widthBinding)

            ' Creates the reflection.
            Dim myVisualBrush As New VisualBrush()
            myVisualBrush.Opacity = 0.75
            myVisualBrush.Stretch = Stretch.None
            Dim reflectionBinding As New Binding()
            reflectionBinding.ElementName = "ReflectedVisual"
            BindingOperations.SetBinding(myVisualBrush, VisualBrush.VisualProperty, reflectionBinding)

            Dim myScaleTransform As New ScaleTransform()
            myScaleTransform.ScaleX = 1
            myScaleTransform.ScaleY = -1
            Dim myTranslateTransform As New TranslateTransform()
            myTranslateTransform.Y = 1

            Dim myTransformGroup As New TransformGroup()
            myTransformGroup.Children.Add(myScaleTransform)
            myTransformGroup.Children.Add(myTranslateTransform)

            myVisualBrush.RelativeTransform = myTransformGroup

            reflectionRectangle.Fill = myVisualBrush

            ' Create a gradient background for the border.
            Dim firstStop2 As New GradientStop()
            firstStop2.Offset = 0.0
            Dim c1 As New Color()
            c1.R = 0
            c1.G = 0
            c1.B = 0
            c1.A = 255
            firstStop2.Color = c1
            Dim secondStop2 As New GradientStop()
            secondStop2.Offset = 0.5
            Dim c2 As New Color()
            c2.R = 0
            c2.G = 0
            c2.B = 0
            c2.A = 51
            firstStop2.Color = c2
            Dim thirdStop As New GradientStop()
            thirdStop.Offset = 0.75
            Dim c3 As New Color()
            c3.R = 0
            c3.G = 0
            c3.B = 0
            c3.A = 0
            thirdStop.Color = c3

            Dim myGradientStopCollection2 As New GradientStopCollection()
            myGradientStopCollection2.Add(firstStop2)
            myGradientStopCollection2.Add(secondStop2)
            myGradientStopCollection2.Add(thirdStop)

            Dim myLinearGradientBrush2 As New LinearGradientBrush()
            myLinearGradientBrush2.StartPoint = New Point(0.5, 0)
            myLinearGradientBrush2.EndPoint = New Point(0.5, 1)
            myLinearGradientBrush2.GradientStops = myGradientStopCollection2

            reflectionRectangle.OpacityMask = myLinearGradientBrush2

            Dim myBlurBitmapEffect As New BlurBitmapEffect()
            myBlurBitmapEffect.Radius = 1.5

            reflectionRectangle.BitmapEffect = myBlurBitmapEffect

            myStackPanel.Children.Add(myReflectedBorder)
            myStackPanel.Children.Add(dividerRectangle)
            myStackPanel.Children.Add(reflectionRectangle)
            Me.Content = myStackPanel

        End Sub
    End Class
End Namespace
<Page  
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Background="Black">


  <StackPanel Margin="50">

    <!-- The object to reflect. -->
    <Border Name="ReflectedVisual" Width="400">
      <Border.Background>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
          <GradientStop Offset="0.0" Color="#CCCCFF" />
          <GradientStop Offset="1.0" Color="White" />
        </LinearGradientBrush>
      </Border.Background>
      <StackPanel Orientation="Horizontal" Margin="10">        
        <TextBlock TextWrapping="Wrap" Width="200" Margin="10">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          Suspendisse vel ante. Donec luctus tortor sit amet est.
          Nullam pulvinar odio et wisi.
          Pellentesque quis magna. Sed pellentesque.
          Nulla euismod.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </TextBlock>
        <StackPanel>
          <Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
          <Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
          <Ellipse Margin="10" Height="50" Width="50" Fill="Black" />
        </StackPanel>
      </StackPanel>
    </Border>

    <Rectangle Height="1" Fill="Gray" HorizontalAlignment="Stretch" />

    <!-- The object to contain the reflection.-->
    <Rectangle 
      Height="{Binding Path=ActualHeight, ElementName=ReflectedVisual}" 
      Width="{Binding Path=ActualWidth, ElementName=ReflectedVisual}">
      <Rectangle.Fill>

        <!-- Creates the reflection. -->
        <VisualBrush 
          Opacity="0.75" Stretch="None"
          Visual="{Binding ElementName=ReflectedVisual}">
          <VisualBrush.RelativeTransform>

            <!-- Flip the reflection. -->
            <TransformGroup>
              <ScaleTransform ScaleX="1" ScaleY="-1" />
              <TranslateTransform  Y="1" />
            </TransformGroup>
          </VisualBrush.RelativeTransform>
        </VisualBrush>
      </Rectangle.Fill>

      <Rectangle.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
          <GradientStop Color="#FF000000" Offset="0.0" />
          <GradientStop Color="#33000000" Offset="0.5" />
          <GradientStop Color="#00000000" Offset="0.75" />
        </LinearGradientBrush>
      </Rectangle.OpacityMask>

      <Rectangle.BitmapEffect>
        <BlurBitmapEffect Radius="1.5" />
      </Rectangle.BitmapEffect>
      
    </Rectangle>
  </StackPanel>
</Page>

画面の一部を引き伸ばす方法と反射を作成する方法のその他の例については、「VisualBrush のサンプル」を参照してください。For additional examples that show how to magnify portions of the screen and how to create reflections, see the VisualBrush Sample.

TileBrush の機能TileBrush Features

ImageBrushDrawingBrush、およびVisualBrushは、オブジェクトTileBrushの型です。ImageBrush, DrawingBrush, and VisualBrush are types of TileBrush objects. TileBrushオブジェクトを使用すると、イメージ、描画、またはビジュアルを使用して領域を塗りつぶす方法を細かく制御できます。TileBrush objects provide you with a great deal of control over how an area is painted with an image, drawing, or visual. たとえば、単一のイメージを引き伸ばして領域を塗りつぶすだけではなく、一連のイメージ タイルでパターンを作って領域を塗りつぶすことができます。For example, instead of just painting an area with a single stretched image, you can paint an area with a series of image tiles that create a pattern.

TileBrushは、コンテンツ、タイル、および出力領域という3つの主要コンポーネントがあります。A TileBrush has three primary components: content, tiles, and the output area.

タイルブラシコンポーネントTileBrush components
1つのタイルを持つタイルブラシのコンポーネントComponents of a TileBrush with a single tile

タイル化したタイルブラシのコンポーネントComponents of a tiled TileBrush
複数のタイルを使用する TileBrush のコンポーネントComponents of a TileBrush with multiple tiles

オブジェクトのTileBrushタイル機能の詳細については、「タイルブラシの概要」を参照してください。For more information about the tiling features of TileBrush objects, see the TileBrush Overview.

関連項目See also