WPFのXAMLでImageコントロールで画像を表示する。

WPFではXAMLでImageコントロールを使うと簡単に画像を表示することが出来ます。

ローカルファイルを表示
画像をオリジナルサイズで表示
スクロール
ドラッグアンドドロップで画像表示
ドラッグアンドドロップとコピーアンドペーストと拡大縮小

ローカルファイルを表示

<Window x:Class="WPFImageSample.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:WPFImageSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Image 
            Source = "C:\Users\karet\Pictures\20230614\202304301753.jpg"
        >
        </Image>
    </Grid>
</Window>

Stretchを指定しない場合の規定値はUniformとなり、縦横比が保持された状態で拡大縮小されます。

画像をオリジナルサイズで表示


<Image 
            Source = "C:\Users\karet\Pictures\20230614\202304301753.jpg"
            Stretch = "None"
        >

StretchにNoneをセットすると画像のオリジナルサイズで表示されます。

スクロール

画像をオリジナルサイズで表示した例では画像のサイズがImageコントロールのサイズより大きいため画像の一部のみが表示されています。
ScrollViewerを使って画像をスクロールすることではみ出した部分を表示することが出来ます。

        <ScrollViewer
            HorizontalScrollBarVisibility="Auto"
            VerticalScrollBarVisibility="Auto">
            <Image
                Source = "C:\Users\karet\Pictures\20230614\202304301753.jpg"
                Stretch = "None"
            >
            </Image>
        </ScrollViewer>

HorizontalScrollBarVisibilityの規定値はHiddenで
VerticalScrollBarVisibilityの規定値はVisibleですので、デフォルトでは縦方向のみスクロールになります。
autoに設定することで自動的にスクロールバーが表示されるようしています。

ドラッグアンドドロップで画像表示

ファイル名:MainWindow.xaml

<Window x:Class="ImgDropView.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:ImgDropView"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel
            x:Name = "StackPanel1"
            Background = "Black"
            AllowDrop = "True">
            <Image
                x:Name="Image1"
                Stretch="Uniform" />
        </StackPanel>
    </Grid>
</Window>

ファイル名:MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO;

namespace ImgDropView
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            StackPanel1.SizeChanged += (s, e) =>
            {
                Image1.Height = (int)e.NewSize.Height;
                Image1.Width = (int)e.NewSize.Width;
            };

            StackPanel1.Drop += async (s, e) =>
            {
                if (e.Data is null) return;
                var files = e.Data.GetData(DataFormats.FileDrop) as string[] ?? new string[]{};
                if (!files.Any()) return;
                string file = files[0];

                var bi = await Task.Run(()=>
                {
                    using var fs = new FileStream(file, FileMode.Open, FileAccess.Read);
                    BitmapImage bi = new();
                    bi.BeginInit();
                    bi.StreamSource = fs;
                    bi.CacheOption = BitmapCacheOption.OnLoad;
                    bi.CreateOptions = BitmapCreateOptions.None;
                    bi.EndInit();
                    bi.Freeze();
                    return bi;
                });
                Image1.Source = bi;

            };

        }
    }
}

ドラッグアンドドロップとコピーアンドペーストと拡大縮小