how to call an animation in mainpage.xaml from log

Question

I am making a Silverlight Application using expression Blend 4.0. I have mainpage.xaml and I've given the user control (loginpage.xaml) on it. Then I have the login button in user control (loginpage.xaml). I have prepared the animation also on the mainpage.xaml, so that when the user click the login button, then the animation is started. I have no idea what should the command I give in the login button so that the animation will start when the user click it. or would you like to give another suggestion? Any helps would be very helpful for me. Thanks. I am using xaml and c#.

Answer 1

Here's a nice approach:

Your view could resemble this (notice the data context being decoratively set to your view model and the storyboard property on it being set to the static resource storyboard):

<UserControl x:Class="SilverlightApplication2.MainPage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:SilverlightApplication2"
         mc:Ignorable="d"
         d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
    <Storyboard x:Name="MyStoryboard">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="firstGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<UserControl.DataContext>
    <local:My_ViewModel MyStoryboard="{StaticResource MyStoryboard}" />
</UserControl.DataContext>
<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel>
    <Grid x:Name="firstGrid" Height="100" Width="100" Background="Red" />
    <Button x:Name="firstButton" Content="Click Me" Click="firstButton_Click" Height="100" Width="100" />
    </StackPanel>
</Grid>

Your view model would resemble this:

    public class My_ViewModel
{
    public Storyboard MyStoryboard { get; set; }
}

And in the code-behind of your view you could have something like this:

    public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    private My_ViewModel _viewModel
    {
        get { return this.DataContext as My_ViewModel; }
    }

    private void firstButton_Click(object sender, RoutedEventArgs e)
    {
        this._viewModel.MyStoryboard.Begin();
    }
}

Hope this helps!