0

I'm using webview2 control instead the regular webbrowser because with webview2 i can browse to website using microsoft edge browser.

usage:

public Form1()
{
    InitializeComponent();

    webView21.Source = new Uri("https://microsoft.com");
}

the result is:

screenshot

now I want to add from my hard drive pc my own image so the image will be over the webview control. same as I put image over pictureBox control the same idea.

I don't want to load image like navigating to uri of image but to put image over the control.

just in case this is the official microsoft webview2 control site for WebView2.

For example, I have a weather radar png image and I want to put it like that on the webview2 control:

example

IVSoftware
  • 5,732
  • 2
  • 12
  • 23
daniel zedek
  • 13
  • 4
  • 1
    Please elaborate... what do you mean by "so the image will be over the webview control", that you want to load the picture in the webview? "I don't want to load image like navigating to uri of image", how else would you expect your program to find the image? – RatzMouze Feb 15 '23 at 09:29
  • @RatzMouze you right. I edited my question and added at the bottom an example image of what I mean. – daniel zedek Feb 15 '23 at 09:39

2 Answers2

0

The simple answer would be, that this is impossible.
A browser needs a pointer to know, what it needs to show you.

What i believe you are searching for is something like this.
But this is not to load it directly into the webView. This is for building a website with a database that you would load into your webview.

RatzMouze
  • 351
  • 3
  • 13
0

In WinForms you can show any control (e.g. PictureBox) over any other control (e.g. WebView2) by adding the former to the Controls collection of the latter.

screenshot

public partial class MainForm : Form
{
    public MainForm() => InitializeComponent();
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        const int WIDTH = 500, HEIGHT = 250;

        // Path to image on the local hard drive.
        string pathToImageOnLocalHardDrive = Path.Combine(
            AppDomain.CurrentDomain.BaseDirectory,
            "Images",
            "0n0cW.jpg"
        );

        PictureBox pictureBox = CreatePictureBox(
            path: pathToImageOnLocalHardDrive,
            maxWidth: WIDTH,
            maxHeight: HEIGHT
        );
        pictureBox.Location = new Point(
            webView21.Right 
            - pictureBox.Width
            - SystemInformation.VerticalScrollBarWidth - 1,
            webView21.Bottom - pictureBox.Height - 1);

        webView21.Controls.Add(pictureBox);
    }
    .
    .
    .
}

To make the picture box do this:

private PictureBox CreatePictureBox(
    string path,
    int maxWidth, 
    int maxHeight)
{
    PictureBox newPictureBox = new PictureBox
    {
        SizeMode = PictureBoxSizeMode.StretchImage,
        BackColor = Color.Aqua,
        Image = Bitmap.FromFile(path),
    };
    var measure = (Bitmap)newPictureBox.Image;
    float scaleWidth = maxWidth / (float)measure.Width;
    float scaleHeight = maxHeight / (float)measure.Height;
    float allowedScale = Math.Min(scaleWidth, scaleHeight);
    newPictureBox.Size = new Size
    {
        Width = (int)(allowedScale * measure.Width),
        Height = (int)(allowedScale * measure.Height),
    };
    return newPictureBox;
}

Image Paths

If you add more images, make sure you set this property for them:

image-paths

IVSoftware
  • 5,732
  • 2
  • 12
  • 23
  • i can't ask question or add link to i.stack.imgur.com i tried in meta stackexchange but it will not let me not enough reputation. i tried to upload the image in the regular imgur site but then it's just showing me red x when i put the link of the uploaded image in the ImageLocation variable. – daniel zedek Feb 15 '23 at 14:20
  • If you'd like to run my code to try it you can [clone](https://github.com/IVSoftware/picture-control-over-webview-control.git) the repo. If you're interested in being able to drag the map around with the mouse, you might also want to check out this answer: https://stackoverflow.com/a/74764351/5438626. – IVSoftware Feb 15 '23 at 14:48
  • it's working but i thought if i'm using a png image that support transparent the image on the browser will be transparent. i even changed the back color in the creation of the picturebox to transparent BackColor = Color.Transparent but still when the picturebox is over the browser it's not transparent. is there any way to make the picturebox transparent ? – daniel zedek Feb 15 '23 at 15:24
  • Ah. But that is a separate question! Please refer to this thread for PictureBox transparency. https://stackoverflow.com/a/74894576/5438626 and see if it helps answer your new question. – IVSoftware Feb 15 '23 at 15:30
  • Hey guess what? Someone else asked that very thing today so I answered it https://stackoverflow.com/a/75475220/5438626 (the example is a label but it works the same with a PictureBox). – IVSoftware Feb 16 '23 at 16:41