Question Navigate to a new page after an animation completes.

DarkBox

New member
Joined
Oct 24, 2011
Messages
1
Programming Experience
Beginner
Hey, I am using Application.xaml to set up the style of a button that's going to be on a lot of the pages in my program. I've got it so that the button will animate an arrow inside the button when it's pressed AND the mouse is over the button.

What I want is for the button to navigate back a page if it is simply clicked, but go to a specific HOME page if it is pressed and held for 1.5 seconds.


This is my code (It's probably terrible D: )

VB.NET:
<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    x:Class="Application"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!-- Resources scoped at the Application level should be defined here. -->
        <Style x:Key="ButtonFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#F3F3F3" Offset="0"/>
            <GradientStop Color="#EBEBEB" Offset="0.5"/>
            <GradientStop Color="#DDDDDD" Offset="0.5"/>
            <GradientStop Color="#CDCDCD" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
        <Style x:Key="HomeButton" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="100"/>
            
            <Setter Property="Template">
                
                <Setter.Value>
                    
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true" ClipToBounds="True">
                                <Microsoft_Windows_Themes:ButtonChrome.Clip>
                                    <EllipseGeometry Center="50,50" RadiusX="49" RadiusY="49"/>
                                </Microsoft_Windows_Themes:ButtonChrome.Clip>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Microsoft_Windows_Themes:ButtonChrome>
                            <Ellipse Height="99" Width="99" Stroke="{TemplateBinding BorderBrush}"/>
                            <Path x:Name="ArrowPath" Fill="Black" Stroke="Black">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathGeometry.Figures>
                                            <PathFigureCollection>
                                                <PathFigure x:Name="ArrowStartPoint" IsClosed="True" StartPoint="11,50">
                                                    <PathFigure.Segments>
                                                        <PathSegmentCollection>
                                                            <LineSegment x:Name="TopTriPoint" Point="37,21" />
                                                            <LineSegment x:Name="TopTailStart" Point="37,37" />
                                                            <LineSegment x:Name="TopTailEnd" Point="84,37" />
                                                            <LineSegment x:Name="BotTailEnd" Point="84,63" />
                                                            <LineSegment x:Name="BotTailStart" Point="37,63" />
                                                            <LineSegment x:Name="BotTriPoint" Point="37,79" />
                                                        </PathSegmentCollection>
                                                    </PathFigure.Segments>
                                                </PathFigure>
                                            </PathFigureCollection>
                                        </PathGeometry.Figures>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                        </Grid>
                        
                        <ControlTemplate.Triggers>
                            
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"/>
                                    <Condition Property="IsPressed" Value="True"/>
                                </MultiTrigger.Conditions>
                                
                                <MultiTrigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            
                                            <PointAnimationUsingKeyFrames x:Name="ArrowStartPointAnimate" Storyboard.TargetName="ArrowStartPoint" Storyboard.TargetProperty="StartPoint"  Duration="0:0:1.5">
                                                <SplinePointKeyFrame KeySpline="0.7,0.0 1.0,1.0" KeyTime="0:0:1.5" Value="49.5,10" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="TopTriPointAnimate" Storyboard.TargetName="TopTriPoint" Storyboard.TargetProperty="Point"  Duration="0:0:1.5">
                                                <SplinePointKeyFrame KeySpline="0.7,0.0 1.0,1.0" KeyTime="0:0:1.5" Value="88,45" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="TopTailStartAnimate" Storyboard.TargetName="TopTailStart" Storyboard.TargetProperty="Point"  Duration="0:0:1.5">
                                                <SplinePointKeyFrame KeySpline="0.7,0.0 1.0,1.0" KeyTime="0:0:1.5" Value="74.25,45" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="TopTailEndAnimate" Storyboard.TargetName="TopTailEnd" Storyboard.TargetProperty="Point"  Duration="0:0:1.5">
                                                <SplinePointKeyFrame KeySpline="0.7,0.0 1.0,1.0" KeyTime="0:0:1.5" Value="74.25,81" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="BotTailEndAnimate" Storyboard.TargetName="BotTailEnd" Storyboard.TargetProperty="Point"  Duration="0:0:1.5">
                                                <SplinePointKeyFrame KeySpline="0.7,0.0 1.0,1.0" KeyTime="0:0:1.5" Value="24.75,81" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="BotTailStartAnimate" Storyboard.TargetName="BotTailStart" Storyboard.TargetProperty="Point"  Duration="0:0:1.5">
                                                <SplinePointKeyFrame KeySpline="0.7,0.0 1.0,1.0" KeyTime="0:0:1.5" Value="24.75,45" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="BotTriPointAnimate" Storyboard.TargetName="BotTriPoint" Storyboard.TargetProperty="Point"  Duration="0:0:1.5">
                                                <SplinePointKeyFrame KeySpline="0.7,0.0 1.0,1.0" KeyTime="0:0:1.5" Value="11,45" />
                                            </PointAnimationUsingKeyFrames>

                                            <ColorAnimationUsingKeyFrames x:Name="FillColourChange" Storyboard.TargetName="ArrowPath" Storyboard.TargetProperty="Fill.Color" Duration="0:0:1.5">
                                                <SplineColorKeyFrame KeySpline="0.9,0.0 0.91,0.5" KeyTime="0:0:1.5" Value="LightBlue" />
                                            </ColorAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiTrigger.EnterActions>
                                
                                <MultiTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>

                                            <PointAnimationUsingKeyFrames x:Name="ArrowStartPointRe" Storyboard.TargetName="ArrowStartPoint" Storyboard.TargetProperty="StartPoint"  Duration="0:0:1">
                                                <SplinePointKeyFrame KeySpline="0.25,0.0 0.75,1.0" KeyTime="0:0:1" Value="11,50" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="TopTriPointRe" Storyboard.TargetName="TopTriPoint" Storyboard.TargetProperty="Point"  Duration="0:0:1">
                                                <SplinePointKeyFrame KeySpline="0.25,0.0 0.75,1.0" KeyTime="0:0:1" Value="37,21" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="TopTailStartRe" Storyboard.TargetName="TopTailStart" Storyboard.TargetProperty="Point"  Duration="0:0:1">
                                                <SplinePointKeyFrame KeySpline="0.25,0.0 0.75,1.0" KeyTime="0:0:1" Value="37,37" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="TopTailEndRe" Storyboard.TargetName="TopTailEnd" Storyboard.TargetProperty="Point"  Duration="0:0:1">
                                                <SplinePointKeyFrame KeySpline="0.25,0.0 0.75,1.0" KeyTime="0:0:1" Value="84,37" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="BotTailEndRe" Storyboard.TargetName="BotTailEnd" Storyboard.TargetProperty="Point"  Duration="0:0:1">
                                                <SplinePointKeyFrame KeySpline="0.25,0.0 0.75,1.0" KeyTime="0:0:1" Value="84,63" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="BotTailStartRe" Storyboard.TargetName="BotTailStart" Storyboard.TargetProperty="Point"  Duration="0:0:1">
                                                <SplinePointKeyFrame KeySpline="0.25,0.0 0.75,1.0" KeyTime="0:0:1" Value="37,63" />
                                            </PointAnimationUsingKeyFrames>

                                            <PointAnimationUsingKeyFrames x:Name="BotTriPointRe" Storyboard.TargetName="BotTriPoint" Storyboard.TargetProperty="Point"  Duration="0:0:1">
                                                <SplinePointKeyFrame KeySpline="0.25,0.0 0.75,1.0" KeyTime="0:0:1" Value="37,79" />
                                            </PointAnimationUsingKeyFrames>

                                            <ColorAnimationUsingKeyFrames x:Name="FillColourRe" Storyboard.TargetName="ArrowPath" Storyboard.TargetProperty="Fill.Color" Duration="0:0:1">
                                                <SplineColorKeyFrame KeySpline="0.25,0.0 0.75,1.0" KeyTime="0:0:1" Value="Black" />
                                            </ColorAnimationUsingKeyFrames>


                                        </Storyboard>
                                    </BeginStoryboard>
                                </MultiTrigger.ExitActions>

                            </MultiTrigger>
                            
                            <Trigger Property="IsKeyboardFocused" Value="true">
                                <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                            </Trigger>
                            
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                            </Trigger>
                            
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="#ADADAD"/>
                            </Trigger>
                            
                        </ControlTemplate.Triggers>
                        
                    </ControlTemplate>
                    
                </Setter.Value>
                
            </Setter>
            
        </Style>
    </Application.Resources>
</Application>

What do I do? D:

What I have tried doing is the following

<MultiTrigger.EnterActions> <BeginStoryboard> <Storyboard Completed="ArrowTransformComplete"> ... </Storyboard> </BeginStoryboard> </MultiTrigger.EnterActions>


and in the code behind (Application.xaml.vb)

Private Sub ArrowTransformComplete(ByVal sender As Object, ByVal e As EventArgs)
Dim HomePanda As New HomePanda()
Me.NavigationService.Navigate(HomePanda)
End Sub


However, it tells me that
'NavigationService' is not a member of 'WpfApplication1.Application'.
I'm assuming this is because Application.xaml isn't in a navigation window like the rest of my program. Putting this code into a page with the button causes the error
'ArrowTransformComplete' is not a member of 'WpfApplication1.Application'. in file Application.g.vb
When you attempt to debug the program.
Will I have to add code to every single page of my application or is there some way to keep it in the style/control template? :s
 
Last edited:
Back
Top