如何:设置 TileBrush 的水平对齐方式和垂直对齐方式

本示例演示如何控制图块内容的水平对齐方式和垂直对齐方式。 若要控制 TileBrush 的水平对齐方式和垂直对齐方式,请使用其 AlignmentXAlignmentY 属性。

当满足以下任一条件时将使用 TileBrushAlignmentXAlignmentY 属性:

示例

下面的示例将类型为 TileBrushDrawingBrush 的内容与其图块的左上角对齐。 为了对齐内容,此示例将 DrawingBrushAlignmentX 属性设置为 Left,将 AlignmentY 属性设置为 Top。 该示例产生下面的输出。

内容与左上角对齐的 TileBrush

左上角对齐的 TileBrush

            '
            ' Create a TileBrush and align its
            ' content to the top-left of its tile.
            '
            Dim topLeftAlignedTileBrush As New DrawingBrush()
            topLeftAlignedTileBrush.AlignmentX = AlignmentX.Left
            topLeftAlignedTileBrush.AlignmentY = AlignmentY.Top

            ' Set Stretch to None so that the brush's
            ' content doesn't automatically expand to
            ' fill the entire tile. 
            topLeftAlignedTileBrush.Stretch = Stretch.None

            ' Define the brush's content.
            Dim ellipses As New GeometryGroup()
            ellipses.Children.Add(New EllipseGeometry(New Point(50, 50), 20, 45))
            ellipses.Children.Add(New EllipseGeometry(New Point(50, 50), 45, 20))
            Dim drawingPen As New Pen(Brushes.Gray, 10)
            Dim ellipseDrawing As New GeometryDrawing(Brushes.Blue, drawingPen, ellipses)
            topLeftAlignedTileBrush.Drawing = ellipseDrawing

            ' Use the brush to paint a rectangle.
            Dim rectangle1 As New Rectangle()
            With rectangle1
                .Width = 150
                .Height = 150
                .Stroke = Brushes.Red
                .StrokeThickness = 2
                .Margin = New Thickness(20)
                .Fill = topLeftAlignedTileBrush
            End With

            //
            // Create a TileBrush and align its
            // content to the top-left of its tile.
            //
            DrawingBrush topLeftAlignedTileBrush = new DrawingBrush();
            topLeftAlignedTileBrush.AlignmentX = AlignmentX.Left;
            topLeftAlignedTileBrush.AlignmentY = AlignmentY.Top;

            // Set Stretch to None so that the brush's
            // content doesn't automatically expand to
            // fill the entire tile. 
            topLeftAlignedTileBrush.Stretch = Stretch.None;

            // Define the brush's content.
            GeometryGroup ellipses = new GeometryGroup();
            ellipses.Children.Add(new EllipseGeometry(new Point(50, 50), 20, 45));
            ellipses.Children.Add(new EllipseGeometry(new Point(50, 50), 45, 20));
            Pen drawingPen = new Pen(Brushes.Gray, 10);
            GeometryDrawing ellipseDrawing = new GeometryDrawing(Brushes.Blue, drawingPen, ellipses);
            topLeftAlignedTileBrush.Drawing = ellipseDrawing;

            // Use the brush to paint a rectangle.
            Rectangle rectangle1 = new Rectangle();
            rectangle1.Width = 150;
            rectangle1.Height = 150;
            rectangle1.Stroke = Brushes.Red;
            rectangle1.StrokeThickness = 2;
            rectangle1.Margin = new Thickness(20);
            rectangle1.Fill = topLeftAlignedTileBrush;

<Rectangle
  Width="150" Height="150"
  Stroke="Red" StrokeThickness="2"
  Margin="20">
  <Rectangle.Fill>

    <!-- This brush's content is aligned to the top-left
         of its tile. -->
    <DrawingBrush  
      Stretch="None"
      AlignmentX="Left"
      AlignmentY="Top">
      <DrawingBrush.Drawing>
        <GeometryDrawing Brush="MediumBlue">
          <GeometryDrawing.Geometry>
            <GeometryGroup>
              <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" />
              <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" />
            </GeometryGroup>
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Brush="Gray" Thickness="10" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

下一个示例通过将 AlignmentX 属性设置为 Right,将 AlignmentY 属性设置为 Bottom,将 DrawingBrush 的内容与其图块的右下角对齐。 该示例产生下面的输出。

内容与右下角对齐的 TileBrush

