WPF 入門：画像の表示方法【初心者講座】

Windowsアプリケーションを作るのに、おしゃれな装飾やユーザビリティを向上させるのに画像は欠かせない要素です。
ここでは、WPFでImageコントロールを使った画像表示方法についてご紹介します。

Imageコントロールの設置
Imageコントロールのソース画像の設定
実行画面
ソースコード MainWindow.xaml

Imageコントロールの設置

プロジェクトを新規作成したら、自動で生成されるMainWindow.xamlを編集していきます。
ソリューションエクスプローラーの「MainWindow.xaml」をダブルクリックして、エディターに表示させます。
ツールボックスを展開して、「Image」をウィンドウの中にドラッグ＆ドロップで配置します。

ウィンドウにImageコントロールが追加されます。
Imageコントロールは真っ白の状態です。
また、ウィンドウの中にImageを配置すると、画面下のXAMLにも同時にコードが追加されます。

<Image HorizontalAlignment="Left" Height="100" Margin="42,43,0,0" VerticalAlignment="Top" Width="100"/>

配置したImageコントロールはドラッグ＆ドロップで表示位置を自由に移動することができます。

Imageコントロールのソース画像の設定

「デザイン」ペインでImageコントロールをクリックして選択状態にします。
Imageコントロールを選択状態にすると、「プロパティ」ペインでImageの各種設定情報を編集できるようになります。

「プロパティ」ペーン内の「共通」を展開します。
その中の「Source」の項目の「…」ボタンをクリックします。

「…」ボタンをクリックすると、ファイル選択ダイアログが表示されるので、表示したい画像を選択して「追加」をクリックしてください。
（ここでは、「cat.png」を選択しました。）

以下のように、Imageコントロールに先ほど選択した画像が表示されます。
また、同時にソリューションエクスプローラ上に「cat.png」が追加され、XAMLのImageにも「Source=”cat.png”」が追加されます。

<Image HorizontalAlignment="Left" Height="100" Margin="42,43,0,0" VerticalAlignment="Top" Width="100" Source="cat.png"/>

実行画面

実行すると以下のように表示されます。

ソースコード MainWindow.xaml

<Window x:Class="TestWpf04.MainWindow"
        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:TestWpf04"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Image HorizontalAlignment="Left" Height="100" Margin="42,43,0,0" VerticalAlignment="Top" Width="100" Source="cat.png"/>

    </Grid>
</Window>

Image クラスの詳細については以下をご参照ください。