Databases
StackOverflow2013
Postsdbo
POTrigger animation inside listbox datatemplate from viewmodel using MVVMLight
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrigger animation inside listbox datatemplate from viewmodel using MVVMLight
    text
    copied!<p>To learn WP7 i'm making a simple soundboard application.</p> <p>This is my code. Please ask if i accidentally left something out in my tries to keep things simple.</p> <p>MainViewModel contains this collection</p> <pre><code>public ObservableCollection&lt;SoundViewModel&gt; Sounds { get; private set; } </code></pre> <p>The soundViewModel contains these properties, they are both notifying any property changes</p> <pre><code>public string FileName public string Name </code></pre> <p>Xaml / View contains a listbox bound to the Sounds collection on the viewmodel</p> <pre><code>&lt;ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Sounds}"&gt; &lt;ListBox.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;Button Content="Play" CommandParameter="{Binding FileName}" Command="{Binding DataContext.PlaySound, ElementName=FirstListBox}" /&gt; &lt;es:Arc x:Name="arc" ..bla bla attributes. /&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; </code></pre> <p>When i click the button, the parameter / filename is used to located the file and invoke the following method.</p> <p>This method is enclosed in a RelayCommand and bound to the button in the datatemplate</p> <pre><code> private void PlaySound( string filename ) { Stream stream = TitleContainer.OpenStream(filename + ".wav"); SoundEffect effect = SoundEffect.FromStream(stream); PlayAnimation message = new PlayAnimation(effect.Duration); Messenger.Default.Send&lt;PlayAnimation&gt;(message); FrameworkDispatcher.Update(); effect.Play(); } </code></pre> <p>This works great.</p> <p>Now i want a small animation playing while the sound is playing. I'm thinking that i will just pass the length of the soundclip to the animation and then start it.</p> <p>The messenger class sends a message (in the PlaySound method, above), and this code wires it up to a method</p> <pre><code> ------ View / Xaml Constructor ------ Messenger.Default.Register&lt;PlayAnimation&gt;(this, ( action ) =&gt; PlayAnimation(action)); ------ method PlayAnimation below ------ private void PlayAnimation(PlayAnimation parameter) { //Magic code starting the animation in the datatemplate of the listbox.. } </code></pre> <p>But i'm not exactly sure how i can start the animation.</p> <p>The storyboard is a resource to the listbox, and the targetElement is the Arc element. So the animation is simply the arc element's startAngle, and is just there to illustrate that a sound i currently playing, and how long the sound duration is.</p> <p>Somehow i need to get a hold of the storyboard, but since the targetElement is inside a data-template, how will i know how to play the correct animation. That is if i'm even able to get reference to the storyboard?</p> <p>Thanks in advance! Please ask if there is anything</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