UWPで2枚のImageを重ねて表示したいです

Question

こんにちは。
Windows10でUWPのアプリケーションを開発しています。
Visual Studio 2017 Communityを使っています。

###前提・実現したいこと
Imageを2枚重ねて、奥に地のイメージ、
手前のImageにPNG(ほぼモノクロ)の背景部分(地の部分)を透明にして、表示したいです。
単純に重ねると、奥の画像は見えないのです。
どのようなことをすればよいでしょう。
image background="transparent"みたいな指定はありませんか？

###該当のソースコード

    <Grid >
        
        <Image x:Name="Background" 
               Source="ms-appx:///Assets/background.png" >
        </Image>
                        <Image x:Name="mainphoto" />
</Grid>

###補足情報(言語/FW/ツール等のバージョンなど)
Microsoft Visual Studio Community 2017
Version 15.0.26228.9 D15RTWSVC
Microsoft .NET Framework
Version 4.6.01586

です。
よろしくお願いします。

Opacity="0.5"だと手前のイメージ全体が薄くなってしまいます。
手前のイメージの背景部分のみをうすくできればと思っています。

using Windows.Graphics.Imaging;
using Windows.UI;
using Windows.UI.Xaml.Media.Imaging;

namespace TESTImage
{
	class TransparentImage
	{
		private BitmapSource GetPngWithTransparentBackground(BitmapSource source, Color transparentColor)
		{
			BitmapFrame frame = BitmapFrame.Create(source);
			var writeableBitmap = new WriteableBitmap(frame);

			if (writeableBitmap.Format.BitsPerPixel != 32)
			{
				return null;
			}

			var rect = new Int32Rect(0, 0, writeableBitmap.PixelWidth, writeableBitmap.PixelHeight);
			var bytesPerPixel = (writeableBitmap.Format.BitsPerPixel + 7) / 8; // 1 ピクセル当たりのバイト数（4 になるはず）
			var stride = writeableBitmap.PixelWidth * bytesPerPixel; // 幅方向のバイト数
			var arraySize = stride * writeableBitmap.PixelHeight;

			var sourcePixels = new byte[arraySize];
			var newPixels = new byte[arraySize];

			writeableBitmap.CopyPixels(sourcePixels, stride, 0);
			writeableBitmap.CopyPixels(newPixels, stride, 0);

			byte a, r, g, b;
			int index; // 左上隅からのバイトのインデックス

			for (int y = 0; y < writeableBitmap.PixelHeight; y++)
			{
				for (int x = 0; x < writeableBitmap.PixelWidth; x++)
				{
					index = x * bytesPerPixel + y * stride;
					b = sourcePixels[index];
					g = sourcePixels[index + 1];
					r = sourcePixels[index + 2];
					a = sourcePixels[index + 3];

					Color color = Color.FromArgb(a, r, g, b);

					if (color.Equals(transparentColor))
					{
						newPixels[index + 3] = 0; // アルファ値を持つバイトを 0 に設定する
					}
				}
			}

			writeableBitmap.WritePixels(rect, newPixels, stride, 0);

			return writeableBitmap;
		}

		//上記のメソッドを利用するコードは以下のとおりです。imageはPNG画像。Colors.White のピクセルを透明化する。
		private WriteableBitmap imagetransparent(WriteableBitmap image)
		{
			return this.GetPngWithTransparentBackground(image, Colors.White);
		}
	}
}

では動作しませんでした。

Answer 1

<Window x:Class="transparent.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:local="clr-namespace:transparent"
        mc:Ignorable="d"
        Title="MainWindow"
        SizeToContent="WidthAndHeight">
    <Grid>
        <Image x:Name="画像1"/>
    </Grid>
</Window>

using System.Windows;
using System.Windows.Media.Imaging;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

namespace transparent
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Create_Bitmap();
        }

        private void Create_Bitmap()
        {
            Bitmap bmp = new Bitmap("test.png");
            bmp.MakeTransparent(System.Drawing.Color.White);

            Bitmap bgbmp = new Bitmap("test2.png");
            Graphics gs = Graphics.FromImage(bgbmp);
            gs.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height);
            gs.Dispose();
            bmp.Dispose();

            using(Stream st = new MemoryStream())
            {
                bgbmp.Save(st, ImageFormat.Bmp);
                st.Seek(0, SeekOrigin.Begin);
                画像1.Source = BitmapFrame.Create(st, BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
            }
        }
    }
}

参考
System.Drawing.BitmapをWPF用に変換
指定した色を透明色として画像を表示する

WPFですが、考えてみました。
2枚の画像を用意して1枚の特定色を透過、合体させて
表示しています。

Answer 2

こんにちは。

モノクロ画像は透過PNGで、背景部分は透過指定されているのでしょうか。

それともそうはなっておらず、
部分的に透過率を変更したいといことでしょうか。

UWPの標準機能内でやれると良いですが、やれない場合は
少なくとも、手前の画像を背景PNGと透過PNGに分割して奥のImageと重ねて、背景PNGのOpacityのみ変更すれば手前のモノクロ部分の透過率は変更されずに済む気がします。

---

もし質問内容の解釈が誤っている場合は、対象の画像を添付して頂けると齟齬が無くなると思いますのでご検討ください。

Comments

[cancat]

モノクロ画像は単なるBitmapで、透過PNGではないです。
なので苦しんでいます。

[cancat]

画像をTeratailにはれたことがないのです。もう一度準備してみます。

[Tak1wa]

> PNG(ほぼモノクロ)の背景部分(地の部分)を透明にして、表示したいです

とおっしゃってますがBitmapなのですか？PNGで透過設定してもらうのが一番良いと思いますが…

[cancat]

セルアニメみたいな感じです。
手前に、ごく普通の画像ファイルを読み、その地の部分に、奥の背景を表示したいのです。
手前のセルに相当する画像は、いろいろあるのです。
読み込むファイルはいろいろあります。jpg/png/bmp。

なので、pngファイルであることはないですし、透過指定してあるpngであることはまったく想定外です。
ごくたまたま透過pngであることがないとはいいませんが、それは現在のところ、ざっくり1/5,000以下の確率です。つまり、ほぼ期待できないということです。

メモ画像を作ったのですが、やっぱり貼れませんでした…。
Teratailむずかしい…。

[Tak1wa]

うーん、手前のセル画像に透過処理がされていない場合は奥の背景を表示するのは難しいかもしれません…。
もしくはその形に手前の画像の形を切り抜く方法もあるかもしれませんが、おそらくもっと難しいです…。

[cancat]

そうですか～。
手前の画像はモノクロ(グラデーションはあるが)と仮定すれば、
for(y座標)
for(x座標)
if(200 < R && 200 < G && 200 < B)
A=0;
とかでできるはできるはずなのです。
それが書いているコードなのですけど…。
動かないんですよね…。
反応なしになってしまう。

ひょっとして、2000×2000ピクセルとかを処理していて、遅いだけかもしれないのですが…。まあ遅くて動かないのなら、現実的には使えなくて。
悩んでます。

使うのは自分だけなので、切り抜きはそれほど厳密でなくてもいいか～と思ってます。

[Tak1wa]

なるほど、透過色を決めてUWP上で透過PNGに生成して表示すればいけそうですね！
まだよく読んでませんが、例えば以下など参考になるかもしれません。
https://stackoverflow.com/questions/36136521/uwp-transparent-png-color-overlay

[cancat]

そうそう、そんな感じです。透過色を幅をもたせて決めて、白っぽいところを透過にする、みたいなイメージです。
今日はもうダウンなので、また明日試してみます。