WPF框架通过情节提要触发器

Question

I am quite new to C#/WPF in general, so it is quite possible I am missing something.

Is there a way to animate a Frame via a storyboard that will trigger on the Frame.Navigating event ? Most of the common ones I can choose from such as Frame.Loaded not the event I am after however.

edit: I wonder is a Custom RoutedEvent the best way to approach this?

When a user clicks a button the Frame.Navigate method is called and loads in a new Page.

What I would like to happen is...

• Button is clicked
• (key frame : 0.1s) - Frame fades from 100-0 opacity
• (key frame : 0.15s) - Frame moves off the canvas using a transform
• (key frame : 0.2s) - Frame moves back onto screen, opacity back to 100%
• Page is loaded

Answer 1

This will do it for you.

<Frame x:Name="Frm" Width="499" Height="248" Content="Frame"  Navigating="Frame_Navigating_1" BorderThickness="2" BorderBrush="#FF21BD9A">
    <Frame.RenderTransform>
        <TranslateTransform x:Name="TransTrfm" />
    </Frame.RenderTransform>
    <Frame.Resources>
        <Storyboard x:Key="SbKey">
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="Opacity">
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1.0"/>
                    <LinearDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                </DoubleAnimationUsingKeyFrames.KeyFrames>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.15" Storyboard.TargetProperty="X" Storyboard.TargetName="TransTrfm">
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                    <LinearDoubleKeyFrame  KeyTime="0:0:0" Value="0.0" />
                    <LinearDoubleKeyFrame  KeyTime="0:0:0.17" Value="-1000.0" />
                    <LinearDoubleKeyFrame  KeyTime="0:0:0.2" Value="0.0" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.35" Storyboard.TargetProperty="Opacity">
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1.0"/>
                </DoubleAnimationUsingKeyFrames.KeyFrames>
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>
    </Frame.Resources>
</Frame>

Code :

    Storyboard sb;
    private void Frame_Navigating(object sender, NavigatingCancelEventArgs e)
    {
        if (sb != null)
        {
            sb.Begin();
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        sb = (Storyboard)Frm.Resources["SbKey"];
        Storyboard.SetTargetName(sb, "Frm");

        Frm.Navigate("Page1.xaml");         
    }

You can also try using ControlStoryboardAction behavior, and ChangePropertyAction behavior to avoid code-behind.