News Ticker

03-16-2009 12:15 PM |

Hi there,

I am creating an XML news ticker and all is going well but i am having problems with a specific part.  I am using the scroll control to move through my items but what i want to do it fade out all my items , then move them to the next item then fade back in. 

 I have created two states for fade in and fade out which work fine with a  mouse enter and leave event, but if i programaticaaly do the fade e.g.

        void dt_Tick(object sender, EventArgs e)
        {            
            FadeOutAllItems();
            NextNewsItem();
            FadeInAllItems();
        }

        private void NextNewsItem()
        {
            if (Pause != true)
            {
                if ((_scrollPosition + mainView.ScrollableHeight) > mainView.ScrollableHeight)
                {
                    mainView.ScrollToVerticalOffset(0);
                    _scrollPosition = 0;
                }
                else
                {

                    _scrollPosition += 106;
                    mainView.ScrollToVerticalOffset(_scrollPosition);

                }
            }
        }

        public void FadeOutAllItems()
        {
            foreach (UserControl el in imagePanel.Children)
            {
                VisualStateManager.GoToState(el, "Out", true);               
            }
        }

        public void FadeInAllItems()
        {
            foreach (UserControl el in imagePanel.Children)
            {
                VisualStateManager.GoToState(el, "In", true);
            }
        }

 Obvisouly though because it is being completed so fast the fading is not visible at all.  How can i start one state..and only do the change when the state is complete then do the change and then do the other state?

 Hope this makes sense?

Chris

Re: News Ticker

03-16-2009 10:54 PM |

Hi! I would use a Storyboard for this that modified the Opacity property from a DoubleAnimation. You can then specify a Duration for the fade, as well as play around with other interesting effects that would bring visual interest to the application.

Re: Re: News Ticker

03-17-2009 5:37 AM |

 errr...i have done the animation..the problem i am having is that because i am calling the changes programatically they complete immediately and do not "fade out" or "fade in".  I need a way to delay the code running until the transitions have completed...

Re: Re: Re: News Ticker

03-17-2009 11:36 AM |

*bump*

Re: Re: Re: Re: News Ticker

03-18-2009 7:12 AM |

 CAn anyone help me with this problem please..this must be possible!

Re: News Ticker

03-30-2009 10:18 AM |

I had this same issue on a control I was making. What I did was did a linq query on the VisualStateManager to get the VisualState I needed. I then attached the Storyboard_Completed event to that VisualState so when one animation finished, it would trigger an event and I could process what I needed to do and fire off another animation. I needed to move a control between two stackpanels. Sample code is below.

 private void AttachEvent()
    {

      var query = from VisualState state in
                    (from VisualStateGroup stateGroup in VisualStateManager.GetVisualStateGroups(this.LayoutRoot)
                     where stateGroup.Name == "LoadedUnloaded"
                     select stateGroup).First().States
                  where state.Name == "Unloaded"
                  select state;

      Storyboard sb = query.First().Storyboard;
      
      sb.Completed += new EventHandler(Storyboard_Completed);
    }

    void Storyboard_Completed(object sender, EventArgs e)
    {
      StackPanel parent = (StackPanel)this.Parent;

      parent.Children.Remove(this);


      if (_root == null)
      {
        _root = Application.Current.RootVisual as Page;

        Rights2Roles r2rPage = (Rights2Roles)_root.FindName("r2rPage");

        _spAvailable = (StackPanel)r2rPage.FindName("spAvailable");
        _spCurrent = (StackPanel)r2rPage.FindName("spCurrent");
      }

      if (parent != _spAvailable)
      {
        _spAvailable.Children.Add(this);
      }
      else
      {
        _spCurrent.Children.Add(this);
      }

      VisualStateManager.GoToState(this, "Loaded", true);
    }