I am developing a windows phone 8 application. In my application i am using a WebBrowser control to show the HTML formatted string. I need to show the html formatted text with black background. I am doing it successfully but the Problem is that
when the html formatted string is rendered in WebBrowser it first shows the White color and then shows the actual string with black background. It looks like flick effect and then shows my html formatted string.
Code I am Using is:
string html = ("<!DOCTYPE html5><html><head><meta name=\"viewport\" content=\"user-scalable=no background-color:black\" />" + sctipy + "</head><body style= \"background:#000; color:#fff;\"><div id=\"content\">" + myHtmlFormattedString + "</div></body>" + "</html>");
webbrowser.NavigateToString(html);
Is there any other solution like changing the default background of WebBrowser control to other than white
The problem is that you can't change the background of the WebBrowserControl itself.
I had the same problem... I solved it by making the WebBrowserControl collapsed and when the LoadCompleted of the WebBrowserControl hits, make it visible...
XAML:
<phone:WebBrowser x:Name="browser" IsScriptEnabled="True" Visibility="Collapsed" LoadCompleted="WebBrowser_LoadCompleted" />
And on the back:
public void WebBrowser_LoadCompleted(object sender, EventArgs e);
{
browser.Visibility = Visibility.Visible;
}
This gives you also the advantage to show a ProgressBar/ProgressRing when you are loading a (huge) page and hide until the WebBrowser_LoadCompleted gets triggered. As you are loading a small page, you won't see the difference of the visible/collapsed part and your flickering problem is gone...
Related
i need to preview default image while getting my exact image from a url
here's my code for getting the image
Uri uri = new Uri(myUrl);
Profile.Source = new BitmapImage(uri);
"Profile" is the Image that previews the requested image
You can use two images. The first one will be the placeholder you want, and the second one will be the profile picture that will show up later and cover the first one.
You need these images to be in the same palce, one above the other. You can user Grid to achieve that.
<Grid>
<Image x:Name="Placeholder" Source="/Assets/Placeholder.png" />
<Image x:Name="Profile" ImageOpened="Profile_ImageOpened" />
</Grid>
The Placeholder.png is an image that has been added to the project.
Now, we want to know, when profile picture is download. Event ImageOpened gives us the way. We can use it to hide the placeholder when the profile picture is fully downloaded.
private void Profile_ImageOpened(object sender, RoutedEventArgs e)
{
Placeholder.Visibility = Visibility.Collapsed;
}
I have 2 viewboxes in my page and currently I am doing this:
ViewBox1.Visibility = Visibility.Collapsed;
ViewBox2.Visibility = Visibiltiy.Visible;
That means upon some button press, I am hiding first viewbox and showing the second one. Now, upon hiding I want a simple transition animation like viewbox1 sliding out and viewbox2 sliding in, something like this.
I have installed WPF toolkit, but can't figure this out.
Any help is highly appreciated.
Currently I have found this solution, this is actually full page transition but it works for me, I am sharing this code here:
SlideTransition transition = new SlideTransition();
transition.Mode = SlideTransitionMode.SlideLeftFadeIn;
PhoneApplicationPage page = (PhoneApplicationPage)((PhoneApplicationFrame)Application.Current.RootVisual).Content;
ITransition trans = transition.GetTransition(page);
trans.Completed += delegate
{
trans.Stop();
};
trans.Begin();
I'm using Firefox 24.0. The problem (see title) does not seem to be a caching issue. The image actually reloads; however, the previous image is displayed until the new one is available. Which in my case, produces a page full of images that refresh at different times and it's hard to see what is new and what is old content. Neither IE nor Chrome have this problem, as the image is not shown until the new one is ready.
The only solutions that have occurred to me are to add a time-stamp or randon number to the image URL, or to hide the image using javascript until the image is loaded, then show it. However, I would like a cleaner solution, on the server side if possible, like specifying some header that would make Firefox forget the old image.
Here is the code showing the annoying effect. Variant 1 does not work well in Firefox:
<html>
<head></head>
<script type="text/javascript">
function AddImage() {
var imgElem = document.createElement('img');
// Variant 1
imgElem.setAttribute('src', 'http://localhost/ImageServer.asmx/GetImage');
// Variant 2
//imgElem.setAttribute('src', 'http://localhost/ImageServer.asmx/GetImage?r=' + Math.random());
// Variant 3
//imgElem.setAttribute('src', 'http://localhost/ImageServer.asmx/GetImage');
//imgElem.style.display = 'none';
//imgElem.setAttribute('onload', 'this.style.display = "block"');
document.body.appendChild(imgElem);
}
</script>
<body onload="AddImage()">
</body>
</html>
For completeness here is the server side code, which is an old fashion web service that alternates between two images and adds a delay to show the lingering effect.
static int imgNumber = 2;
[WebMethod]
public void GetImage()
{
Thread.Sleep(2000); // Delay to see the effect of the lingering image
HttpContext.Current.Response.AppendHeader("Cache-Control", "private, max-age=0, s-maxage=0, no-cache, must-revalidate, proxy-revalidate");
imgNumber = imgNumber % 2 + 1;
string strPathPrefix = #"A:\Path\";
HttpContext.Current.Response.WriteFile(strPathPrefix + imgNumber + ".png");
}
Your "variant 2" method, wherein you generate a unique URL by appending a randomly generated number to the end is completely valid and is a widely used method of preventing caching.
I would highly recommend going with this rather than trying to fix the problem with cache control headers as they can be unreliable. Some CDN's even ignore caching headers in attempt to save bandwidth and such.
One of the application is loading few images using URL in TinyMCE Text area.
When page loads, momentarily it shows HTML source code of the textarea and then HTML Output gets displayed.
Sequence of events is mentioned below:
1] User Hits url www.testurlforexplaination.com
2] User request to pre-populate data in HTML form
3] HTML Form consists of Text Area, Tiny MCE Rich Text Area, Radio Buttons, Check Box and Buttons.
4] User Momentarily sees HTML Source code in Tiny MCE Text area (before complete page gets loaded)
5] Once page is completely loaded, user sees desired HTML output with pre-populated data.
Step#4 mentioned above confuses USER with the impression that some error occurred.
Is there any way to avoid momentary display of HTML source code in Tiny MCE Text Area?
if you have multiple tinymce editors, I believe you have multiple inits (for each textarea)
set initial property of the textarea linked to tiny mce to hidden (preserve the space)
<textarea id ="txtarea1"cols="20" rows="20" style="visibility:hidden;">
and when on load completed of the tinymce content, show it.
// Add an observer to the onLoadContent event using tinyMCE.init
tinyMCE.init({
...
elements :"txtarea1",
setup : function(tmced) {
tmced.onLoadContent.add(function(tmced, obj) {
$('.txtarea1').show();
});
}
});
I am using JTabbedPane with JPanel to display JTable on one tab and text, dropdown and jbutton on other tab.
First time it is working fine but if i minimize or switch screen to other application and come back to my application it display data correct but with a serious problem with tab change in JTabbedPane. Now tab screen goes to blue and don't display the data.(I hope data is there but it is not repainting or refreshing complete window).
Now with blue screen i do the same procedure and change tab in JTabbedPane it shows correct data.
I used repaint but it doesn't work.
Help needed to refresh window or tab correctly.
It may problem of Browser you are using jdic.dll. Try using any other browser to reload your tabbed pane.
I guess this "issue" is an evergreen. I assume, that most people stumble over this issue possibly when implementing JTabbedPane changes (removing and adding of tabs) in the wrong event-method:
For example, if you want to remove a tab and add a new one in the tabbed pane based on a selection in a JComboBox, you have to put your logic into an 'itemStateChanged'-event of the ItemListener added to this combo-box. If you put your tab-change-logic e.g. into an propertyChangeEvent (PropertyChangeListener), you are doing it all wrong and the timing is always messed up for repainting/refreshing tabbed pane UI elements!
If you use the right event-method, you don't even have to call setVisible, revalidate nor repaint. It will all work out perfectly.
Here's a simple example:
JComboBox<String> c_editor = new javax.swing.JComboBox<String>();
c_editor.setModel(new javax.swing.DefaultComboBoxModel<>(
new String[] { "CSV", "EXCEL", "HTML" }
));
c_editor.addItemListener(new java.awt.event.ItemListener() {
public void itemStateChanged(java.awt.event.ItemEvent evt) {
c_editorItemStateChanged(evt);
}
});
...
protected void c_editorItemStateChanged(ItemEvent evt) {
// get the value selected in the combo box
final String val = c_editor.getSelectedItem().toString();
if (tabbed_pane.getTabCount() > 1) {
// remove the panel which is at position 1
tabbed_pane.removeTabAt(1);
}
if (val.equals("CSV")) {
// add the panel for viewing CSV files
tabbed_pane.addTab("CSV Editor", p_csv);
} else if (val.equals("EXCEL")) {
// add the panel for viewing Excel files
tabbed_pane.addTab("Excel Editor", p_excel);
} else if (val.equals("HTML")) {
// add the panel for viewing HTML files
tabbed_pane.addTab("HTML Editor", p_html);
}
}
That's all, nothing else necessary - the UI will update itself. PS: This issue has nothing to do with browsers as suggested by the 'favoured' answer in this thread, it's all about Java Swing GUI's.