I'm working on an UWP project and I want to load a WebView with opacity = 0.01f, and only set opacity to 1.0f when WebView_LoadCompleted is called. Until then it is presented by a preview image. But when I'm showing it, it flickers white in like 1 on 20 cases, and I'm testing the same WebView content.
My code looks like this:
Grid grid = new Grid();
//set previewImage as preview of grid content
Image backgroundImage = new Image();
backgroundImage.Source = new BitmapImage(new Uri(#"ms-appdata:///local/" + "some path"));
grid.Children.Add(backgroundImage);
grid.SetValue(Grid.RowProperty, slide.Pos.Y);
grid.SetValue(Grid.ColumnProperty, slide.Pos.X);
MainGrid.Children.Add(grid);
WebView webView = new WebView();
webView.NavigationStarting += WebView_NavigationStarting;
webView.LoadCompleted += WebView_LoadCompleted;
webView.ScriptNotify += WebView_ScriptNotify;
webView.Opacity = 0.01f;
Uri navigationUri = "some local file Uri");
webView.NavigateToLocalStreamUri(navigationUri, myResolver); // myResolver checks if source is allowed to load
webView.Width = 1024;
webView.Height = 768;
Viewbox viewBox = new Viewbox();
viewBox.Stretch = Stretch.Uniform;
viewBox.Child = webView;
grid.Children.Add(viewBox);
And my WebView_LoadCompleted looks like this:
private void WebView_LoadCompleted(object sender, NavigationEventArgs e)
{
WebView webView = (WebView)sender;
webView.Opacity = 1.0f;
}
I was expecting that the WebView will only render its laoded content right away because it is visible (with low opicity) in the ViewBox, and most of the times it is not flickering, but it still appears.
Trying to get a call after WebView_LoadCompleted didn't work yet, I tried some calls like x_LayoutUpdated, x_SizeChanged for the WebView and the ViewBox, but WebView_LoadCompleted is the last called function that runs into a breakpoint.
Setting the WebView.DefaultBackgroundColor to transparent didn't work, it still flickers white.
Placing the WebView below the Image and getting it to the front after a delay for layout time didn't work.
Thanks for your help! I appreciate it!
It looks like there is no proper way to validate that the webview is finished with all possible loading and rendering processes for the webview.
But you can use this answer of another question for other UIElements:
Answer
Related
As a classic forum, threads and replys are displayed on a page, with dark and light and dark and light backcolor.
I am trying to write a client of a forum on windows using winform. It is
At first, I have tried this way:
Add a big panel to the form, let's call it the PARENT PANEL.
Add small panels to the big panel like this:
panel1.Visible = false;
for (int i=0; i<5;i++)
{
Panel parent = new Panel();
parent.Height = 800;
Random ra = new Random();
TextBox p = new TextBox();
p.Text = "fehsuifq";
p.Multiline = true;
p.WordWrap = true;
p.Dock = DockStyle.Fill;
parent.BackColor = Color.FromArgb(ra.Next(0, 254), ra.Next(0, 254), ra.Next(0, 254));
p.BorderStyle = BorderStyle.None;
p.ReadOnly = true;
p.TabStop = false;
p.BackColor = this.BackColor;
parent.Controls.Add(p);
parent.Dock = DockStyle.Top;
panel1.Controls.Add(parent);
}
panel1.Visible = true;
Every panel(tenicially, a control) displays a thread's text and images and others details(like authors or avator).
Images are not shown until it is clicked.
when the image is clicked, it is loaded and the controls's height will change as result.
The PARENT PANEL will contains hundreds of these controls since there will be so many threads. It is and have to be scrollable, obviously.
But if I put a textbox in the control, the scroll wheel no longer work on the PARENT PANEL.If I use a label, it is not selectable.
I think this way can't be more stupid, completely.
So I am looking for a better to do this job, to display hundreds or even thousands threads/replys on winform, which is:
the height is dynamic, because the images inside will not load until it is clicked.
The text inside is selectable (I edited this just to disambiguate)
the PARENT PANEL can response to the mouse's wheel, just like twitter, forums.
So that I can use my scroll wheel to browse all the replys at one time. The loading is a background work.
Look at the picture, when the text is selected, the whole panel is still response to the wheel(just like normal webPage). This is a uwp app and I am not sure if winform can do this.
I'm trying to create a program which scrolls through files located on my computer and displays the files. This is working for me so far but I'm getting content in actual size so the webbrowser adds a scrollbar(obviously). I want the content to scale automatically so it fits in the webbrowser without having to scroll.
Code:
WebBrowser web = new WebBrowser();
System.Drawing.Rectangle workingRectangle = Screen.PrimaryScreen.WorkingArea;
int heightWebcontrol = workingRectangle.Height / 100 * 85;
int widthwebControl = workingRectangle.Width / 100 * 75;
web.Size = new Size(widthwebControl, heightWebcontrol);
web.Location = new Point(0, 0);
web.Navigate(fileName);
this.Controls.Add(web);
Large image in webbrowser, this is just 1/5th of the image:
So basicly, this large image, needs automatically to be scales so it fits the browser exactly.
Thanks guys.
As an option, you can handle DocumentCompleted event of the WebBrowser control and set the style of image based on the size.
For example:
1) Create a Windows Forms Project
2) Open Form1 in desgn mode and drop a WebBrowser control on it.
3) Double click on title-bar of form to handle Load event of the form and use following code:
private void Form1_Load(object sender, EventArgs e)
{
this.webBrowser1.Navigate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
}
4) Double click on WebBrowser control to handle its DocumentCompleed event and use following code:
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
webBrowser1.Document.Body.SetAttribute("scroll", "no");
var img = webBrowser1.Document.GetElementsByTagName("img")
.Cast<HtmlElement>().FirstOrDefault();
var w = img.ClientRectangle.Width;
var h = img.ClientRectangle.Height;
img.Style = string.Format("{0}: 100%", w > h ? "Width" : "Height");
}
You will see following result, while the original image size is 544x184:
Note 1
This is just an example of what you can do. You can make the decision more intelligent, for example check if the image size is less than the browser size, then you don't need to apply any scaling.
Note 2 - (This is my choice)
If you setup WebBrowser control to support showing modern content the better style for the image will be:
img.Style = "max-width:100%;max-height:100%";
This way, the image will be fit in the browser when it's larger than browser. Also it will not resize when the browser is large enough.
My default background image is "lobby.jpg" and when I click the "Lights" button I want it to swap with "lobby1.jpg" and vice versa. These images are stored in "obj\Debug\Images\".
Also I'd like to implement relative(?) imagesource uris so that I can access the images on any machine (without using the whole uri, just the "obj\Debug\Images\").
Edit: So the main issue seems to be that I tried changing the window background without realising that it was getting "covered" by the grid background of the page. So what I did is I set the main window background to "lobby.jpg", I made the grid background invisible and used the code from the answer to swap between the 2 backgrounds.
You can use AppDomain basepath to exe (this is are simplest way)
var basePath= AppDomain.CurrentDomain.BaseDirectory;
var imageDirPath = $"{basePath}\\Images\\";
Example:
bool clicked = false;
private void button_Click(object sender, RoutedEventArgs e)
{
var basePath = AppDomain.CurrentDomain.BaseDirectory;
var imageDirPath = $"{basePath}\\Images\\";
if (clicked)
image.Source = new BitmapImage(new Uri(imageDirPath+ "lobby.jpg"));
else
image.Source = new BitmapImage(new Uri(imageDirPath + "lobby1.jpg"));
clicked = !clicked;
}
I want to display one or more CheckBoxes on a tile in my Windows Phone app. This works already for TextBlocks, but with a CheckBox it shows only the Text of the CheckBox and not the Checkmark itself.
This is a sample of my code:
public void CreateTile()
{
StackPanel panel = new StackPanel();
panel.VerticalAlignment = VerticalAlignment.Top;
panel.Margin = new Thickness(7.0, 7.0, 7.0, 0);
panel.Width = 336;
panel.Height = 336;
panel.Orientation = Orientation.Vertical;
// Create and add a CheckBox for each task
foreach (var task in _tasks)
{
TextBlock textBlock = new TextBlock();
textBlock.TextWrapping = TextWrapping.Wrap;
textBlock.Style = App.Current.Resources["PhoneTextLargeStyle"] as Style;
textBlock.Foreground = new SolidColorBrush(Colors.White);
textBlock.Text = task.Text;
CheckBox checkBox = new CheckBox();
checkBox.IsChecked = task.IsDone;
checkBox.Content = textBlock;
panel.Children.Add(checkBox);
}
Grid layoutRoot = new Grid();
layoutRoot.Background = new SolidColorBrush(Colors.Blue);
layoutRoot.Width = 336;
layoutRoot.Height = 336;
layoutRoot.Children.Add(panel);
layoutRoot.Measure(new Size(336, 336));
layoutRoot.Arrange(new Rect(0, 0, 336, 336));
layoutRoot.UpdateLayout();
// Render grid into bitmap
WriteableBitmap bitmap = new WriteableBitmap(336, 336);
bitmap.Render(layoutRoot, null);
bitmap.Invalidate();
// Save background image for tile to isolated storage
Uri backgroundImage = TileHelper.SaveTileImage(bitmap);
}
If I create a tile with a background image created by the method above, the tile will look like this:
As you can see the text is displayed but there is no checkmark/square before the text.
I personally like to use Segoe UI Symbol as the Font Family in such situations. This gives me the flexibility to use Text and Symbols together while not messing around too much with code / images. SUS has great modern icons (or characters if you may call them) that are very much Metroish, I'd say.
Just open up Charmap (Win + R and type in charmap) and in the Font Select -> Segoe UI Symbol. Now you can select any character you like and paste into Visual Studio Editor itself. Yes, it works!
The symbol may not display properly in the Editor itself but it will at Runtime
Here are some suggestions:
Here are the corresponding characters:
☑
✅
Don't worry about them not looking right HERE. They should when you follow the above steps.
You can always "hack" it by using images of checkbox controls. Did you try to show created control in UI? i.e. adding it to page? Just to see if your code is executed correctly.
Or another solution would be to use check mark character - http://www.fileformat.info/info/unicode/char/2713/index.htm
I'll try to replicate this problem in my test app since it is strange that it does not work.
I want to create a button in my windows 8 desktop app, which will have an image and a text block. I have to do this using C# coding.
My code is as follows,
Button btn = new Button();
StackPanel btnContentPanel = new StackPanel();
btnContentPanel.Orientation = Orientation.Horizontal;
Image img = new Image();
img.Source = new BitmapImage(newUri(#"C:\Users\Desktop\Images\download.jpg"));
img.Stretch = Stretch.Uniform;
btnContentPanel.Children.Add(img);
TextBlock txBlock = new TextBlock();
txBlock.Text = "My Button";
btnContentPanel.Children.Add(txBlock);
btn.Content = btnContentPanel;
This is not giving any error but the image is not getting displayed. If I add another text block in place of the image, then its appearing, but not the image.
Am I missing anything ? Please help, thank you.
Try building your button like this:
Button btn= new Button
{
Width = 30,
Height = 30,
Content = new Image
{
Source = new BitmapImage(#"C:\Users\Desktop\Images\download.jpg"))
}
};
In the case of a 'missing' image there are several things to consider:
When Xaml can't locate a resource it might ignore it (when it won't throw a XamlParseException)
The Resource must be properly added and defined:
make sure it exists in your project where expected.
Make sure it is built with your project as a Resource.
(Right click -> Properties -> BuildAction='Resource')
Another thing to try in similar cases, which is also useful for reusing of the image (or any other resource):
Define your Image as a Resource in your Xaml:
<UserCondrol.Resources>
<Image x:Key="MyImage" Source.../>
</UserControl.Resources>
And later use it in your desired control/controls:
<Button Content={StaticResource MyImage} />