Cómo: Conservar la relación de aspecto de una imagen usada como fondo

En este ejemplo se muestra cómo usar la propiedad Stretch de un ImageBrush para conservar la relación de aspecto de la imagen.

De forma predeterminada, cuando usas un ImageBrush para pintar un área, su contenido se extiende para rellenar completamente el área de salida. Cuando el área de salida y la imagen tienen diferentes relaciones de aspecto, la imagen se distorsiona debido a este estiramiento.

Para conservar ImageBrush la relación de aspecto de su imagen, establezca la propiedad Stretch en Uniform o UniformToFill.

Ejemplo

En el ejemplo siguiente se usan dos ImageBrush objetos para pintar dos rectángulos. Cada rectángulo es de 300 por 150 píxeles y cada uno contiene una imagen de 300 por 300 píxeles. La Stretch propiedad del primer pincel se establece en Uniformy la Stretch propiedad del segundo pincel se establece en 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";
        }
    }
}

En la ilustración siguiente se muestra la salida del primer pincel, que tiene un Stretch valor de Uniform.

En la próxima ilustración se muestra el resultado del segundo pincel, que tiene una configuración de Stretch establecida en UniformToFill.

Tenga en cuenta que la Stretch propiedad se comporta de forma idéntica para los demás TileBrush objetos, es decir, para DrawingBrush y VisualBrush. Para obtener más información sobre ImageBrush y los demás TileBrush objetos, vea Pintura con imágenes, dibujos y objetos visuales.

Tenga en cuenta también que, aunque la Stretch propiedad parece especificar cómo se extiende el TileBrush contenido para ajustarse a su área de salida, realmente especifica cómo se extiende el TileBrush contenido para rellenar su icono base. Para obtener más información, consulte TileBrush.

Este ejemplo de código forma parte de un ejemplo más grande que se proporciona para la ImageBrush clase . Para obtener el ejemplo completo, consulte Ejemplo de ImageBrush.

Consulte también

• TileBrush
• Pintar con imágenes, dibujos y objetos visuales