Bagikan melalui

Cara: Mempertahankan Rasio Aspek Gambar yang Digunakan sebagai Latar Belakang

Contoh ini menunjukkan cara menggunakan properti Stretch dari ImageBrush untuk mempertahankan rasio aspek gambar.

Secara default, ketika Anda menggunakan ImageBrush untuk melukis area, kontennya membentang untuk sepenuhnya mengisi area output. Ketika area keluaran dan gambar memiliki rasio aspek yang berbeda, gambar tersebut menjadi terdistorsi akibat peregangan ini.

Untuk membuat ImageBrush mempertahankan rasio aspek gambarnya, atur properti Stretch ke Uniform atau UniformToFill.

Contoh

Contoh berikut menggunakan dua objek ImageBrush untuk melukis dua persegi panjang. Setiap persegi panjang adalah 300 kali 150 piksel dan masing-masing berisi gambar 300 kali 300 piksel. Properti Stretch dari kuas pertama diatur ke Uniform, dan properti Stretch kuas kedua diatur ke 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";
        }
    }
}

Ilustrasi berikut menunjukkan output kuas pertama, yang memiliki pengaturan Stretch dan Uniform.

ImageBrush dengan Peregangan Seragam

Ilustrasi berikutnya menunjukkan output kuas kedua, yang memiliki pengaturan StretchUniformToFill.

ImageBrush dengan peregangan UniformToFill

Perhatikan bahwa properti Stretch bersifat identik untuk objek TileBrush lainnya, yaitu, untuk DrawingBrush dan VisualBrush. Untuk informasi selengkapnya tentang ImageBrush dan objek TileBrush lainnya, lihat Melukis dengan Gambar, Gambar, dan Visual.

Perhatikan juga bahwa, meskipun properti Stretch tampaknya menentukan bagaimana konten TileBrush membentang agar sesuai dengan area outputnya, properti ini benar-benar menentukan bagaimana konten TileBrush membentang untuk mengisi petak peta dasarnya. Untuk informasi selengkapnya, lihat TileBrush .

Contoh kode ini adalah bagian dari contoh yang lebih besar yang disediakan untuk kelas ImageBrush. Untuk sampel lengkapnya, lihat ImageBrush Sample.

Lihat juga