Condividi tramite

Come fare per impostare l'allineamento orizzontale e verticale di un TileBrush

In questo esempio viene illustrato come controllare l'allineamento orizzontale e verticale del contenuto in un riquadro. Per controllare l'allineamento orizzontale e verticale di un TileBrush, utilizzare le relative proprietà AlignmentX e AlignmentY.

Le proprietà AlignmentX e AlignmentY di un TileBrush vengono utilizzate quando viene soddisfatta una delle condizioni seguenti:

Allinea TileBrush all'angolo superiore sinistro

Nell'esempio seguente, il contenuto di un DrawingBrush, che è un tipo di TileBrush, viene allineato all'angolo superiore sinistro del suo riquadro. Per allineare il contenuto, nell'esempio viene impostata la proprietà AlignmentX del DrawingBrush su Left e la proprietà AlignmentY su Top. In questo esempio viene generato l'output seguente.

un oggetto TileBrush con allineamento in alto a sinistra
TileBrush con contenuto allineato all'angolo superiore sinistro

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

Allineare DrawingBrush all'angolo inferiore destro

Nell'esempio seguente il contenuto di un DrawingBrush viene allineato all'angolo inferiore destro del riquadro impostando la proprietà AlignmentX su Right e la proprietà AlignmentY su Bottom. L'esempio produce l'output seguente.

un oggetto TileBrush con allineamento in basso a destra
TileBrush con contenuto allineato all'angolo inferiore destro

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

Allineare il pennello di disegno all'angolo superiore sinistro

Nell'esempio seguente, il contenuto di un DrawingBrush viene allineato all'angolo in alto a sinistra della sua piastrella impostando la proprietà AlignmentX su Left e la proprietà AlignmentY su Top. Imposta anche il Viewport e l'TileMode del DrawingBrush per produrre un motivo a piastrelle. L'esempio produce l'output seguente.

Un TileBrush piastrellato con allineamento in alto a sinistra
Motivo piastrella con contenuto allineato in alto a sinistra nella piastrella di base

L'illustrazione evidenzia la piastrella di base in modo che sia possibile vedere come il suo contenuto è allineato. Si noti che l'impostazione AlignmentX non ha alcun effetto perché il contenuto del DrawingBrush riempie completamente il riquadro di base orizzontalmente.

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

Allinea il DrawingBrush piastrellato all'angolo inferiore destro

L'esempio finale allinea il contenuto di un DrawingBrush alla piastrella di base in basso a destra, impostando le proprietà AlignmentX su Right e AlignmentY su Bottom. L'esempio produce l'output seguente.

Un TileBrush piastrellato con allineamento in basso a destra
Motivo riquadro con contenuto allineato nell'angolo inferiore destro del riquadro base

Anche in questo caso, l'impostazione AlignmentX non ha alcun effetto perché il contenuto della DrawingBrush riempie completamente il riquadro di base orizzontalmente.

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

Gli esempi usano oggetti DrawingBrush per illustrare come vengono usate le proprietà AlignmentX e AlignmentY. Queste proprietà si comportano in modo identico per tutti i pennelli per riquadri: DrawingBrush, ImageBrushe VisualBrush. Per ulteriori informazioni sui pennelli per piastrelle, consultare Disegnare con immagini, disegni e oggetti visivi.

Vedere anche