Condividi tramite


Cenni preliminari sui pennelli di WPF

Aggiornamento: novembre 2007

Tutti gli elementi visibili sullo schermo possono essere visualizzati poiché sono stati disegnati con un pennello. Ad esempio, un pennello viene utilizzato per descrivere lo sfondo di un pulsante, il primo piano di un testo e il riempimento di una forma. In questo argomento vengono presentati i concetti di disegno con i pennelli di Windows Presentation Foundation (WPF) e illustrati alcuni esempi. I pennelli consentono di disegnare oggetti dell'interfaccia utente utilizzando colori semplici e a tinta unita, ma anche set complessi di modelli e immagini.

Disegno con un pennello

Brush "disegna" un'area con un output specifico. Tipi differenti di pennelli generano tipi di output diversi. Alcuni pennelli disegnano un'area con un colore a tinta unita, altri con una sfumatura, un modello, un'immagine o un disegno. Nell'immagine riportata di seguito vengono illustrati esempi di tutti i diversi tipi di Brush.

Esempi di pennello

Tipi di pennello

La maggior parte degli oggetti visivi consente di specificare il modo in cui vengono disegnati. Nella tabella riportata di seguito vengono elencati alcuni oggetti e proprietà comuni con cui è possibile utilizzare un oggetto Brush.

Classe

Proprietà del pennello

Border

BorderBrush, Background

Control

Background, Foreground

Panel

Background

Pen

Brush

Shape

Fill, Stroke

TextBlock

Background

Nella sezione riportata di seguito vengono descritti i vari tipi di Brush e viene fornito un esempio per ciascuno di essi.

Disegnare con un oggetto Color a tinta unita

SolidColorBrush disegna un'area con un oggetto Color a tinta unita. Sono disponibili molti modi per specificare l'oggetto Color di un oggetto SolidColorBrush: ad esempio, è possibile specificare i canali alfa, rosso, blu e verde oppure utilizzare uno dei colori predefiniti forniti dalla classe Colors.

Nell'esempio seguente viene utilizzato un oggetto SolidColorBrush per disegnare l'oggetto Fill di Rectangle. Nell'immagine riportata di seguito viene illustrato il rettangolo disegnato.

Rettangolo disegnato con un oggetto SolidColorBrush

Rettangolo disegnato utilizzando SolidColorBrush

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a SolidColorBrush and use it to
// paint the rectangle.
SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <SolidColorBrush Color="Red" />
  </Rectangle.Fill>
</Rectangle>

Per ulteriori informazioni sulla classe SolidColorBrush, vedere Cenni sul disegno con colori a tinta unita e sfumature.

Disegnare con una sfumatura lineare

LinearGradientBrush disegna un'area con una sfumatura lineare. Una sfumatura lineare consente di fondere due o più colori lungo una linea definita asse di sfumatura. Per specificare i colori della sfumatura e le relative posizioni, utilizzare gli oggetti GradientStop.

Nell'esempio seguente viene utilizzato LinearGradientBrush per disegnare l'oggetto Fill di Rectangle. Nell'immagine riportata di seguito viene illustrato il rettangolo disegnato.

Rettangolo disegnato con un oggetto LinearGradientBrush

Rettangolo disegnato utilizzando LinearGradientBrush

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a LinearGradientBrush and use it to
// paint the rectangle.
LinearGradientBrush myBrush = new LinearGradientBrush();
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <LinearGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Per ulteriori informazioni sulla classe LinearGradientBrush, vedere Cenni sul disegno con colori a tinta unita e sfumature.

Disegnare con una sfumatura radiale

RadialGradientBrush disegna un'area con una sfumatura radiale. Una sfumatura radiale consente di fondere due o più colori in un cerchio. Come per la classe LinearGradientBrush, per specificare i colori della sfumatura e le relative posizioni, utilizzare GradientStop.

Nell'esempio seguente viene utilizzato RadialGradientBrush per disegnare l'oggetto Fill di un oggetto Rectangle. Nell'immagine riportata di seguito viene illustrato il rettangolo disegnato.

Rettangolo disegnato con un oggetto RadialGradientBrush

Rettangolo disegnato utilizzando RadialGradientBrush

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a RadialGradientBrush and use it to
// paint the rectangle.
RadialGradientBrush myBrush = new RadialGradientBrush();
myBrush.GradientOrigin = new Point(0.75, 0.25);
myBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myBrush.GradientStops.Add(new GradientStop(Colors.Orange, 0.5));
myBrush.GradientStops.Add(new GradientStop(Colors.Red, 1.0));

exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <RadialGradientBrush GradientOrigin="0.75,0.25">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Orange" Offset="0.5" />
      <GradientStop Color="Red" Offset="1.0" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Per ulteriori informazioni sulla classe RadialGradientBrush, vedere Cenni sul disegno con colori a tinta unita e sfumature.

