Skip to main content
Home Forums Silverlight Design Designing with Silverlight Page Turn Animation
8 replies. Latest Post by vraopolisetti on June 26, 2008.
(0)
cjhutchings
Member
79 points
85 Posts
06-06-2008 5:09 PM |
Hi, I'm working on an interactive style magazine, like the page turn example in the community gallery. Is it possible, to have animations play on a page? For example, you turn the page and the text fades in on the left page while a graph animates on the right page?
SteveWong
Contributor
6343 points
1,281 Posts
06-07-2008 8:31 AM |
I think you can do that using a Grid... instead of image on each page
using a grid to store those items into a page
You may try it and let me know if it works or not
06-09-2008 12:57 PM |
Thanks Steve. I'll try this out and let you know.
06-09-2008 7:05 PM |
So, I tried what I could, messing around with stuff, reading a bunch of stuff, but I'm just not getting it. Probably because I don't really know any coding (but I am trying to learn).
I'm trying to use the page turn that came with the SDK, here's the page generator .js script -
PageGenerator = function(numPages) { this.numPages = numPages; this.resourceArray = new Array(); this.resourceArray[this.resourceArray.length]= "assets/logo_name.png"; this.resourceArray[this.resourceArray.length]= "assets/SilverlightBackgroundLight.jpg";
for (var i=5; i<=this.numPages; i++){ this.resourceArray[this.resourceArray.length] = "assets/page" + getTwoDigitInt(i) + ".xaml"; } this.resourceArray[this.resourceArray.length]= "assets/logo.png";}
PageGenerator.prototype.getPageString = function(pageNumber, isThumbnail){ var retStr = ""; if (pageNumber < 0) { return retStr; } retStr = "<Canvas>"; retStr += " <Image Height='570' Width='420' Source='assets/page"+getTwoDigitInt(pageNumber)+".xaml'/>"; if ((pageNumber % 2) == 1) { retStr += " <Path Data='M 420,570 h -420 v -570 h 420' Stroke='White' StrokeThickness='15'/>"; } else { retStr += " <Path Data='M 0,0 h 420 v 570 h -420' Stroke='White' StrokeThickness='15'/>"; }
retStr += "</Canvas>"; return retStr;}
Originally it uses jpegs for the pages, and when I call for ".jpg" instead of what I changed in this code to ".xaml" it works fine. I'm not sure if I'm supposed to call for a silverlight object, or really, if I am, how to go about doing that. Any help is much appreciated.
Also, here's the code for the simple page XAML files.
<
xmlns="http://schemas.microsoft.com/client/2007"
</
06-10-2008 8:18 AM |
I thing it should be something like this in C# but I actually dont know what should be in js
It is clear that your XAML is not an image, so we should load it as a Canvas not a UserControl
UIControl control = XamlReader.Load(XAMLStringForTheControl) as UIControl;
Let say that is an Canvas with many items and Resources inside
You should load it by System.IO to a variable string let say a string called xamlstring
Canvas p1 = XamlReader.Load(xamlstring) as Canvas;
and that probably not an image but a canvas.
you should set the canvas with name PageContent be
PageContent = p1;
06-10-2008 1:20 PM |
Thanks again Steve, I'll see what I can do about this, although I know absolutely nothing about C#.
At the same time, I'll post this question in the Programming with JS forum, to see if there's a javascript programmer that knows the solution here also.
aitran131
2 points
1 Posts
06-19-2008 11:43 AM |
Do you have a Page turn sample in Silverlight 2.0 web site? Please post it, I really need it now.
Thank you very much
Harlequin
198 points
146 Posts
06-24-2008 8:32 PM |
Ditto. Without all the JavaScript. Should be able to drive this whole thing with C# one would think.
vraopoli...
8 points
4 Posts
06-26-2008 3:49 PM |
aitran131: Do you have a Page turn sample in Silverlight 2.0 web site? Please post it, I really need it now. Thank you very much
Mitsu had ported his WPF Page trun to Silverlight Beta 2. It is working alright, but I found one issue with it. It's throwing an exception randomly when turning pages. It is a com exception that is originating in the ItemsControl. I have put in an issue on code plex.
http://www.codeplex.com/wpfbookcontrol
Link to his blog (Silverlight) : http://blogs.msdn.com/mitsu/archive/2008/06/10/wpf-and-silverlight-bookcontrols-source-code-available.aspx
Venkat Polisetti
Page Turn Animation