Partilhar via


Como preservar a proporção de uma imagem usada como plano de fundo

Este exemplo mostra como usar a propriedade Stretch de um ImageBrush para preservar a proporção da imagem.

Por padrão, quando você usa um ImageBrush para pintar uma área, seu conteúdo se estende para preencher completamente a área de saída. Quando a área de saída e a imagem têm proporções diferentes, a imagem é distorcida por esse alongamento.

Para fazer um ImageBrush preservar a proporção de sua imagem, defina a propriedade Stretch como Uniform ou UniformToFill.

Exemplo

O exemplo a seguir usa dois objetos ImageBrush para pintar dois retângulos. Cada retângulo tem 300 por 150 pixels e cada um contém uma imagem de 300 por 300 pixels. A propriedade Stretch do primeiro pincel é definida como Uniforme a propriedade Stretch do segundo pincel é definida como UniformToFill.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Windows.Media;
using System.Windows.Shapes;

namespace Microsoft.Samples.Graphics.UsingImageBrush
{
    /// <summary>
    /// Demonstrates different ImageBrush Stretch settings.
    /// </summary>
    public class StretchModes : Page
    {
        public StretchModes()
        {

            // Create an ImageBrush with its Stretch
            // property set to Uniform. The image it
            // contains will be expanded as much as possible
            // to fill the output area while still
            // preserving its aspect ratio.
            ImageBrush uniformBrush = new ImageBrush();
            uniformBrush.ImageSource =
                new BitmapImage(new Uri("sampleImages\\square.jpg", UriKind.Relative));
            uniformBrush.Stretch = Stretch.Uniform;

            // Freeze the brush (make it unmodifiable) for performance benefits.
            uniformBrush.Freeze();

            // Create a rectangle and paint it with the ImageBrush.
            Rectangle rectangle1 = new Rectangle();
            rectangle1.Width = 300;
            rectangle1.Height = 150;
            rectangle1.Stroke = Brushes.MediumBlue;
            rectangle1.StrokeThickness = 1.0;
            rectangle1.Fill = uniformBrush;

            // Create an ImageBrush with its Stretch
            // property set to UniformToFill. The image it
            // contains will be expanded to completely fill
            // the rectangle, but its aspect ratio is preserved.
            ImageBrush uniformToFillBrush = new ImageBrush();
            uniformToFillBrush.ImageSource =
                new BitmapImage(new Uri("sampleImages\\square.jpg", UriKind.Relative));
            uniformToFillBrush.Stretch = Stretch.UniformToFill;

            // Freeze the brush (make it unmodifiable) for performance benefits.
            uniformToFillBrush.Freeze();

            // Create a rectangle and paint it with the ImageBrush.
            Rectangle rectangle2 = new Rectangle();
            rectangle2.Width = 300;
            rectangle2.Height = 150;
            rectangle2.Stroke = Brushes.MediumBlue;
            rectangle2.StrokeThickness = 1.0;
            rectangle2.Margin = new Thickness(0, 10, 0, 0);
            rectangle2.Fill = uniformToFillBrush;

            StackPanel mainPanel = new StackPanel();
            mainPanel.Children.Add(rectangle1);
            mainPanel.Children.Add(rectangle2);

            Content = mainPanel;
            Background = Brushes.White;
            Margin = new Thickness(20);
            Title = "ImageBrush Stretch Modes";
        }
    }
}

A ilustração seguinte mostra a saída do primeiro pincel, que tem a configuração Stretch igual a Uniform.

ImageBrush com alongamento uniforme

A ilustração seguinte mostra o resultado do segundo pincel, que tem a configuração Stretch ajustada para UniformToFill.

ImageBrush com esticamento UniformToFill

Observe que a propriedade Stretch se comporta de forma idêntica para os outros objetos TileBrush, ou seja, para DrawingBrush e VisualBrush. Para obter mais informações sobre ImageBrush e os outros objetos TileBrush, consulte Pintura com imagens, desenhos e elementos visuais.

Observe também que, embora a propriedade Stretch pareça especificar como o conteúdo do TileBrush se estende para se ajustar à sua área de saída, na verdade especifica como o conteúdo TileBrush se estende para preencher seu bloco base. Para obter mais informações, consulte TileBrush.

Este exemplo de código é parte de um exemplo maior que é fornecido para o ImageBrush classe. Para obter o exemplo completo, consulte ImageBrush Sample.

Ver também