Windowsサイズに合わせてImage(画像)サイズを変更するサンプルです。
【WPF学習中】XAMLでCanvasのサイズを親要素のサイズに合わせる
WPFで扱うコントロールの多くは幅や高さを指定しない場合(デフォルト)親要素のクライアント領域一杯に広がりますが、Canvasの場合、幅や高さのデフォルトは0ですので基本的に数値を指定してあげる必要があるようです。 以前作成したプログラムで...
ソースコード
<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のみで完結しています。
コメント