Note that there are some explanatory texts on larger screens.

plurals
  1. PORun code after the animation is finished
    primarykey
    data
    text
    <p>I am using MVVM Light. I have created a window that looks like this: </p> <pre><code>&lt;Window Name="MainWindow" ...&gt; &lt;Window.Resources&gt; ... &lt;viewModels:MainViewModel x:Key="mainVM" /&gt; ... &lt;BooleanToVisibilityConverter x:Key="visConv" /&gt; ... &lt;/Window.Resources&gt; &lt;Grid DataContext="{StaticResource mainVM}&gt; ... &lt;Button Command="{Binding RaiseMyControl}" /&gt; ... &lt;my:MyUserControl Visibility="{Binding MyControlVisible, Converter={StaticResource visConv}}" /&gt; &lt;/Grid&gt; &lt;/Window&gt; </code></pre> <p>So basically, the <code>MainViewModel</code> is a view model class for the window. It contains: </p> <ul> <li><code>bool MyControlVisible</code> property which is binded to <code>MyUserControl</code>'s <code>Visibility</code> property</li> <li><code>RelayCommand RaiseMyControl</code> command which purpose is to set the value of the <code>MyControlVisible</code> property to <code>true</code> (default is false). </li> </ul> <p>Clicking the button in the window results in the appearance of the <code>MyUserControl</code> - simple. </p> <p><code>MyUserControl</code> user control looks like this: </p> <pre><code>&lt;UserControl ...&gt; &lt;UserControl.Resources&gt; ... &lt;viewModels:MyUserControlViewModel x:Key="userControlVM" /&gt; ... &lt;/UserControl.Resources&gt; &lt;Grid DataContext="{StaticResource userControlVM}&gt; ... &lt;Border Width="200" Height="100" Background="Red"&gt; &lt;TextBlock Text="{Binding MyUserControlText}" /&gt; &lt;/Border&gt; &lt;!-- This border has a DataTrigger bound to "bool Fading" property of the view model. When Fading is true, the border fades in through an animation. When it is false, the border fades out. --&gt; ... &lt;Button Command="{Binding CloseMyControl}" /&gt; &lt;/Grid&gt; &lt;/UserControl&gt; </code></pre> <p>Again, very simple. The <code>MyUserControlViewModel</code> is a view model class for the user control. It contains: </p> <ul> <li><code>string MyUserControlText</code> property which is binded to <code>TextBlock</code>'s <code>Text</code> property</li> <li><code>bool Fading</code> property which is binded to border's data template, and is used to make the border fade in or out</li> <li><code>RelayCommand CloseMyControl</code> command which does two things: 1. It sets the <code>Fading</code> property to <code>false</code> to make the border fade out, and 2. it sets the <code>Visibility</code> property of the user control to <code>Collapsed</code>. </li> </ul> <p>Here's the problem: as soon as the <code>Visibility</code> is set to <code>Collapsed</code>, the user control disappears. I need it to fade out first and then to disappear afterwards. How can I make it happen? Thanks. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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