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:
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:
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.
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:
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.
Related
I'd like to display coverarts for each album of an MP3 library, a bit like Itunes does (at a later stage, i'd like to click one any of these coverarts to display the list of songs).
I have a form with a panel panel1 and here is the loop i'm using :
int i = 0;
int perCol = 4;
int disBetWeen = 15;
int width = 250;
int height = 250;
foreach(var alb in mp2)
{
myPicBox.Add(new PictureBox());
myPicBox[i].SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
myPicBox[i].Location = new System.Drawing.Point(disBetWeen + (disBetWeen * (i % perCol) +(width * (i % perCol))),
disBetWeen + (disBetWeen * (i / perCol))+ (height * (i / perCol)));
myPicBox[i].Name = "pictureBox" + i;
myPicBox[i].Size = new System.Drawing.Size(width, height);
myPicBox[i].ImageLocation = #"C:/Users/Utilisateur/Music/label.jpg";
panel1.Controls.Add(myPicBox[i]);
i++;
}
I'm using the same picture per picturebox for convenience, but i'll use the coverart embedded in each mp3 file eventually.
It's working fine with an abstract of the library (around 50), but i have several thousands of albums. I tried and as expected, it takes a long time to load and i cannot really scroll afterward.
Is there any way to load only what's displayed ? and then how to assess what is displayed with the scrollbars.
Thanks
Winforms really isn't suited to this sort of thing... Using standard controls, you'd probably need to either provision all the image boxes up front and load images in as they become visible, or manage some overflow placeholder for the appropriate length so the scrollbars work.
Assuming Winforms is your only option, I'd suggest you look into creating a custom control with a scroll bar and manually driving the OnPaint event.
That would allow you to keep a cache of images in memory to draw the current view [and a few either side], while giving you total control over when they're loaded/unloaded [well, as "total" as you can get in a managed language - you may still need tune garbage collection]
To get into some details....
Create a new control
namespace SO61574511 {
// Let's inherit from Panel so we can take advantage of scrolling for free
public class ImageScroller : Panel {
// Some numbers to allow us to calculate layout
private const int BitmapWidth = 100;
private const int BitmapSpacing = 10;
// imageCache will keep the images in memory. Ideally we should unload images we're not using, but that's a problem for the reader
private Bitmap[] imageCache;
public ImageScroller() {
//How many images to put in the cache? If you don't know up-front, use a list instead of an array
imageCache = new Bitmap[100];
//Take advantage of Winforms scrolling
this.AutoScroll = true;
this.AutoScrollMinSize = new Size((BitmapWidth + BitmapSpacing) * imageCache.Length, this.Height);
}
protected override void OnPaint(PaintEventArgs e) {
// Let Winforms paint its bits (like the scroll bar)
base.OnPaint(e);
// Translate whatever _we_ paint by the position of the scrollbar
e.Graphics.TranslateTransform(this.AutoScrollPosition.X,
this.AutoScrollPosition.Y);
// Use this to decide which images are out of sight and can be unloaded
var current_scroll_position = this.HorizontalScroll.Value;
// Loop through the images you want to show (probably not all of them, just those close to the view area)
for (int i = 0; i < imageCache.Length; i++) {
e.Graphics.DrawImage(GetImage(i), new PointF(i * (BitmapSpacing + BitmapWidth), 0));
}
}
//You won't need a random, just for my demo colours below
private Random rnd = new Random();
private Bitmap GetImage(int id) {
// This method is responsible for getting an image.
// If it's already in the cache, use it, otherwise load it
if (imageCache[id] == null) {
//Do something here to load an image into the cache
imageCache[id] = new Bitmap(100, 100);
// For demo purposes, I'll flood fill a random colour
using (var gfx = Graphics.FromImage(imageCache[id])) {
gfx.Clear(Color.FromArgb(255, rnd.Next(0, 255), rnd.Next(0, 255), rnd.Next(0, 255)));
}
}
return imageCache[id];
}
}
}
And Load it into your form, docking to fill the screen....
public Form1() {
InitializeComponent();
this.Controls.Add(new ImageScroller {
Dock = DockStyle.Fill
});
}
You can see it in action here: https://www.youtube.com/watch?v=ftr3v6pLnqA (excuse the mouse trails, I captured area outside the window)
I save an image in preview mode. Preview mode contains Picturebox and Label control.
The problem is when I save an image. Likely I recorded my screen.
The export image is different with my expect, it does not keep aspect ratio.
So, all control in panel after save to example.jpg will wrong position.
My code use to ScaleImage:
public static Image ScaleImage(Image image, int maxWidth, int maxHeight)
{
var ratioX = (double) maxWidth/image.Width;
var ratioY = (double) maxHeight/image.Height;
var ratio = Math.Min(ratioX, ratioY);
var newWidth = (int) (image.Width*ratio);
var newHeight = (int) (image.Height*ratio);
var newImage = new Bitmap(newWidth, newHeight);
Graphics.FromImage(newImage).DrawImage(image, 0, 0, newWidth, newHeight);
return newImage;
}
My code save image:
Graphics g = Graphics.FromImage(img);
string s = lstImgAdded.Items[k].Text;
Bitmap bm = new Bitmap(#"" + s);
panel2.BackgroundImage = bm;
PointF p1 = StretchImageSize(postPoint, panel2);
g.DrawImage(
DrawText(lstAliasImage[i - valuesFrom], fontType, colorInput,
Color.Transparent),
Point.Round(StretchImageSize(postPoint, panel2))); // Point.Round(StretchImageSize(postPoint, panel2)) ở đây dùng nhìu lần
g.DrawImage(ctrl.Image, Point.Round(StretchImageSize(postPointPicturebox, panel2)).X, Point.Round(StretchImageSize(postPointPicturebox, panel2)).Y,
ctrl.Width, ctrl.Height); // panel2 có phải cái hình nhỏ ko? ko. picturebox moi la nho, panel la background lon
g.Dispose();
string linkLocation = txtAddress.Text;
ScaleImage(img, witdhImg, heightImg)
.Save(linkLocation + "\\" + lstAliasImage[i - valuesFrom] + "." + imgType,
ImageFormat.Jpeg);
And class StretchImage to scale control(Picturebox, Label) with a panel.
Image show before image in a panel is different after save.
In my software, Image shown in the panel. It does not scale like in Preview software:
Applying Aspect Ratio to Windows Forms
Much like we intercepted Windows message in our Windows 7 Style Form, to keep the aspect ratio of a Windows Form we are going to intercept the resizing Windows messages. This is done by overriding WndProc.
Here is a list of the constants that we need for this algorithm:
WM_SIZING = 0x214
WMSZ_LEFT = 1
WMSZ_RIGHT = 2
WMSZ_TOP = 3
WMSZ_BOTTOM = 6
The first one is the way our C# application can tell when the Form
is being resized. The rest of the constants tell us exactly which
side of the Form is being resized. Note that for corners the edges
combine. So for example, the lower left corner would be resizing the
right and bottom parts of the form and thus be 2 + 6 = 8.
The advantage of using WndProc instead of Windows Form events is
that we can prevent the Form from flickering. Resize events in .NET
are called until after the resizing has been applied, so modifying
size in an event produces flickering.
Make sure to download the sample C# application. Notice how no
matter where you resize the Form from, the aspect ratio is
maintained. A quick peek at the source code shows how either the
height or width is adjusted depending on which side of the Form was
being resized. Another cool thing is that the Form can still be
maximized to fill the entire screen without any problems.
try this
public void ResizeImage(string OriginalFile, string NewFile, int NewWidth, int MaxHeight, bool OnlyResizeIfWider)
{
System.Drawing.Image FullsizeImage = System.Drawing.Image.FromFile(OriginalFile);
// Prevent using images internal thumbnail
FullsizeImage.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipNone);
FullsizeImage.RotateFlip(System.Drawing.RotateFlipType.Rotate180FlipNone);
if (OnlyResizeIfWider)
{
if (FullsizeImage.Width MaxHeight)
{
// Resize with height instead
NewWidth = FullsizeImage.Width * MaxHeight / FullsizeImage.Height;
NewHeight = MaxHeight;
}
System.Drawing.Image NewImage = FullsizeImage.GetThumbnailImage(NewWidth, NewHeight, null, IntPtr.Zero);
// Clear handle to original file so that we can overwrite it if necessary
FullsizeImage.Dispose();
// Save resized picture
NewImage.Save(NewFile);
}
I want to display a picture in another scaling mode in an UltraGridCell. The mode should scale the image to the cell height and clip the rest of the image from the right to fit into the cell. This is easy if I could just draw it myself as the EmbeddableImageRenderer does not allow me to set its scaling behaviour (I am not talking about MaintainAspectRatio as I still want to maintain the aspect ratio).
I tried it with the tutorial to embed any control in a cell. And it is working fine with the given example of a TrackBar (and in my tiny testing project also with a ProgressBar as RendererControl). But it appears not to work with columns that are displaying images.
As a DataSource I have a list of my own class with an Image property which is displayed in the grid. As Editor-/RendererControl I set two regular PictureBoxes.
Any suggestions to solve the main problem of scaling the image or to set any control to the picture column (that would then deal with the scaling)?
I can't see any reason why the UltraControlContainerEditor shouldn't work with an image column, provided that the control you are using has a property that takes an Image and that you specify the correct PropertyName on the editor. But that's probably not the most efficient approach, anyway.
A better approach would be to use a DrawFilter to draw the image yourself.
public class ImageScalingDrawFilter : IUIElementDrawFilter
{
bool IUIElementDrawFilter.DrawElement(DrawPhase drawPhase, ref UIElementDrawParams drawParams)
{
switch (drawPhase)
{
case DrawPhase.BeforeDrawImage:
ImageUIElement imageElement = (ImageUIElement)drawParams.Element;
Image image = imageElement.Image;
int availableHeight = drawParams.Element.RectInsideBorders.Height;
float ratio = (float)availableHeight / (float)image.Height;
float newHeight = image.Height * ratio;
float newWidth = image.Width * ratio;
Rectangle rect = new Rectangle(
imageElement.Rect.X,
imageElement.Rect.Y,
(int)(newWidth),
(int)(newHeight)
);
// Draw the scaled image.
drawParams.Graphics.DrawImage(image, rect);
// This tells the grid not to draw the image (since we've already drawn it).
return true;
}
return false;
}
DrawPhase IUIElementDrawFilter.GetPhasesToFilter(ref UIElementDrawParams drawParams)
{
UIElement element = drawParams.Element;
// Look for an ImageUIElement
if (element is ImageUIElement)
{
// Presumably, we only want to this images in cells
// and not every image in the entire grid, so make sure it's in a cell.
CellUIElement cellElement = element.GetAncestor(typeof(CellUIElement)) as CellUIElement;
if (null != cellElement)
{
// We could also limit this to a particular column or columns.
switch (cellElement.Cell.Column.Key)
{
case "Image":
return DrawPhase.BeforeDrawImage;
}
}
}
return DrawPhase.None;
}
}
You assign the DrawFilter to the grid like so:
private void Form1_Load(object sender, EventArgs e)
{
this.ultraGrid1.DrawFilter = new ImageScalingDrawFilter();
}
I have written the following chunk of code that prints my ListBox perfectly when being sent to a physical printer, however when trying to send it to the XPS printer driver or using the XpsDocumentWriter class (I assume they use the same code under the hood) I receive the following exception:
System.ArgumentException was unhandled by user code
Message=Width and Height must be non-negative.
Source=ReachFramework
StackTrace:
at System.Windows.Xps.Serialization.VisualSerializer.WriteTileBrush(String element, TileBrush brush, Rect bounds)
The exception obviously points to an item not having a correct width/height however I have debugged the code when sending it to the different printers (physical and XPS driver) and I haven't been able to find any differences.
Below is how I create the visual to send to the printer:
private ScrollViewer GeneratePrintableView()
{
ScrollViewer scrollView = new ScrollViewer();
Grid grid = new Grid { Background = Brushes.White, Width = this.myListBox.ActualWidth, Height = this.myListBox.ActualHeight };
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions[0].Height = new GridLength(0, GridUnitType.Auto);
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions[1].Height = new GridLength(0, GridUnitType.Auto);
// Add the title and icon to the top
VisualBrush titleClone = new VisualBrush(this.TitleBar);
var titleRectangle = new Rectangle { Fill = titleClone, Width = this.TitleBar.ActualWidth, Height = this.TitleBar.ActualHeight };
grid.Children.Add(titleRectangle);
Grid.SetRow(titleRectangle, 0);
this.myListBox.Width = this.myListBox.ActualWidth;
this.myListBox.Height = this.myListBox.ActualHeight;
VisualBrush clone = new VisualBrush(this.myListBox) { Stretch = Stretch.None, AutoLayoutContent = true };
var rectangle = new Rectangle { Fill = clone, Width = this.myListBox.ActualWidth, Height = this.myListBox.ActualHeight };
Border border = new Border { Background = Brushes.White, Width = this.myListBox.ActualWidth, Height = this.myListBox.ActualHeight };
border.Child = rectangle;
grid.Children.Add(border);
Grid.SetRow(border, 1);
scrollView.Width = this.myListBox.ActualWidth;
scrollView.Height = this.myListBox.ActualHeight;
scrollView.Content = grid;
scrollView.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;
return scrollView;
}
Here is the GetPage override in my DocumentPaginator implementation:
public override DocumentPage GetPage(int pageNumber)
{
Page page = new Page();
double z = 0.0;
this.grid = new Grid();
this.grid.RowDefinitions.Add(new RowDefinition());
this.grid.RowDefinitions[0].Height = new GridLength(0, GridUnitType.Auto);
this.grid.Children.Add(this.printViewer);
Grid.SetRow(this.printViewer, 0);
//Adjusting the vertical scroll offset depending on the page number
if (pageNumber + 1 == 1) //if First Page
{
this.printViewer.ScrollToVerticalOffset(0);
this.printViewer.UpdateLayout();
}
else if (pageNumber + 1 == _verticalPageCount) //if Last Page
{
if (this.printViewer.ScrollableHeight == 0) //If printing only single page and the contents fits only on one page
{
this.printViewer.ScrollToVerticalOffset(0);
this.printViewer.UpdateLayout();
}
else if (this.printViewer.ScrollableHeight <= this.printViewer.Height) //If scrollconentheight is less or equal than scrollheight
{
this.printViewer.Height = this.printViewer.ScrollableHeight;
this.printViewer.ScrollToEnd();
this.printViewer.UpdateLayout();
}
else //if the scrollcontentheight is greater than scrollheight then set the scrollviewer height to be the remainder between scrollcontentheight and scrollheight
{
this.printViewer.Height = (this.printViewer.ScrollableHeight % this.printViewer.Height) + 5;
this.printViewer.ScrollToEnd();
this.printViewer.UpdateLayout();
}
}
else //Other Pages
{
z = z + this.printViewer.Height;
this.printViewer.ScrollToVerticalOffset(z);
this.printViewer.UpdateLayout();
}
page.Content = this.grid; //put the grid into the page
page.Arrange(new Rect(this.originalMargin.Left, this.originalMargin.Top, this.ContentSize.Width, this.ContentSize.Height));
page.UpdateLayout();
return new DocumentPage(page);
}
Interestingly if I change the Fill of rectangle to a Brush instead of clone then I do not receive the exception and the outputted file is the correct size.
I have spent over a day trying to debug why this isn't working and I am hoping that someone out there has either seen a similar issue or is able to point out any mistakes I am making.
Thanks for any responses.
I had to give up finding a solution with VisualBrush. If there is a GroupBox in the Visual for the brush I could never get it to produce a XPS file. It always fails with
System.ArgumentException was unhandled by user code Message=Width and Height must be non-negative. Source=ReachFramework StackTrace: at System.Windows.Xps.Serialization.VisualSerializer.WriteTileBrush(String element, TileBrush brush, Rect bounds)
The workaround was to clone the content that should go in the VisualBrush (Is there an easy/built-in way to get an exact copy (clone) of a XAML element?) and use that directly in a Grid instead of an VisualBrush
Have you checked the value of ActualWidth and ActualHeight of myListBox when the VisualBrush is being created? I don't know from where myListBox comes, but if it is not rendered by the time you are generating your xps document you may run into problems. You can try to manually force the control to render and see if it makes any difference.
I was unable to rectify the problem however using this link Paginated printing of WPF visuals I was able to find a suitable solution to allow printing of complicated visuals within my WPF application.
It's 2016 now and it's still not fixed. The problem is using TileBrush or any descendant type (VisualBrush in your case). If you use absolute mapping, it works, it's the relative mapping that causes the problem. Calculate the final size yourself and set Viewport to this size, ViewportUnits to Absolute. Also make sure you don't use Stretch.
I'm messing around with the Windows Phone 7 sdk and I'm trying to make the screen look like an old fashion digital display. Right now I'm trying to figure out how to make the text "glow" like one of those cool digital clocks. This is the sort of thing I'd assume you would look in to using shaders for, but it seems that shaders are disabled for use on the Windows Phone 7 OS. Any ideas? To be more specific, I want the text to look as though it is a light source and have the color "bleed" out slightly from the actual font.
I'd say its a choice between using an image as a font or blurring with WriteableBitmap.
Using a pre-made font image allows you to make the letters a complex as you want and should perform well. SpriteFont2 is convenient as it can generate the SpriteSheet with effects like glow, stroke, shadow and export an xml file containing the letter positions.
Add the generated png, and xml files to your solution and change the Build Action to content also check you have referenced System.Xml.Linq.
The following class can then be used.
public static class BitmapFont
{
private class FontInfo
{
public FontInfo(WriteableBitmap image, Dictionary<char, Rect> metrics)
{
this.Image = image;
this.Metrics = metrics;
}
public WriteableBitmap Image { get; private set; }
public Dictionary<char, Rect> Metrics { get; private set; }
}
private static Dictionary<string, FontInfo> fonts = new Dictionary<string, FontInfo>();
public static void RegisterFont(string fontFile, string fontMetricsFile)
{
string name = System.IO.Path.GetFileNameWithoutExtension(fontFile);
BitmapImage image = new BitmapImage();
image.SetSource(App.GetResourceStream(new Uri(fontFile,UriKind.Relative)).Stream);
var metrics = XDocument.Load(fontMetricsFile);
var dict = (from c in metrics.Root.Elements()
let key = (char)((int)c.Attribute("key"))
let rect = new Rect((int)c.Element("x"), (int)c.Element("y"), (int)c.Element("width"), (int)c.Element("height"))
select new { Char = key, Metrics = rect }).ToDictionary(x => x.Char, x => x.Metrics);
fonts.Add(name,new FontInfo(new WriteableBitmap(image),dict));
}
public static WriteableBitmap DrawFont(string text, string fontName)
{
var font = fonts[fontName];
var letters = text.Select(x => font.Metrics[x]).ToArray();
var height = (int)letters.Max(x => x.Height);
var width = (int)letters.Sum(x => x.Width);
WriteableBitmap bmp = new WriteableBitmap(width, height);
int[] source = font.Image.Pixels, dest = bmp.Pixels;
int sourceWidth = font.Image.PixelWidth;
int destX = 0;
foreach (var letter in letters)
{
for (int sourceY = (int)letter.Y, destY = 0; destY < letter.Height; sourceY++, destY++)
{
Array.Copy(source, (sourceY * sourceWidth) + (int)letter.X, dest, (destY * width) + destX, (int)letter.Width);
}
destX += (int)letter.Width;
}
return bmp;
}
public static Rectangle[] GetElements(string text, string fontName)
{
var font = fonts[fontName];
return (from c in text
let r = font.Metrics[c]
select new Rectangle
{
Width = r.Width,
Height = r.Height,
Fill = new ImageBrush {
ImageSource = font.Image,
AlignmentX=AlignmentX.Left,
AlignmentY=AlignmentY.Top,
Transform = new TranslateTransform { X = -r.X, Y = -r.Y },
Stretch=Stretch.None
},
}).ToArray();
}
}
Usage
//Register the font once.
BitmapFont.RegisterFont("Font.png", "Metrics.xml");
//Draws the text to a new bitmap, font name is image name without extension.
image.Source = BitmapFont.DrawFont(DateTime.Now.ToLongTimeString(), "Font");
//Alternatively put these elements in a horizontal StackPanel, or ItemsControl
//This doesn't create any new bitmaps and should be more efficient.
//You could alter the method to transform each letter too.
BitmapFont.GetElements(DateTime.Now.ToLongTimeString(), "Font");
If you want to blur see a BoxBlur implementation here or use WriteableBitmapEx.Convolute.
You should make a copy of the TextBlock you want to give the glow to. Bind the text property of the new item to the original item's text property (using ElementName binding). Do the same for location / height / width etc or any other property that you feel that will change on the original item. Set a transparency on the new item as well as a Blur Effect. This will give you a cool glow effect you want.
Several ways
Using a Border for a Glow Effect in Silverlight 3
Creating a Glowing effect in Silverlight
Glow effect in Silverlight
I believe all of them can be used in WP7 as well.