CanvasをImage化して表示すると小さくなる

Question

お世話になっております。

C# WPF で　Canvas に描いた図形をBitmap化し、それに等に手を加えてその結果を
Canvasに反映更新せずにImage コントロールに反映させようとしております。
やろうとしている手順は
１、Canvasに描画
２、Bitmap化
３、Bitmap → byte配列化してデータを直接操作
４、結果をImageコントロールに表示
この製作過程で２のBitmap化したものを取敢えずImageコントロールに表示させようと
そのまま４、の表示をしてみたところ、同じサイズにならず少し小さくなってしまいます。
コードは以下の通りで何かが間違っているか過不足があると思いますが、いろいろ
やってみても解からず。宜しくお願いします。

環境：Visual Studio Community 2019　WPF.NetFramework4.72 Windows10

// コード中のCanv は　Canvas のName です
// コード中のIMG は　Image の Name　です
public partial class MainWindow : Window
 {
    public MainWindow()
    {
      InitializeComponent();
      //あまり意味はない
      IMG.Margin = new System.Windows.Thickness(24, 290, 0, 0);
    }

    private void Button_Click(object sender, RoutedEventArgs e)
      {
         Size size = new Size(430, 241);
         RenderTargetBitmap renderBitmap = new RenderTargetBitmap((int)size.Width, (int)size.Height, 96.0d, 96.0d, PixelFormats.Pbgra32);
         renderBitmap.Render(Canv);
         IMG.Source= renderBitmap;
         IMG.Margin = new System.Windows.Thickness(0, 290, 0, 0);
      }

      //念のため
      private void Window_Loaded(object sender, RoutedEventArgs e)
      {
         Canv.Width = 430;
         Canv.Height = 241;
         IMG.Width = 430;
         IMG.Height = 241;
         IMG.Margin = new System.Windows.Thickness(24, 290, 0, 0);
      }
 }

Answer 1

C# WPFに詳しいわけではありませんが、興味があって少し試してみました。

以下実行例になります。Canvasに画像を設定して試してみました。
サイズが小さくなっているのではなくImageコントロールの位置がずれているのが起因しているように思います（何故ずれているかは不明ですが。。）

Comments

[TN8001]

https://stackoverflow.com/a/51700229

CanvasにMarginをつけるのではなく、Border等でくるんでそれにMarginをつけるのがいいようですね。

[cx20]

> CanvasにMarginをつけるのではなく、Border等でくるんでそれにMarginをつけるのがいいようですね。

そのようですね。
Borderでくるんで、IMG.Margin の記述をコメントアウトしたところ、正しく表示されることを確認しました。

[mnhktm]

cx20さん　TN8001さん　ご回答ありがとうございます。
確かにずれているようです。BorderでImageをくるんで表示させたのですが、まだずれます。
ですが、cx20さんが再現されているので正しいと思います。

私のやり方がまずいと思うのですが。以下のような感じです（一部）。
<Border BorderBrush="Black" BorderThickness="1
<Image Name="IMG" Margin="0,0,0,0" HorizontalAlignment=
</Border>
私はあまり詳しくなないので直ぐに理解できていないのですが、
Border でくるむのは Imege だけでしょうか、ひょっとして・・・

[cx20]

私が試した際は、Canvas / Image ともに Border でくるんで試しました。以下抜粋になります。
※ コメントのレイアウト調整の為、ソースコードに全角スペースを入れています。

<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="256" Margin="50,30,0,0" VerticalAlignment="Top" Width="256">
　　<Canvas x:Name="Canv" HorizontalAlignment="Left" Height="256" VerticalAlignment="Top" Width="256">
　　　　<Canvas.Background>
　　　　　　<ImageBrush ImageSource="CesiumLogoFlat.png"/>
　　　　</Canvas.Background>
　　</Canvas>
</Border>
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="256" Margin="50,300,0,0" VerticalAlignment="Top" Width="256">
　　<Image x:Name="IMG" HorizontalAlignment="Left" Height="256" VerticalAlignment="Top" Width="256"/>
</Border>

実行時のコードは以下になります。

private void Button_Click(object sender, RoutedEventArgs e)
{
　　Size size = new Size(256, 256);
　　RenderTargetBitmap renderBitmap = new RenderTargetBitmap((int)size.Width, (int)size.Height, 96.0d, 96.0d, PixelFormats.Pbgra32);
　　renderBitmap.Render(Canv);
　　IMG.Source = renderBitmap;
}

[cx20]

なお、参考までに、使用した画像データは下記のPNGファイル（256x256）になります。
https://github.com/cx20/gltf-test/blob/master/sampleModels/BoxTextured/glTF/CesiumLogoFlat.png

[mnhktm]

できました!。
コントロールを個別にくるむ　ですね。
最初に自分が少しずつ変な設定にしていたのだとわかりました。
cx20さん　TN8001さん　ありがとうございました。

[cx20]

解消されたようで良かったです。自分も勉強になりました。