右下角对齐的 TileBrush

            '
            ' Create a TileBrush and align its
            ' content to the bottom-right of its tile.
            '
            Dim bottomRightAlignedTileBrush As New DrawingBrush()
            With bottomRightAlignedTileBrush
                .AlignmentX = AlignmentX.Right
                .AlignmentY = AlignmentY.Bottom
                .Stretch = Stretch.None

                ' Define the brush's content.
                .Drawing = ellipseDrawing
            End With

            ' Use the brush to paint a rectangle.
            Dim rectangle2 As New Rectangle()
            With rectangle2
                .Width = 150
                .Height = 150
                .Stroke = Brushes.Red
                .StrokeThickness = 2
                .Margin = New Thickness(20)
                .Fill = bottomRightAlignedTileBrush
            End With

            //
            // Create a TileBrush and align its
            // content to the bottom-right of its tile.
            //
            DrawingBrush bottomRightAlignedTileBrush = new DrawingBrush();
            bottomRightAlignedTileBrush.AlignmentX = AlignmentX.Right;
            bottomRightAlignedTileBrush.AlignmentY = AlignmentY.Bottom;
            bottomRightAlignedTileBrush.Stretch = Stretch.None;

            // Define the brush's content.
            bottomRightAlignedTileBrush.Drawing = ellipseDrawing;

            // Use the brush to paint a rectangle.
            Rectangle rectangle2 = new Rectangle();
            rectangle2.Width = 150;
            rectangle2.Height = 150;
            rectangle2.Stroke = Brushes.Red;
            rectangle2.StrokeThickness = 2;
            rectangle2.Margin = new Thickness(20);
            rectangle2.Fill = bottomRightAlignedTileBrush;

<Rectangle
  Width="150" Height="150"
  Stroke="Red" StrokeThickness="2"
  Margin="20">
  <Rectangle.Fill>

    <!-- This brush's content is aligned to the bottom right
         of its tile. -->
    <DrawingBrush 
      Stretch="None"
      AlignmentX="Right"
      AlignmentY="Bottom">
      <DrawingBrush.Drawing>
        <GeometryDrawing Brush="MediumBlue">
          <GeometryDrawing.Geometry>
            <GeometryGroup>
              <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" />
              <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" />
            </GeometryGroup>
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Brush="Gray" Thickness="10" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

下一个示例通过将 AlignmentX 属性设置为 Left,将 AlignmentY 属性设置为 Top,将 DrawingBrush 的内容与其图块的左上角对齐。 它还设置了 DrawingBrushViewportTileMode以生成图块图案。 该示例产生下面的输出。

内容与基本图块的左上角对齐的图块图案

左上角对齐的平铺 TileBrush

上图突出显示了基本图块,以便显示其内容的对齐方式。 请注意,AlignmentX 设置不起作用,因为 DrawingBrush 的内容完全水平填充了基本图块。

            '
            ' Create a TileBrush that generates a 
            ' tiled pattern and align its
            ' content to the top-left of its tile.
            '
            Dim tiledTopLeftAlignedTileBrush As New DrawingBrush()
            With tiledTopLeftAlignedTileBrush
                .AlignmentX = AlignmentX.Left
                .AlignmentY = AlignmentY.Top
                .Stretch = Stretch.Uniform

                ' Set the brush's Viewport and TileMode to produce a 
                ' tiled pattern.
                .Viewport = New Rect(0, 0, 0.25, 0.5)
                .TileMode = TileMode.Tile

                ' Define the brush's content.
                .Drawing = ellipseDrawing
            End With

            ' Use the brush to paint a rectangle.
            Dim rectangle3 As New Rectangle()
            With rectangle3
                .Width = 150
                .Height = 150
                .Stroke = Brushes.Black
                .StrokeThickness = 2
                .Margin = New Thickness(20)
                .Fill = tiledTopLeftAlignedTileBrush
            End With

            //
            // Create a TileBrush that generates a 
            // tiled pattern and align its
            // content to the top-left of its tile.
            //
            DrawingBrush tiledTopLeftAlignedTileBrush = new DrawingBrush();
            tiledTopLeftAlignedTileBrush.AlignmentX = AlignmentX.Left;
            tiledTopLeftAlignedTileBrush.AlignmentY = AlignmentY.Top;
            tiledTopLeftAlignedTileBrush.Stretch = Stretch.Uniform;

            // Set the brush's Viewport and TileMode to produce a 
            // tiled pattern.
            tiledTopLeftAlignedTileBrush.Viewport = new Rect(0, 0, 0.25, 0.5);
            tiledTopLeftAlignedTileBrush.TileMode = TileMode.Tile;

            // Define the brush's content.
            tiledTopLeftAlignedTileBrush.Drawing = ellipseDrawing;

            // Use the brush to paint a rectangle.
            Rectangle rectangle3 = new Rectangle();
            rectangle3.Width = 150;
            rectangle3.Height = 150;
            rectangle3.Stroke = Brushes.Black;
            rectangle3.StrokeThickness = 2;
            rectangle3.Margin = new Thickness(20);
            rectangle3.Fill = tiledTopLeftAlignedTileBrush;

