locked
FadeInThemeAnimation not working

    Question

  • hello, i'm working on a windows phone app what would allow users to login to steam. when steam guard authorization is required, I want to show a content control and let the user enter the code. but I just can't get the fade in animation working. Here is my code
    <ContentControl Name="SteamGuardControl" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed">
                        <ContentControl.Resources>
                            <Storyboard x:Name="FadeInAnimation_SteamGuardControl">
                                <FadeInThemeAnimation TargetName="SteamGuardControl"/>
                            </Storyboard>
                        </ContentControl.Resources>
                        <StackPanel>
                            <TextBlock Name="SteamGuardTextBlock" Style="{StaticResource MessageDialogContentStyle}" TextWrapping="Wrap" Margin="0,8,0,0">
                        As an added account security measure, you’ll need to grant access to this device by entering the special code we’ve just sent to your email address at
                            </TextBlock>
                            <TextBox Name="SteamGuardTextBox" Width="100" HorizontalAlignment="Left" Margin="15,8,0,0"></TextBox>
                        </StackPanel>
                    </ContentControl>

    private void OnSteamGuardStart(object sender, string emailDomainName)
            {
                SteamGuardTextBlock.Text = "As an added account security measure, you’ll need to grant access to this device by entering the special code we’ve just sent to your email address at " + emailDomainName;
                SteamGuardControl.Opacity = 0;
                SteamGuardControl.Visibility = Windows.UI.Xaml.Visibility.Visible;
                FadeInAnimation_SteamGuardControl.Begin();
                IsLoginInFlight = false;
            }

    Tuesday, February 17, 2015 2:25 AM

Answers

  • Since you are modifying your opacity I would recommend using DoubleAnimation in place of FadeInAnimation. You can animate the opacity in your storyboard. You don't have to set the opacity in your code behind.

    - Code behind:

    private void OnSteamGuardStart(object sender, string emailDomainName)
    {
                SteamGuardTextBlock.Text = "As an added account security measure, you’ll need to grant access to this device by entering the special code we’ve just sent to your email address at " + emailDomainName;           
                SteamGuardControl.Visibility = Windows.UI.Xaml.Visibility.Visible;
                myDoubleAnimation.Begin();
                IsLoginInFlight = false;
    }

    - Xaml code:

    <Storyboard x:Name="myDoubleAnimation">
                        <DoubleAnimation
                              Storyboard.TargetName="SteamGuardControl"
                              Storyboard.TargetProperty="Opacity"
                              From="0.0" To="1.0" Duration="0:0:6"/>
    </Storyboard>

    Let me know if this helps.


    Abdulwahab Suleiman

    • Marked as answer by 冯竞超 Wednesday, February 18, 2015 7:40 AM
    Tuesday, February 17, 2015 10:41 PM
    Moderator

All replies

  • Since you are modifying your opacity I would recommend using DoubleAnimation in place of FadeInAnimation. You can animate the opacity in your storyboard. You don't have to set the opacity in your code behind.

    - Code behind:

    private void OnSteamGuardStart(object sender, string emailDomainName)
    {
                SteamGuardTextBlock.Text = "As an added account security measure, you’ll need to grant access to this device by entering the special code we’ve just sent to your email address at " + emailDomainName;           
                SteamGuardControl.Visibility = Windows.UI.Xaml.Visibility.Visible;
                myDoubleAnimation.Begin();
                IsLoginInFlight = false;
    }

    - Xaml code:

    <Storyboard x:Name="myDoubleAnimation">
                        <DoubleAnimation
                              Storyboard.TargetName="SteamGuardControl"
                              Storyboard.TargetProperty="Opacity"
                              From="0.0" To="1.0" Duration="0:0:6"/>
    </Storyboard>

    Let me know if this helps.


    Abdulwahab Suleiman

    • Marked as answer by 冯竞超 Wednesday, February 18, 2015 7:40 AM
    Tuesday, February 17, 2015 10:41 PM
    Moderator
  • thanks a lot Abdulwahab. I tried your code and it worked like a charm.

    But later I found that fade in animation may not be exactly the effect I need. and after reading this article I realized blend should be a better place to write animations

    https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn263220.aspx

    So.. here is my new FlyInAnimation and I think it'd be very helpful for those who want to add controls to the screen after page loaded. all you need to changed is x:Name and TargetName

    <Storyboard x:Name="FlyInAnimation_SteamGuardControl">
        		<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="SteamGuardControl">
        			<EasingDoubleKeyFrame KeyTime="0" Value="50">
        				<EasingDoubleKeyFrame.EasingFunction>
        					<CubicEase EasingMode="EaseOut"/>
        				</EasingDoubleKeyFrame.EasingFunction>
        			</EasingDoubleKeyFrame>
        			<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
        		</DoubleAnimationUsingKeyFrames>
        		<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SteamGuardControl">
        			<EasingDoubleKeyFrame KeyTime="0" Value="0">
        				<EasingDoubleKeyFrame.EasingFunction>
        					<CubicEase EasingMode="EaseOut"/>
        				</EasingDoubleKeyFrame.EasingFunction>
        			</EasingDoubleKeyFrame>
        			<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
        		</DoubleAnimationUsingKeyFrames>
        	</Storyboard>

    Wednesday, February 18, 2015 7:39 AM