Поделиться через

Практическое руководство. Сохранение пропорций изображения, используемого в качестве фона

  • Статья

Этот пример показывает, как использовать свойство Stretch класса ImageBrush для сохранения пропорций изображения.

По умолчанию при использовании ImageBrush, чтобы закрасить область, его содержимое растягивается для полного заполнения области. Если выходная область и изображение имеют разные пропорции, изображение искажается при таком растягивании.

Чтобы ImageBrush сохранил пропорции изображения, задайте для свойства Stretch значение Uniform или UniformToFill.

Пример

В следующем примере используются два объекта ImageBrush, чтобы закрасить два прямоугольника. Каждый прямоугольник имеет размер 300 на 150 пикселей и каждый содержит изображение размером 300 на 300 пикселей. Для свойства 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, то есть, для DrawingBrush и VisualBrush. Дополнительную информацию о классе ImageBrush и о других объектах TileBrush см. в разделе Рисование с использованием изображений, рисунков и визуальных элементов.

Также обратите внимание на следующее: хотя кажется, что свойство Stretch определяет, каким образом содержимое TileBrush растягивается в соответствии с выходной областью, на самом деле, оно определяет, как растягивается содержимое TileBrush для заполнения своего базового фрагмента. Дополнительные сведения см. в разделе TileBrush.

Этот пример кода является частью более широкого примера для класса ImageBrush. Полный пример см. в разделе Пример использования кистей.

См. также