Como: Preserve the Aspect Ratio of an Image Used as a Background
Este exemplo mostra como usar a propriedade Stretch de uma ImageBrush para preservar a proporção de aspecto de uma imagem.
Por padrão, quando se usa um ImageBrush para pintar uma área, seu conteúdo ajusta-se para preencher completamente a área de saída. Quando a área de saída e a imagem possui diferentes proporções de aspecto, a imagem é distorcida pelo ajuste.
Para fazer um ImageBrush preservar a proporção de aspecto de sua imagem, defina a propriedade Stretch como Uniform ou UniformToFill.
Exemplo
O exemplo a seguir usa dois objetos ImageBrush para pintar dois retângulos. Cada retângulo é 300 por 150 pixeis e cada um contém uma imagem de 300 por 300 pixeis. A propriedade Stretch do primeiro pincel é definida como Uniform, e a propriedade Stretch do segundo pincel é definida como 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>
A ilustração a seguir mostra a saída do primeiro pincel, que tem a configuração Stretch como Uniform.
A ilustração seguinte mostra a saída do segundo, que tem a configuração Stretch como UniformToFill.
Note que a propriedade Stretch comporta-se identicamente para os outros objetos TileBrush, ou seja, para DrawingBrush e VisualBrush. Para obter mais informações sobre objetos ImageBrush e os outros objetos TileBrush, consulte Pintura com Imagens, Desenhos e Visuais.
Note também que, apesar da propriedade Stretch parecer especificar como o conteúdo do TileBrush vai se ajustar para caber na área de saída, ela na verdade especifica como o conteúdo TileBrush vai expandir para preencher seu tile base. Para obter mais informações, consulte TileBrush.
Este código de exemplo é parte de um exemplo maior fornecido para a classe ImageBrush. For the complete sample, see Exemplo de ImageBrush.
Consulte também
Conceitos
Pintura com Imagens, Desenhos e Visuais