方法 : 背景として使用するイメージの縦横比を保持する

更新 : 2007 年 11 月

この例では、イメージの縦横比を保持するために ImageBrush の Stretch プロパティを使用する方法について説明します。

既定では、ImageBrush を使用して領域を塗りつぶすと、出力領域が完全に塗りつぶされるようにコンテンツが引き伸ばされます。出力領域とイメージの縦横比が異なる場合は、この引き伸ばしによってイメージがゆがめられます。

ImageBrush がそのイメージの縦横比を保持するようにするには、Stretch プロパティを Uniform または UniformToFill に設定します。

使用例

次の例では、2 つの ImageBrush オブジェクトを使用して、2 つの四角形を塗りつぶしています。これらの四角形は 300 × 150 ピクセルで、どちらも 300 × 300 ピクセルのイメージを保持しています。最初のブラシの Stretch プロパティは Uniform に設定され、2 番目のブラシの 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";


        }
    }
}

<!-- 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 に設定した 2 番目のブラシの出力を次の図に示します。

Stretch プロパティは、他の TileBrush オブジェクト、つまり DrawingBrush と VisualBrush に対してもまったく同じように動作することに注意してください。ImageBrush およびその他の TileBrush オブジェクトの詳細については、「イメージ、描画、およびビジュアルによる塗りつぶし」を参照してください。

また、Stretch プロパティは、TileBrush コンテンツを出力領域に合わせて引き伸ばす方法を指定するように見えますが、実際には基本タイルを塗りつぶすように TileBrush コンテンツを引き伸ばす方法を指定することにも注意してください。詳細については、TileBrush を参照してください。

このコード例は、ImageBrush クラスのトピックで取り上げているコード例の一部分です。サンプル全体については、「ImageBrush のサンプル」を参照してください。

参照

概念

イメージ、描画、およびビジュアルによる塗りつぶし

参照

TileBrush