Databases
StackOverflow2013
Postsdbo
POStart animation in silverlight
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStart animation in silverlight
    text
    copied!<p>I have created a Silverlight Page which has two animations: one which is displayed when the page is opened and one which is displayed before closing the page. I also have another mainpage with a navigation frame that holds this pages. </p> <p>While clicking on the menu buttons the switching works fine. I have a page_loaded eventhandler which displays the first animation, but I have problem with the call to the "disappear animation". </p> <p>I did the following thing from the main page:</p> <pre><code>menuButtonClicked = (HyperlinkButton)sender; switch (menuButtonClicked.Name) { case "homeButton": { About aboutPage = (About)ContentFrame.Content; aboutPage.DisappearAnimation.Begin(); } break; case "aboutButton": { Home homePage = (Home)ContentFrame.Content; homePage.DisappearAnimation.Begin(); } break; } </code></pre> <p>but I get an error that the targetProperty can not be resolved. </p> <p>Here is how the animations are defined</p> <pre><code>&lt;Storyboard x:Name="DisappearAnimation"&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PageScrollViewer"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0"&gt; &lt;DiscreteObjectKeyFrame.Value&gt; &lt;Visibility&gt;Visible&lt;/Visibility&gt; &lt;/DiscreteObjectKeyFrame.Value&gt; &lt;/DiscreteObjectKeyFrame&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform) .(CompositeTransform.TranslateY)" Storyboard.TargetName="PageScrollViewer"&gt; &lt;EasingDoubleKeyFrame KeyTime="0" Value="0"/&gt; &lt;EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-14"/&gt; &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="442"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PageScrollViewer"&gt; &lt;EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/&gt; &lt;EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; </code></pre> <p>As far as I can see, I have set the targetProperty in the animation ... I have also tried to do it like</p> <pre><code>aboutPage.SetValue(Storyboard.TargetNameProperty, "PageScrollViewer"); </code></pre> <p>but it also doesn't work ... anyone know how I can call start an animation which is defined on another page</p> <p>EDIT: here is what I have done to solve the problem to make things a bit more clear. Home, About, Comet are the xaml pages which I display to the user and the ContentFrame is the navigationFrame which hosts the pages. </p> <p>The flipanimation just flips the navigation frame 360 degrees just to make it look a bit nicer:)</p> <pre><code>private void HomeButton_MouseLeftButtonDown(object sender, RoutedEventArgs e) { if (sender != null &amp;&amp; menuButtonClicked != (HyperlinkButton)sender) { ChangeMenuState(sender); ChangePage(currentPage); currentPage = CurrentPage.Home; } } </code></pre> <p>...</p> <pre><code>private void AboutButton_MouseLeftButtonDown (object sender, RoutedEventArgs e) { if (sender != null &amp;&amp; menuButtonClicked != (HyperlinkButton)sender) { ChangeMenuState(sender); ChangePage(currentPage); currentPage = CurrentPage.About; } } </code></pre> <p>...</p> <pre><code>private void ContactButton_MouseLeftButtonDown (object sender, RoutedEventArgs e) { if (sender != null &amp;&amp; menuButtonClicked != (HyperlinkButton)sender) { ChangeMenuState(sender); ChangePage(currentPage); currentPage = CurrentPage.Contact; } } </code></pre> <p>...</p> <pre><code>private void ChangePage(CurrentPage currentPage) { switch (currentPage) { case CurrentPage.Welcome: { ContentHolder.Visibility = Visibility.Visible; FlipAnimation.Stop(); FlipAnimation.SetValue(Storyboard.TargetNameProperty, "ContentHolder"); FlipAnimation.Begin(); } break; case CurrentPage.Home: { ContentHolder.Visibility = Visibility.Visible; Home homePage = (Home)ContentFrame.Content; homePage.DisappearAnimation.Begin(); homePage.DisappearAnimation.Completed += StopStoryboard; } break; case CurrentPage.About: { ContentHolder.Visibility = Visibility.Visible; About aboutPage = (About)ContentFrame.Content; aboutPage.DisappearAnimation.Begin(); aboutPage.DisappearAnimation.Completed += StopStoryboard; } break; case CurrentPage.Contact: { ContentHolder.Visibility = Visibility.Visible; Contact contactPage = (Contact)ContentFrame.Content; contactPage.DisappearAnimation.Begin(); contactPage.DisappearAnimation.Completed += StopStoryboard; } break; } } </code></pre> <p>...</p> <pre><code>private void ChangeMenuState(object sender) { VisualStateManager.GoToState(sender as HyperlinkButton, "ActiveLink", true); (sender as HyperlinkButton).Foreground = new SolidColorBrush(Colors.White); MouseEnterAnimation.Stop(); if (menuButtonClicked != null) { VisualStateManager.GoToState(menuButtonClicked, "InactiveLink", true); MouseLeaveAnimation.Stop(); MouseLeaveAnimation.SetValue(Storyboard.TargetNameProperty, menuButtonClicked.Name); MouseLeaveAnimation.Begin(); } menuButtonClicked = (HyperlinkButton)sender; } </code></pre> <p>... </p> <pre><code> private void StopStoryboard(object sender, EventArgs args) { Storyboard storyboard = (Storyboard)sender; storyboard.Stop(); FlipAnimation.Stop(); FlipAnimation.SetValue(Storyboard.TargetNameProperty, "ContentHolder"); FlipAnimation.Begin(); } </code></pre> <p>Now I just have to figure out why the disappear animation finishes in less the half a second... but the order in which the animatinos start (the present site disappears and the next starts it's appear animation) is ok</p> <p>hope this will help someone else</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload