如何:保持背景图像的长宽比
下面的示例演示如何使用 ImageBrush 的 Stretch 属性来保持图像的纵横比。
默认情况下,当您使用 ImageBrush 绘制某个区域时,该区域的内容将进行拉伸以完全填充输出区域。 当输出区域和图像的纵横比不同时,图像就会因拉伸而失真。
为了让 ImageBrush 保持其图像的长宽比,请将 Stretch 属性设置为 Uniform 或 UniformToFill。
示例
下面的示例使用两个 ImageBrush 对象来绘制两个矩形。 每个矩形都为 300x150 像素,每个矩形都包含一个 300x 300 像素的图像。 第一个画笔的 Stretch 属性设置为 Uniform,第二个画笔的 Stretch 属性设置为 UniformToFill。
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media.Imaging
Imports System.Windows.Media
Imports System.Windows.Shapes
Namespace Microsoft.Samples.Graphics.UsingImageBrush
''' <summary>
''' Demonstrates different ImageBrush Stretch settings.
''' </summary>
Public Class StretchModes
Inherits Page
Public Sub New()
' 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.
Dim uniformBrush As 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.
Dim rectangle1 As New Rectangle()
With rectangle1
.Width = 300
.Height = 150
.Stroke = Brushes.MediumBlue
.StrokeThickness = 1.0
.Fill = uniformBrush
End With
' 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.
Dim uniformToFillBrush As 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.
Dim rectangle2 As New Rectangle()
With rectangle2
.Width = 300
.Height = 150
.Stroke = Brushes.MediumBlue
.StrokeThickness = 1.0
.Margin = New Thickness(0, 10, 0, 0)
.Fill = uniformToFillBrush
End With
Dim mainPanel As New StackPanel()
mainPanel.Children.Add(rectangle1)
mainPanel.Children.Add(rectangle2)
Content = mainPanel
Background = Brushes.White
Margin = New Thickness(20)
Title = "ImageBrush Stretch Modes"
End Sub
End Class
End Namespace
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>
下面的插图显示第一个画笔的输出,该画笔的 Stretch 设置为 Uniform。
下一个插图显示第二个画笔的输出,该画笔的 Stretch 设置为 UniformToFill。
请注意,Stretch 属性对于其他 TileBrush 对象(即,DrawingBrush 和 VisualBrush)的行为方式相同。 有关 ImageBrush 和其他 TileBrush 对象的更多信息,请参见使用图像、绘图和 Visual 进行绘制。
另请注意,尽管 Stretch 属性似乎指定 TileBrush 内容如何拉伸以适合其输出区域,但是它实际上指定 TileBrush 内容如何拉伸以填充其基本平铺图像。 有关更多信息,请参见 TileBrush。
此代码示例摘自一个为 ImageBrush 类提供的更大的示例。 有关完整示例,请参见 ImageBrush Sample(ImageBrush 示例)。