ImageViewの画像を親Gridからはみ出さないようにしたい

前提・実現したいこと

毎回お世話になります。
今回もよろしくお願いします。

DataGridに「test.csv」の値を自動で読み込んだ後、
ユーザーが行を選択したら、DataGridの値を参照し画像を<Image>の場所に表示し
ユーザーの行選択切り替えに応じて、Imageもコロコロ切り替えようと思ってます。
別ウィンドウを表示し、画像を表示するところまでは問題なく出来たのですが
親のGridサイズからはみ出してしまうため困ってます。
親のGridサイズから画像がはみ出さないように
縦横比を固定して縮小したいと思っています。
最終的にどのくらい縮小したのか、というデータは必要で
「縦横比固定88%にした」などの情報は別途必要になってくるので
それは最終的にImageのWidthとかを取得すればいけるのかなと思っています。

現在、Stretch="Uniform"としてみましたが
画像のサイズは特に変わりませんでした。Widthとかを決めてないからかもしれませんが
親の値を引き継ぐものだと思っていたので、どうしてこの状況になるのかよくわかっていません。
動的にImageを読込んでいるからなのでしょうか？

実施したいこと
・左上を基準に、画面サイズにあわせて縦横比固定でImageを縮小したい
・画面にあわせて画像を拡大はしない
・（できたら）何%縮小したのかを取得したい
→たぶん、画面上のWidthなどを取得すればいけそうなので、
それについては情報がありそうです

発生している問題・エラーメッセージ

画像の表示はできたものの、画像が画面からはみ出してしまいます。
親サイズを取得し、それに合わせてコードで修正するしかないのでしょうか？
Canvasに入れている理由としては、
四角形とかを描いてImageの上に重ねる予定だからです。

ソースは必要最小限とし、抜粋しています。

該当のソースコード

xaml
1
2    <Grid>
3        <StackPanel>
4            <Grid Height="700" Width="700">
5                <Canvas>
6                    <Image x:Name="MyImage" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"></Image>
7                </Canvas>
8            </Grid>
9        </StackPanel>
10    </Grid>

C#
1        public MainWindow()
2        
3	    var exeFolder = AppDomain.CurrentDomain.BaseDirectory;
4            var filename = exeFolder + "\pic\2.jpg"
5            InitializeComponent();
6	            BitmapImage bitmap = new BitmapImage(); // デコードされたビットマップイメージのインスタンスを作る。
7	            try
8	            {
9	                bitmap.BeginInit();
10	                bitmap.UriSource = new Uri(filename); // ビットマップイメージのソースにファイルを指定する。
11	                bitmap.EndInit();
12	                MyImage.Source = bitmap; // Imageコントロールにバインディングする。
13
14	                this.Title = System.IO.Path.GetExtension(filename); // ファイルの拡張子をウインドウタイトルに表示する。
15	            }
16	            catch (Exception ex)
17	            {
18	                MessageBox.Show(ex.Message);
19        }

試したこと

WPF　C#　画像表示　で色々と調べました。
大きなWPFの画面上に小さな画像表示、というのはたくさんありましたが
画面ピッタリに縦横比固定で表示というのは見つかっておりません。

Stretch="Uniform"

これで上手くいってくれると思ったのですが、
WPFのウィンドウサイズが小さくても画像を縮小してくれませんでした。

追加20210615

1200×800ピクセルの画像(jpg)を準備し、
ウィンドウサイズ、Imageサイズ全てをWidth=1200、Height＝800にしてみました。
期待する動作としては、画面いっぱいいっぱいに表示されるというものですが
ウィンドウを広げてみたところ、少し拡大というか余りがありました。
表示されていなかった余白部分があるというか…。

元画像

表示した時（右側、下側が見切れてしまう）

ブレークポイントを設定し確認しましたが、
ActualHeight800、ActualWidth1200
Width800、Height1200
PixelHeight800、PixelWidth1200　と全て範囲内の値でした。
ギリギリの値を設定するのは良くないのでしょうか？
ウィンドウサイズに合わせたのでピッタリに表示されると思ったのですが
全部表示されていないようです。
調べた所、dpiが違うと勝手に拡大縮小されることがあるとあり
サイトに記載されていた以下のように設定しました。

<Image Width="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelWidth}" Height="{Binding RelativeSource={RelativeSource Self}, Path=Source.PixelHeight}"/>

しかし、表示も見た目も特に変わりませんでした。

できたら、ユーザーがウィンドウサイズを変更したときに
画像もあわせて縮小させたいと思っていますが
難しそうなので今は断念します。

補足情報（FW/ツールのバージョンなど）

VisualStudio 2019
.NET　4.5（だったはず）
WPF C#　（※　WinFormではない）

行動規範の内容に同意します

回答1件

ベストアンサー

Widthとかを決めてないからかもしれませんが
親の値を引き継ぐものだと思っていたので、どうしてこの状況になるのかよくわかっていません。

Canvasはちょっと特殊で子のサイズを調整しません。
例えばサイズを入れていないRectangleをGridに入れた場合は引き延ばされますが、Canvasに入れるとサイズが０になり「あれ？」と思う時があります。

一応この辺りに書いてあるのですが、自動翻訳がひどすぎて何を言っているのかさっぱりわかりません^^;
Canvas クラス (System.Windows.Controls) | Microsoft Docs

別にImageにサイズ指定できない事情があるわけではないんですよね？
拡大されるのが嫌な場合は、StretchDirection="DownOnly"があります。
あるいはMaxWidth・MaxHeightでもいいでしょう。

xml
1<Image Width="700" Height="700" StretchDirection="DownOnly" HorizontalAlignment="Left" VerticalAlignment="Top" />
2<Image MaxWidth="700" MaxHeight="700" HorizontalAlignment="Left" VerticalAlignment="Top" />

それは最終的にImageのWidthとかを取得すればいけるのかなと思っています。

WidthやMaxWidthを指定すると実際のサイズがうまく取れないので、ActualWidth・ActualHeightがいいでしょう。

投稿2021/06/14 21:41

編集2023/07/27 15:21

TN8001

総合スコア9396

退会済みユーザー

2021/06/15 00:54

TN8001様回答ありがとうございます！ Canvasはサイズ引継ぎしないんですね。勉強になります！私にとって分かりやすいMaxWidth,MaxHeightを利用することにしました。ただ、教えて頂いた通りに記載してみましたが画像が見切れてしまいます。詳細については、元の質問に追記しました。ウィンドウのサイズも同じにしているので、少々良く分からないですが dpiの影響で拡大されたり縮小されたりするみたいです。