<Rectangle
 Width="150" Height="150"
 Stroke="Black" StrokeThickness="2"
 Margin="20">
  <Rectangle.Fill>

    <!-- This brush's content is aligned to the top left
         of its tile.  -->
    <DrawingBrush 
      Stretch="Uniform"
      Viewport="0,0,0.25,0.5"
      TileMode="Tile" 
      AlignmentX="Left"
      AlignmentY="Top">
      <DrawingBrush.Drawing>
        <GeometryDrawing Brush="MediumBlue">
          <GeometryDrawing.Geometry>
            <GeometryGroup>
              <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" />
              <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" />
            </GeometryGroup>
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Brush="Gray" Thickness="10" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

最后一个示例通过将 AlignmentX 属性设置为 Right,将 AlignmentY 属性设置为 Bottom,将已图块的 DrawingBrush 的内容与其基本图块的右下角对齐。 该示例产生下面的输出。

内容与基本图块的右下角对齐的图块图案

右下角对齐的平铺 TileBrush

同样,AlignmentX 设置不起作用,因为 DrawingBrush 的内容完全水平填充了基本图块。

            '
            ' Create a TileBrush and align its
            ' content to the bottom-right of its tile.
            '
            Dim bottomRightAlignedTileBrush As New DrawingBrush()
            With bottomRightAlignedTileBrush
                .AlignmentX = AlignmentX.Right
                .AlignmentY = AlignmentY.Bottom
                .Stretch = Stretch.None

                ' Define the brush's content.
                .Drawing = ellipseDrawing
            End With

            ' Use the brush to paint a rectangle.
            Dim rectangle2 As New Rectangle()
            With rectangle2
                .Width = 150
                .Height = 150
                .Stroke = Brushes.Red
                .StrokeThickness = 2
                .Margin = New Thickness(20)
                .Fill = bottomRightAlignedTileBrush
            End With

            //
            // Create a TileBrush and align its
            // content to the bottom-right of its tile.
            //
            DrawingBrush bottomRightAlignedTileBrush = new DrawingBrush();
            bottomRightAlignedTileBrush.AlignmentX = AlignmentX.Right;
            bottomRightAlignedTileBrush.AlignmentY = AlignmentY.Bottom;
            bottomRightAlignedTileBrush.Stretch = Stretch.None;

            // Define the brush's content.
            bottomRightAlignedTileBrush.Drawing = ellipseDrawing;

            // Use the brush to paint a rectangle.
            Rectangle rectangle2 = new Rectangle();
            rectangle2.Width = 150;
            rectangle2.Height = 150;
            rectangle2.Stroke = Brushes.Red;
            rectangle2.StrokeThickness = 2;
            rectangle2.Margin = new Thickness(20);
            rectangle2.Fill = bottomRightAlignedTileBrush;

<Rectangle
  Width="150" Height="150"
  Stroke="Red" StrokeThickness="2"
  Margin="20">
  <Rectangle.Fill>

    <!-- This brush's content is aligned to the bottom right
         of its tile. -->
    <DrawingBrush 
      Stretch="None"
      AlignmentX="Right"
      AlignmentY="Bottom">
      <DrawingBrush.Drawing>
        <GeometryDrawing Brush="MediumBlue">
          <GeometryDrawing.Geometry>
            <GeometryGroup>
              <EllipseGeometry RadiusX="20" RadiusY="45" Center="50,50" />
              <EllipseGeometry RadiusX="45" RadiusY="20" Center="50,50" />
            </GeometryGroup>
          </GeometryDrawing.Geometry>
          <GeometryDrawing.Pen>
            <Pen Brush="Gray" Thickness="10" />
          </GeometryDrawing.Pen>
        </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

这些示例使用 DrawingBrush 对象演示如何使用 AlignmentXAlignmentY 属性。 这些属性的行为对于所有图块画笔都相同:DrawingBrushImageBrushVisualBrush。 有关图块画笔的更多信息,请参见使用图像、绘图和 Visual 进行绘制

请参见

参考

DrawingBrush

ImageBrush

VisualBrush

概念

使用图像、绘图和 Visual 进行绘制