WPFのXAMLでImageのサイズを親要素のサイズに合わせる

Windowsサイズに合わせてImage(画像)サイズを変更するサンプルです。

WPFで扱うコントロールの多くは幅や高さを指定しない場合（デフォルト）親要素のクライアント領域一杯に広がりますが、Canvasの場合、幅や高さのデフォルトは0ですので基本的に数値を指定してあげる必要があるようです。以前作成したプログラムでは...

ソースコード
動作説明

ソースコード

ファイル名:MainWindow.xaml

<Window x:Class="WpfProgram3.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:i="clr-namespace:Microsoft.Xaml.Behaviors;assembly=Microsoft.Xaml.Behaviors"
        xmlns:interactivity="clr-namespace:Reactive.Bindings.Interactivity;assembly=ReactiveProperty.WPF"
        xmlns:local="clr-namespace:WpfProgram3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <i:Interaction.Triggers>
       <i:EventTrigger EventName="Closed">
            <interactivity:EventToReactiveCommand Command="{Binding WindowClosedCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Grid>
        <StackPanel>
            <Canvas>
                <Image
                    Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=StackPanel}}"
                    Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=StackPanel}}"
                    Source="F:\csharp\WpfProgram3\202304301753.png">
                </Image>
            </Canvas>
        </StackPanel>
    </Grid>
</Window>

ファイル名:MainWindowViewModel.cs

using System;
using System.ComponentModel;
using Reactive.Bindings;
using Reactive.Bindings.Extensions;
using System.Reactive.Disposables;

using System.Diagnostics;
using System.Windows;
using System.Windows.Media.Imaging;
using System.IO;
using System.Diagnostics.Tracing;

namespace WpfProgram3;

public class MainWindowViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;
    protected virtual void OnPropertyChanged(string name)
    {
        if (PropertyChanged == null) return;
        PropertyChanged(this, new PropertyChangedEventArgs(name));
    }
    private CompositeDisposable Disposable { get; } = new ();
    public ReactiveCommand<EventArgs> WindowClosedCommand { get; }
    public MainWindowViewModel()
    {
        WindowClosedCommand = new ReactiveCommand<EventArgs>()
            .WithSubscribe(e => Disposable.Dispose());
        
    }

}

動作説明

起動すると画像が表示されます。

ウィンドウサイズの変更に連動して画像サイズが変更されます。

MVVMなのでViewModelのソースも掲載していますが、この機能はXAMLのみで完結しています。

ソースコード

動作説明

コメント