次の方法で共有

方法: TileBrush の水平方向と垂直方向の配置を設定する

  • [アーティクル]

この例では、タイル内のコンテンツの水平方向と垂直方向の配置を制御する方法を示します。 TileBrushの水平方向と垂直方向の配置を制御するには、その AlignmentX プロパティと AlignmentY プロパティを使用します。

TileBrush の AlignmentX プロパティと AlignmentY プロパティは、次のいずれかの条件に該当する場合に使用されます。

TileBrush を左上隅に配置する

次の例では、TileBrushの種類である DrawingBrushのコンテンツをタイルの左上隅に配置します。 この例では、コンテンツを配置するために、DrawingBrush の AlignmentX プロパティを Left に設定し、AlignmentY プロパティを Topに設定します。 この例では、次の出力が生成されます。

左上の配置graphicsmm_TileBrushAlignmentExampleTopLeft を使用して TileBrush を する
内容が左上隅に配置された TileBrush

//
// 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;


'
' 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


<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>

DrawingBrush を右下隅に揃える

次の例では、DrawingBrush のコンテンツをタイルの右下隅に配置します。AlignmentX プロパティを Right に、AlignmentY プロパティを Bottomに設定します。 この例では、次の出力が生成されます。

TileBrushを右下に配置された TileBrushを使用する。
右下隅にコンテンツが配置されたTileBrush

//
// 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;


'
' 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


<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 を左上隅に揃える

次の例では、AlignmentX プロパティを Left に設定し、AlignmentY プロパティを Topに設定して、DrawingBrush のコンテンツをタイルの左上隅に配置します。 また、タイル パターンを生成する DrawingBrush の Viewport と TileMode も設定します。 この例では、次の出力が生成されます。

左上に並べて配置された TileBrush
基本タイルの左上に内容が配置されたタイル パターン

この図では、abase タイルが強調表示されているため、コンテンツがどのように配置されているかを確認できます。 DrawingBrush の内容が基本タイルを水平方向に完全に塗りつぶしているため、AlignmentX 設定には影響がないことに注意してください。

//
// 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;


'
' 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


<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>

並べて表示された DrawingBrush を右下隅に配置する

最後の例では、AlignmentX プロパティを Right に設定し、AlignmentY プロパティを Bottomに設定して、タイル化された DrawingBrush の内容を基本タイルの右下に配置します。 この例では、次の出力が生成されます。

右下に並べて配置された TileBrush
基本タイルの右上に内容が配置されたタイル パターン

ここでも、AlignmentX の設定は、DrawingBrush の内容が基本タイルを水平方向に完全に塗りつぶしているため、効果はありません。

//
// 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;


'
' 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


<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 オブジェクトを使用して、AlignmentX プロパティと AlignmentY プロパティの使用方法を示します。 これらのプロパティは、すべてのタイル ブラシ (DrawingBrush、ImageBrush、VisualBrush) で同じように動作します。 タイル ブラシに関する詳細は、「イメージ、描画、ビジュアルを使用したペインティング」をご覧ください。

関連項目