Comment : conserver les proportions d'une image utilisée comme arrière-plan

Mise à jour : novembre 2007

Cet exemple montre comment utiliser la propriété Stretch d'un ImageBrush pour conserver les proportions de l'image.

Par défaut, lorsque vous utilisez un ImageBrush pour peindre une zone, son contenu s'étire pour remplir complètement la zone de sortie. Lorsque la zone de sortie et l'image ont des proportions différentes, l'image est déformée par cet étirement.

Pour qu'un ImageBrush conserve les proportions de son image, affectez à la propriété Stretch la valeur Uniform ou UniformToFill.

Exemple

L'exemple suivant utilise deux objets ImageBrush pour peindre deux rectangles. Chaque rectangle fait 300 par 150 pixels et chacun contient une image de 300 par 300 pixels. La propriété Stretch du premier pinceau a la valeur Uniform et la propriété Stretch du deuxième pinceau a la valeur 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";


        }
    }
}

<!-- Demonstrates different ImageBrush Stretch settings.-->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Background="White" Margin="20"
  Title="ImageBrush Stretch Modes">
  <StackPanel>

    <!-- The ImageBrush in this example has its
         Stretch property set to Uniform. As a result,
         the image it contains is expanded as much as possible
         to fill the rectangle while
         still preserving its aspect ratio.-->
    <Rectangle
      Width="300" Height="150" 
      Stroke="MediumBlue" StrokeThickness="1">
      <Rectangle.Fill>
        <ImageBrush
          Stretch="Uniform" ImageSource="sampleImages\square.jpg"
          PresentationOptions:Freeze="True" />
      </Rectangle.Fill>
    </Rectangle>

    <!-- The ImageBrush in this example has its
         Stretch property set to UniformToFill. As a result,
         the image is expanded to completely fill
         the rectangle, but its aspect ratio is preserved.-->
    <Rectangle
      Width="300" Height="150"
      Stroke="MediumBlue" StrokeThickness="1"
      Margin="0,10,0,0">
      <Rectangle.Fill>
        <ImageBrush 
          Stretch="UniformToFill" ImageSource="sampleImages\square.jpg" 
          PresentationOptions:Freeze="True" />
      </Rectangle.Fill>
    </Rectangle>
  </StackPanel>
</Page>

L'illustration suivante montre la sortie du premier pinceau, dont le paramètre Stretch a la valeur Uniform.

L'illustration suivante montre la sortie du deuxième pinceau, dont le paramètre Stretch a la valeur UniformToFill.

Notez que la propriété Stretch se comporte de la même manière pour les autres objets TileBrush, c'est-à-dire pour DrawingBrush et VisualBrush. Pour plus d'informations sur ImageBrush et les autres objets TileBrush, consultez Peinture avec des objets d'image, de dessin et visuels.

Notez également que, même si la propriété Stretch semble spécifier la façon dont le contenu TileBrush s'étire pour s'adapter à sa zone de sortie, elle spécifie en fait la façon dont le contenu TileBrush s'étire pour remplir sa mosaïque de base. Pour plus d'informations, consultez TileBrush.

Cet exemple de code fait partie d'un exemple plus complet fourni pour la classe ImageBrush. Pour l'exemple complet, consultez ImageBrush, exemple.

Voir aussi

Concepts

Peinture avec des objets d'image, de dessin et visuels

Référence

TileBrush