Hi I was using the sample found here for fading in a background image. Everything is working fine its just that before the fade in animation starts the image shows briefly then the animation starts.
No Background => Full Image => Image Disappears => Animation Starts =>
Full Image
Note I did add the exact same code as him but I still get this result. I did notice that his sample was written for WP7 7.0 which I'm guessing is the reason it's not loading exactly like the example he provided.
Has anyone found a workaround for this?
Make your background initially hidden in xaml or by code in page constructor. Animation starts after page loaded, so background is shown from application start to Loaded event
I bet you have opacity for image set to 1, and when it's loaded then you start showing it - resulting in bizarre flickering. Set opacity to 0 in xaml and then run your Storyboard (that animates opacity from 0 to 1).
Well even though it takes about a second and a half extra to load, I finally got it to stop blinking. Basically I would save the file to isolated storage, and then load the file from isolated storage instead of loading the image directly to the background after it finished downloading.
I got the idea based on the fact that the sample of loading the background using a local image worked perfectly.
Like I said it takes a little longer to download because of the saving and loading from isolated storage, but it works well.
Related
My Xamarin app has a grid layout that contains a lot of images & image buttons. All images have property Aspect="Fill", the problem is when I open the app, the app took a few seconds to resize the images before it properly fill the grid, it looks bad. So to hide it, I put a full-screen image on top of all the images, the idea is to hide the ugly resizing until all the images done resizing.
I've tried wait for x seconds like await System.Threading.Tasks.Task.Delay(1000); but it isn't good for many reasons: e.g if the init time is longer than Task.Delay(1000) then it doesn't work at all.
So Is there any way I can check if Xamarin's UI has done initialize?
I have a trigger that changes the background of a div to an animated gif
I would like the javascript to force the image to animate again every time it is set as the background, however it currently only loops once and then displays the last frame after that.
Any ideas?
I tried adding ?v=1 but it seems that that causes a delay as the image loads again. I would prefer to have the image saved in cache but trigger the animation to restart
In our WinRT app, we have provided image as a background to grid and buttons through XAML.
We observed that images taking long time to load, app showing only other text controls (like TextBlock) first, then after some duration, our images loaded. Till the time we only see text controls in page.
We are setting background as below
<ImageBrush ImageSource="ms-appx:////Images/image.png"/>
Please let me know, what can we do to resolve this issue.
Thanks.
You can
reduce the resolution of the image
wait for it to load before you show the page - either by starting that earlier somehow or by showing the page completely black and, say, fading in when the image loads
use a lower resolution image or other asset until the image loads
not use that image at all
I have a hunch that if the image source gets set early enough - WinRT will wait for a short time (a fraction of a second) before it shows a new page to give the image a chance to load before it starts running transition animations etc., so lowering the image resolution altogether or using a lower resolution before a higher resolution one loads is one approach.
one more option is to have a background be outside of the root frame - e.g. modify App.xaml.cs to have a grid as root visual and put the background image and the frame inside of it so you can change the image at any time.
This is a weird behaviour,
However you can try to opt for images with smaller size/resolution to optimize rendering time.
Also, try to set the background image in the Page's constructor - Since, Microsoft may(I am not sure though) handle XAML Parsing via Async Operations
Instead of ImageBrush try to use regular Image with CashMode property set to "BitmapCache":
<Grid>
<Image Source="ms-appx:////Images/image.png"
CacheMode="BitmapCache" />
<!-- Your other content above background image -->
</Grid>
I'm having issues with all the animations on the page lagging when I choose to display this picture. I have tried displaying it with fadeIn, visibility, animate:opacity, display:block, and no matter which way I reveal it still causes the browser to choke. There has to be a way around this. (I've also tried preloading the image and it makes no difference!)
Is it just the size of the image?
http://jsfiddle.net/ZJpmT/2/
I suspect it is the image size. Doing a quick test showed that a fadeIn with a duration of 5 seconds, could be shown, but using a duration of 1 second wouldn't show any fade effect at all, but just show the the image at once.
Animating an image which is 1MB in size isn't what you want to do. If you really need this image to be that large, try to add a background to each frame, which matches the pages background and save it as JPG. That could reduce the size a bit, but it's not guaranteed that it will stop the browser from choking.
It's not possible to set transparent background for WebBrowser of WP7. To make impression of transparent background I want to do the following workaround. I want:
To find a position and size of WebBrowser on the page.
To get page's background image.
Crop it with values what I found on step 1.
To save result in IsolatedStorage
To parse HTML and place <body background="RESULTBACKGROUND">
MyWebBrowser.NavigateToString(NewHtmlString);
I think this should be a workaround of transparent background and should work.
For now I am trying just to place any .jpg image (let's say test.jpg) on step 5.
But fail. I have "Build Action" property of file set to "Content". It is placed in the root of the project. And <body background="test.jpg"> not working. Back of the WebBrowser is still white.
What I am doing wrong?
UPD:
Step 5 is solved.
2Claus: No! Not only from web. I saved both html file and image file to IsolatedStorage and WebBrowser can show image as a backgroud.
Now the problem is that background cannot be fixed. I tried many differrent things with styles. I also tried to add a fixed div behind my text. Nothing works. The picture is always scrolling with a text. I tried to add onscroll event and pass it scrolled value to move the div in an opposite direction, but div is glued to the page :(
Any ideas?
So assuming you're talking about the WebBrowser control, you're forgetting that the HTML only can refer to urls on the world wide web.
So either you need to host your background images on a website, or you need to inject a CSS style that sets the background to either white or black (the two default background-colours of the platform).
For WebBrowser, You don't actually have to save it to the ISO to make changes on the page. You can load it navigate to it normally, and then use InvokeScript to make the changes via custom JS code. It can be a little tricky though, as you will probably need to heavily rely on the eval and stringization. The problem mentioned by Claus is still there - but you need to do some experiments. With the Mango release and SDK 7.1+, the platform support IsoltatedStorage imagesources in the form of is://path/file - maybe - maybe - maybe squared - the webbrowser's renderer udnerstands them too - then setting your bkg's url to such would work. I doubt though, as it could be seen as some minor security breach, etc
I now bumped into the same background fixed image problem. For someone wandering here I solved it placing content into a fixed-height container (div) therefore the container contents is being scrolled and not the html page, leaving background picture "fixed".
body
{
background-image:url('...');
background-position:-20px -150px;
background-repeat:no-repeat;
background-attachment:fixed;
}
div
{
height:300px;
overflow:scroll;
}
Of course background-position and div height is set specifically for a WebBrowser position in page and it's size.