Disegnare con un oggetto Image

ImageBrush disegna un'area con un oggetto ImageSource.

Nell'esempio seguente viene utilizzato un oggetto ImageBrush per disegnare l'oggetto Fill di un oggetto Rectangle. Nell'immagine riportata di seguito viene mostrato il rettangolo disegnato.

Rettangolo disegnato con un oggetto Image

Rettangolo disegnato utilizzando ImageBrush

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create an ImageBrush and use it to
// paint the rectangle.
ImageBrush myBrush = new ImageBrush();
myBrush.ImageSource = 
    new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg"  />
  </Rectangle.Fill>
</Rectangle>

Per ulteriori informazioni sulla classe ImageBrush, vedere Disegnare con oggetti Image, Drawing e Visual.

Disegnare con un oggetto Drawing

DrawingBrush disegna un'area con un oggetto Drawing. Drawing può contenere forme, immagini, testi e contenuti multimediali.

Nell'esempio seguente viene utilizzato DrawingBrush per disegnare l'oggetto Fill di un oggetto Rectangle. Nell'immagine riportata di seguito viene mostrato il rettangolo disegnato.

Rettangolo disegnato con un oggetto DrawingBrush

Rettangolo disegnato utilizzando DrawingBrush

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a DrawingBrush and use it to
// paint the rectangle.
DrawingBrush myBrush = new DrawingBrush();

GeometryDrawing backgroundSquare =
    new GeometryDrawing(
        Brushes.White,
        null,
        new RectangleGeometry(new Rect(0, 0, 100, 100)));

GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));

LinearGradientBrush checkerBrush = new LinearGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.Black, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.Gray, 1.0));

GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);

DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);

myBrush.Drawing = checkersDrawingGroup;
myBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
myBrush.TileMode = TileMode.Tile;

exampleRectangle.Fill = myBrush;
<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
      <DrawingBrush.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="White">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,100,100" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

          <GeometryDrawing>
            <GeometryDrawing.Geometry>
              <GeometryGroup>
                <RectangleGeometry Rect="0,0,50,50" />
                <RectangleGeometry Rect="50,50,50,50" />
              </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Brush>
              <LinearGradientBrush>
                <GradientStop Offset="0.0" Color="Black" />
                <GradientStop Offset="1.0" Color="Gray" />
              </LinearGradientBrush>
            </GeometryDrawing.Brush>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Rectangle.Fill>
</Rectangle>

Per ulteriori informazioni sulla classe DrawingBrush, vedere Disegnare con oggetti Image, Drawing e Visual.

Disegnare con un oggetto Visual

VisualBrush disegna un'area con Visual. Button, Page e MediaElement rappresentano esempi di oggetti Visual. VisualBrush consente inoltre di proiettare il contenuto da una parte dell'applicazione in un'altra area; questa funzione è molto utile per la creazione di effetti reflection e per l'ingrandimento di parti dello schermo.

Nell'esempio seguente viene utilizzato VisualBrush per disegnare l'oggetto Fill di un oggetto Rectangle. Nell'immagine riportata di seguito viene illustrato il rettangolo disegnato.

Rettangolo disegnato con un oggetto VisualBrush

Rettangolo disegnato utilizzando VisualBrush

Rectangle exampleRectangle = new Rectangle();
exampleRectangle.Width = 75;
exampleRectangle.Height = 75;

// Create a VisualBrush and use it
// to paint the rectangle.
VisualBrush myBrush = new VisualBrush();

//
// Create the brush's contents.
//
StackPanel aPanel = new StackPanel();

// Create a DrawingBrush and use it to
// paint the panel.
DrawingBrush myDrawingBrushBrush = new DrawingBrush();
GeometryGroup aGeometryGroup = new GeometryGroup();
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(0, 0, 50, 50)));
aGeometryGroup.Children.Add(new RectangleGeometry(new Rect(50, 50, 50, 50)));
RadialGradientBrush checkerBrush = new RadialGradientBrush();
checkerBrush.GradientStops.Add(new GradientStop(Colors.MediumBlue, 0.0));
checkerBrush.GradientStops.Add(new GradientStop(Colors.White, 1.0));
GeometryDrawing checkers = new GeometryDrawing(checkerBrush, null, aGeometryGroup);
myDrawingBrushBrush.Drawing = checkers;
aPanel.Background = myDrawingBrushBrush;

// Create some text.
TextBlock someText = new TextBlock();
someText.Text = "Hello, World";
FontSizeConverter fSizeConverter = new FontSizeConverter();
someText.FontSize = (double)fSizeConverter.ConvertFromString("10pt");
someText.Margin = new Thickness(10);

