如何:保持背景图像的长宽比

此示例展示如何使用 ImageBrushStretch 属性来保持图像的纵横比。

默认情况下,使用 ImageBrush 绘制某个区域时,将拉伸该区域的内容以完全填充输出区域。 当输出区域和图像的纵横比不同时,图像就会因拉伸而失真。

若要使 ImageBrush 保持其图像的纵横比,请将 Stretch 属性设置为 UniformUniformToFill

示例

以下示例使用两个 ImageBrush 对象来绘制两个矩形。 每个矩形都为 300x150 像素,每个矩形都包含一个像素为 300x300 的图像。 第一个画笔的 Stretch 属性设置为 Uniform,第二个画笔的 Stretch 属性设置为 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";
        }
    }
}

下图显示第一个画笔的输出,其 Stretch 设置为 Uniform

ImageBrush with Uniform stretching

下图显示第二个画笔的输出,其 Stretch 设置为 UniformToFill

ImageBrush with UniformToFill stretching

请注意,Stretch 属性对其他 TileBrush 对象的行为相同,即对 DrawingBrushVisualBrush。 有关 ImageBrush 和其他 TileBrush 对象的详细信息,请参阅使用图像、绘图和视觉对象进行绘制

另请注意,虽然 Stretch 属性看似指定 TileBrush 内容如何拉伸以适应其输出区域,但它实际上指定 TileBrush 内容如何拉伸以填充其基本磁贴。 有关详细信息,请参阅 TileBrush

此代码示例是为 ImageBrush 类提供的一个更大示例的一部分。 有关完整示例,请参阅 ImageBrush 示例

另请参阅