画像を表示する【C#/XAML】

Imageコントロールは画像の表示に特化したコントロール要素で、これを用いることでアプリに画像を表示させることができます。ここではImageコントロールの基本的な使い方について説明していきます。

開発環境

  • .NET 6.0
  • WinUI 3.0 (Windows App SDK 1.0)
  • WinRT Build 22000

Imageコントロールについて

GUIに画像を表示させるためのコントロールとしてはImageコントロールがあります。Imageはファイルパスを指定するだけで画像を表示させることができたり、表示させる画像の拡大・縮小の方法を指定できたりと、画像の表示に特化したコントロールになっています。また、FrameworkElementを継承しているので、WinUI3における他のコントロール要素と同様に扱うことができます。

ここではImageコントロールの使い方について見ていきます。

画像の指定方法

ファイルパスで画像を指定

XAML上でImageSourceプロパティに画像のファイルパスを指定することでその画像を表示させることができます。

例えば「C:\BioTech-Lab\lena.jpg」の画像を表示させる場合は以下のようになります。

MainWindow

MainWindow.xaml
<Window ...(省略)...>

    <StackPanel>
        <Image Source="C:\BioTech-Lab\lena.jpg"/>
    </StackPanel>
</Window>
追加した画像データをビルドしたアプリに含めるためには、ビルドアクションをコンテンツに指定する必要があります

なお、ファイルパスは相対パスで指定することも可能です。

Visual Studioでプロジェクトに含めた画像データなどをビルドしたアプリに含めるためには、ファイルのプロパティのビルドアクションを「コンテンツ」に指定する必要があります。この時、プロジェクトをビルドすると、ソリューションエクスプローラのファイル構成がそのままビルドされたアプリケーションに保持されるので、コーディングしている.xamlファイルから目的とするファイルまでの相対パスで指定します。

ここでは、プロジェクトの最上位フォルダにImagesというフォルダを作成し、そこに画像ファイルを配置しています。

MainWindow

MainWindow.xaml
<Window ...(省略)...>

    <StackPanel>
        <Image Source="Images/lena.jpg"/>
    </StackPanel>
</Window>

これで次のようにアプリに画像を表示させることが可能になります。

ImageSourceインスタンスで画像を指定

先ほどはImageSourceプロパティに直接ファイルパスを指定しましたが、実際にはこのSourceプロパティの型はImageSource型です。XAML上では型コンバーターによって指定したファイルパスのImageSource(実際にはBitmapImage)が自動的に生成されていたのです。

多くの場合はこの方法で十分ですが、何らかのオプションを指定して画像を表示させるような場合は、SourceプロパティにBitmapImageを直接指定する必要があります。例えば画像のレンダリングサイズを指定して表示させる場合は次のようになります。

MainWindow

MainWindow.xaml
<Window ...(省略)...>

    <StackPanel>
        <Image>
            <Image.Source>
                <BitmapImage UriSource="Images/lena.jpg" DecodePixelHeight="100"/>
            </Image.Source>
        </Image>
    </StackPanel>
</Window>

ストリームで画像を直接指定

ストリームから画像を表示させる場合はBitmapImageSetSourceメソッドでストリームをBitmapImageに登録させます。読み込み済みの画像やクリップボードから取得した画像を表示させる場合は、この方法で直接画像を表示させることができます。

MainWindow

MainWindow.xaml
<Window ...(省略)...>

    <StackPanel>
        <Image>
            <Image.Source>
                <BitmapImage x:Name="bitmap"/>
            </Image.Source>
        </Image>
    </StackPanel>
</Window>
MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using System;
using Windows.ApplicationModel.DataTransfer;
using Windows.Storage.Streams;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    // クリップボードからペーストする
    private async void Button_Click(object sender, RoutedEventArgs e)
    {
        DataPackageView dataPackageView = Clipboard.GetContent();
        if (dataPackageView.Contains(StandardDataFormats.Bitmap))
        {
            RandomAccessStreamReference streamReference = await dataPackageView.GetBitmapAsync();
            IRandomAccessStreamWithContentType stream = await streamReference.OpenReadAsync();
            bitmap.SetSource(stream);
        }
    }
}

これによりSnipping Toolなどでコピーした画像をアプリに貼り付けることができるようになります。

なお、クリップボードの使い方は以下の記事をご覧ください。

Imageコントロールのプロパティ

Stretchプロパティ

ImageStretchプロパティによって、画像をImageのサイズに従って縮小させるか否かやアスペクト比(縦横比)を固定するかどうかなどを設定することができます。

ここでは以下のプログラムのStretchプロパティの値を変化させてみたときの動作を見ていきましょう。

MainWindow

MainWindow.xaml
<Window ...(省略)...>

    <StackPanel>
        <Image Source="Images/lena.jpg" Stretch="〇〇" Height="200" Width="300" />
    </StackPanel>
</Window>

Stretch=”None”の場合

画像はオリジナルサイズで表示されます。

Stretch=”Fill”の場合

画像はImageのサイズに合うように拡大・縮小されますが、この時アスペクト比は維持されません。

Stretch=”Uniform”の場合

アスペクト比を維持しながら、Imageのサイズに合うように拡大・縮小されます。画像サイズは縦/横のより小さい方に合わせられます。

Stretch=”UniformToFill”の場合

アスペクト比を維持しながら、Imageのサイズに合うように拡大・縮小されます。画像サイズは縦/横のより大きい方に合わせられ、はみ出した部分はトリミングされます。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)