aPanel.Children.Add(someText);

myBrush.Visual = aPanel;
exampleRectangle.Fill = myBrush;

<Rectangle Width="75" Height="75">
  <Rectangle.Fill>
    <VisualBrush TileMode="Tile">
      <VisualBrush.Visual>
        <StackPanel>
          <StackPanel.Background>
            <DrawingBrush>
              <DrawingBrush.Drawing>
                <GeometryDrawing>
                  <GeometryDrawing.Brush>
                    <RadialGradientBrush>
                      <GradientStop Color="MediumBlue" Offset="0.0" />
                      <GradientStop Color="White" Offset="1.0" />
                    </RadialGradientBrush>
                  </GeometryDrawing.Brush>
                  <GeometryDrawing.Geometry>
                    <GeometryGroup>
                      <RectangleGeometry Rect="0,0,50,50" />
                      <RectangleGeometry Rect="50,50,50,50" />
                    </GeometryGroup>
                  </GeometryDrawing.Geometry>
                </GeometryDrawing>
              </DrawingBrush.Drawing>
            </DrawingBrush>
          </StackPanel.Background>
          <TextBlock FontSize="10pt" Margin="10">Hello, World!</TextBlock>
        </StackPanel>
      </VisualBrush.Visual>
    </VisualBrush>
  </Rectangle.Fill>
</Rectangle>

Per ulteriori informazioni sulla classe VisualBrush, vedere Disegnare con oggetti Image, Drawing e Visual.

Disegnare utilizzando pennelli predefiniti e di sistema

Per motivi di praticità, in Windows Presentation Foundation (WPF) viene fornito un set di pennelli predefiniti e di sistema che può essere utilizzato per disegnare oggetti.

Funzionalità comuni dei pennelli

Gli oggetti Brush forniscono una proprietà Opacity che può essere utilizzata per rendere trasparente un pennello, in modo completo oppure parziale. Un valore Opacity pari a 0 rende un pennello completamente trasparente, mentre un valore Opacity pari a 1 lo rende completamente opaco. Nell'esempio seguente viene utilizzata la proprietà Opacity per rendere l'oggetto opaco al 25% SolidColorBrush.

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <SolidColorBrush Color="Blue" Opacity="0.25" />
  </Rectangle.Fill>
</Rectangle>
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 100;
myRectangle.Height = 100;
SolidColorBrush partiallyTransparentSolidColorBrush
    = new SolidColorBrush(Colors.Blue);
partiallyTransparentSolidColorBrush.Opacity = 0.25;
myRectangle.Fill = partiallyTransparentSolidColorBrush;

Se il pennello contiene colori parzialmente trasparenti, il valore di opacità del colore viene combinato, tramite moltiplicazione, al valore di opacità del pennello. Ad esempio, se un pennello dispone di un valore di opacità pari a 0,5 e anche un colore utilizzato dal pennello dispone dello stesso valore, il colore di output avrà un valore di opacità pari a 0,25.

Nota

È più efficiente modificare il valore di opacità di un pennello anziché cambiare l'opacità di un elemento intero utilizzando la proprietà UIElement.Opacity.

È possibile ruotare, ridimensionare, inclinare e traslare il contenuto di un pennello utilizzando la rela tiva proprietà Transform o RelativeTransform. Per ulteriori informazioni, vedere Cenni preliminari sulle proprietà di trasformazione Brush.

Poiché si tratta di oggetti Animatable, è possibile aggiungere un'animazione agli oggetti Brush. Per ulteriori informazioni, vedere Cenni preliminari sull'animazione.

Funzionalità dell'oggetto Freezable

Poiché eredita dalla classe Freezable, la classe Brush fornisce diverse funzionalità speciali: gli oggetti Brush possono essere dichiarati come risorse, condivisi tra più oggetti e clonati. Inoltre, tutti i tipi di oggetti Brush, eccetto VisualBrush possono essere resi di sola lettura (per migliorare le prestazioni) e thread-safe.

Per ulteriori informazioni sulle diverse funzionalità fornite dagli oggetti Freezable, vedere Cenni preliminari sugli oggetti Freezable.

Per ulteriori informazioni sul motivo per cui gli oggetti VisualBrush non possono essere bloccati, vedere la pagina relativa al tipo VisualBrush.

Vedere anche

Attività

Esempio Brush

Esempio ImageBrush

Esempio di DrawingBrush

Esempio VisualBrush

Concetti

Cenni sul disegno con colori a tinta unita e sfumature

Disegnare con oggetti Image, Drawing e Visual

Cenni preliminari sugli oggetti Freezable

Ottimizzazione delle prestazioni: altri suggerimenti

Riferimenti

Brush

Brushes

Altre risorse

Procedure relative ai pennelli