VB のたまご

作成日: 2017/03/06, 更新日: 2017/03/06



Image

    イメージ
  •  Image は、画像を表示するためのコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「ImageWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="ImageWindow1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w04_NormalControls"
            mc:Ignorable="d"
            Title="ImageWindow1" Height="300" Width="300">
        
        <Grid>
    
            <Image Source="images/smile.png" />
    
        </Grid>
        
    </Window>
    

  •  このサンプルでは、本プロジェクト内に「images」フォルダを追加して、この中に「smile.png」を入れて、プロジェクト追加しています。 この時、デザインプロパティにある「ビルドアクション」には「Resource」を設定しています。 「出力ディレクトリ―にコピー】は、「コピーしない」にしています。

  • スポンサーリンク


  •  表示する画像はサイズを調整することができます。以下のサンプルです。

  • <Window x:Class="ImageWindow2"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w04_NormalControls"
            mc:Ignorable="d"
            Title="ImageWindow2" Height="300" Width="525">
        
        <Grid ShowGridLines="True">
    
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <Image Source="images/smile.png" Grid.Row="0" Grid.Column="0" Stretch="None" />
            <Image Source="images/smile.png" Grid.Row="0" Grid.Column="1" Stretch="Fill" />
            <Image Source="images/smile.png" Grid.Row="1" Grid.Column="0" Stretch="Uniform" />
            <Image Source="images/smile.png" Grid.Row="1" Grid.Column="1" Stretch="UniformToFill" />
    
        </Grid>
        
    </Window>
    

  •  基本的には Stretch プロパティで調整します。 「None」は、画像サイズをそのままのサイズで表示、 「Fill」は、縦も横も広げられるだけ広げたサイズに変換して表示、 「Uniform」は、画像サイズの比率を維持したまま、かつ全体が表示できるように、広げられるだけ広げたサイズに変換して表示、 「UniformToFill」は、画像サイズの比率を維持したまま、広げられるだけ広げたサイズに変換して表示します。

  •  Image コントロールのサイズに合わせて、表示画像を縮小することも可能です。

  • <Window x:Class="ImageWindow3"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:w04_NormalControls"
            mc:Ignorable="d"
            Title="ImageWindow3" Height="300" Width="300">
        
        <Grid>
    
            <Image Source="images/smile.png" Width="32" Height="32" />
    
        </Grid>
        
    </Window>
    

  •  元々の画像は 32x32 以上の大きさですが、image コントロールのサイズに合わせて縮小表示されていることが分かります。