WinUI3でImageを扱いたい！

WinUI3のImageについて学んだ事をアウトプットしていきたいと思います。

何か追加情報があれば都度記事を更新していこうと思います。

基本

Sourceプロパティに画像のパスをべた書きする方法です。
表示したい画像が固定されている場合はこちらを使います。

<Image Source="画像パス" />

BitmapImageでの動的切り替え

SourceプロパティにBitmapImage(イメージソースファイル)を設定することで動的に画像を切り替えることが可能です。

ここではボタンを押下した際に指定の画像を表示する実装を例にします。

まずは画像を管理するViewModelクラスを作成します。

ImageViewModel.cs

class ImageViewModel : INotifyPropertyChanged
{
    private string _imagePath = string.Empty;
    public string ImagePath
    {
        get
        {
            return _imagePath;
        }
        set
        {
            _imagePath = value;

            Uri uri = new(ImagePath);
            _imageSource.UriSource = uri;

            OnPropertyChanged();
        }
    }

    private BitmapImage _imageSource = new();
    public BitmapImage ImageSource
    {
        get
        {
            return _imageSource;
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged = delegate { };
    protected void OnPropertyChanged([CallerMemberName] string? propertyName = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

ImagePathで渡されたパスを元にBitmapImageのソースを設定します。

次にこのViewModelをMainWindow.xaml.csに登録します。

MainWindow.xaml.cs

public sealed partial class MainWindow : Window
{
    private ImageViewModel ImageViewModel { get; set; }

    public MainWindow()
    {
        this.InitializeComponent();

        // ウィンドウのサイズを変更します。
        // SizeInt32(Width, Height)
        SizeInt32 size = new(1100, 600);
        AppWindow.Resize(size);

        ImageViewModel = new();
    }

    // BitmapImageでSourceを設定します。
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        ImageViewModel.ImagePath = "画像パス";
    }
}

最後にxamlの設定をします。

MainWindow.xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="ImageTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ImageTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="ImageTest">

    <Grid Margin="10">
        <Image Source="{x:Bind ImageViewModel.ImageSource, Mode=OneWay}" />
        <Button Content="Click" 
                Click="Button_Click"
                HorizontalAlignment="Center" />
    </Grid>
</Window>

stringでの動的切り替え

ImageのSourceではstring型のパスを使っても動的切り替えが可能です。
基本的な実装方法はBitmapImageを使用した時と同様です。

BitmapImageと異なるところはパスの初期値として空文字は使用できないことです。
BitmapImageのパスを表現するImagePathはstring.Emptyでしたがstring型の方式ではこの状態だと起動時に落ちてしまいます。

ですので何らかのパスを設定しておく必要があります。
ただし、存在しない画像パスでも動作はしますので、適当に初期値を設定しておけば良さそうです。

おわりに

そこまで労力は変わりませんが、若干string型による実装の方がコード量も減ってスマートな感じがしますね。

ただどこかのタイミングでBitmapImageでないといけない場面がでてくるかもしれませんので、両方とも抑えておきたいですね。