質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • UWP

    96questions

    UWPは、Universal Windows Platformの略。様々なデバイス向けに提供されているアプリケーションを共通のフレームワーク上で動作可能にする仕組みで、Windows10で導入されました。

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,578

cancat

score 239

こんにちは。 
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);
        }
    }
}


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

test.png
test2.png
イメージ説明

<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枚の特定色を透過、合体させて
表示しています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

こんにちは。

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

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

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/10 15:14

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

    キャンセル

  • 2017/07/10 15:15

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

    キャンセル

  • 2017/07/10 15:20

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

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

    キャンセル

  • 2017/07/10 20:47

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

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

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

    キャンセル

  • 2017/07/10 22:19

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

    キャンセル

  • 2017/07/10 22:25

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

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

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

    キャンセル

  • 2017/07/10 22:32

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

    キャンセル

  • 2017/07/10 22:46

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • UWP

    96questions

    UWPは、Universal Windows Platformの略。様々なデバイス向けに提供されているアプリケーションを共通のフレームワーク上で動作可能にする仕組みで、Windows10で導入されました。