none
如何为程序运行后第一页面Mainpage.xaml添加一个淡出效果? RRS feed

  • 问题

  • 如何为程序运行后第一页面Mainpage.xaml添加一个淡出效果?就是整个页面从无到有出现。大概是在XAML页面写一些动画?请示例!谢谢!

    开发环境VS2013,WP8.1更新1SDK,silverlight8.1,C#


    2015年1月4日 13:40

答案

  • 你想要的是這樣的效果 ? (我刻意把時間拉到五秒, 感覺比較明顯)

    <phone:PhoneApplicationPage
        x:Class="PhoneApp1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource PhoneForegroundBrush}"
        SupportedOrientations="Portrait" Orientation="Portrait"
        shell:SystemTray.IsVisible="True">
    	<phone:PhoneApplicationPage.Resources>
    		<Storyboard x:Name="Storyboard1">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0">
    					<EasingDoubleKeyFrame.EasingFunction>
    						<BackEase EasingMode="EaseInOut"/>
    					</EasingDoubleKeyFrame.EasingFunction>
    				</EasingDoubleKeyFrame>
    				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</phone:PhoneApplicationPage.Resources>
    
        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!-- LOCALIZATION NOTE:
                To localize the displayed strings copy their values to appropriately named
                keys in the app's neutral language resource file (AppResources.resx) then
                replace the hard-coded text value between the attributes' quotation marks
                with the binding clause whose path points to that string name.
    
                For example:
    
                    Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
    
                This binding points to the template's string resource named "ApplicationTitle".
    
                Adding supported languages in the Project Properties tab will create a
                new resx file per language that can carry the translated values of your
                UI strings. The binding in these examples will cause the value of the
                attributes to be drawn from the .resx file that matches the
                CurrentUICulture of the app at run time.
             -->
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
                <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Blue" >
              
    
            </Grid>
    
            <!--Uncomment to see an alignment grid to help ensure your controls are
                aligned on common boundaries.  The image has a top margin of -32px to
                account for the System Tray. Set this to 0 (or remove the margin altogether)
                if the System Tray is hidden.
    
                Before shipping remove this XAML and the image itself.-->
            <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
        </Grid>
    
    </phone:PhoneApplicationPage>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Shell;
    using PhoneApp1.Resources;
    
    namespace PhoneApp1
    {
        public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
    
            }
    
           protected override void OnNavigatedTo(NavigationEventArgs e)
           {
               Storyboard1.Begin();
           }
        }
    }


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2015年1月20日 22:50

全部回复

  • 你好,

    我们可以为Page指定Transitions, 比如:

    <Page.Transitions>
            <TransitionCollection>
                <PaneThemeTransition Edge="Right" />
            </TransitionCollection>
        </Page.Transitions>

    具体可见此文档:http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/hh452703.aspx


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2015年1月5日 9:59
    版主
  • 您好,在windows phone silverlight 8.1中,在mainpage.xaml页中添加<Page.Transitions></Page.Transitions>,提示未在Page中找到可附加的属性Transitions。您给出的文档链接也是空的。可否请给出进一步示例?thanks!!
    2015年1月5日 14:01
  • 您好,在windows phone silverlight 8.1中,在mainpage.xaml页中添加<Page.Transitions></Page.Transitions>,提示未在Page中找到可附加的属性Transitions。您给出的文档链接也是空的。可否请给出进一步示例?thanks!!

    你好,

    因为一开始没有看到是WP Silverlight 8.1项目,所以提供的是Runtime的解决方案。

    对于WP SL 8.1, 我们可以使用Windows Phone Toolkit, 你可以在Nuget中搜索到:https://www.nuget.org/packages/WPtoolkit

    后台:

    RootFrame = new TransitionFrame();

    XAML:

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

    ......

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn" />
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn" />
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut" />
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut" />
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2015年1月6日 9:29
    版主
  • 谢谢解答,您给出的是一个过渡效果,能够使程序启动时出现一个翻转的效果。我还是想要一个页面从无慢慢到有的这样的一个特效。
    2015年1月7日 9:17
  • 你想要的是這樣的效果 ? (我刻意把時間拉到五秒, 感覺比較明顯)

    <phone:PhoneApplicationPage
        x:Class="PhoneApp1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource PhoneForegroundBrush}"
        SupportedOrientations="Portrait" Orientation="Portrait"
        shell:SystemTray.IsVisible="True">
    	<phone:PhoneApplicationPage.Resources>
    		<Storyboard x:Name="Storyboard1">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0">
    					<EasingDoubleKeyFrame.EasingFunction>
    						<BackEase EasingMode="EaseInOut"/>
    					</EasingDoubleKeyFrame.EasingFunction>
    				</EasingDoubleKeyFrame>
    				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</phone:PhoneApplicationPage.Resources>
    
        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!-- LOCALIZATION NOTE:
                To localize the displayed strings copy their values to appropriately named
                keys in the app's neutral language resource file (AppResources.resx) then
                replace the hard-coded text value between the attributes' quotation marks
                with the binding clause whose path points to that string name.
    
                For example:
    
                    Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
    
                This binding points to the template's string resource named "ApplicationTitle".
    
                Adding supported languages in the Project Properties tab will create a
                new resx file per language that can carry the translated values of your
                UI strings. The binding in these examples will cause the value of the
                attributes to be drawn from the .resx file that matches the
                CurrentUICulture of the app at run time.
             -->
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
                <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Background="Blue" >
              
    
            </Grid>
    
            <!--Uncomment to see an alignment grid to help ensure your controls are
                aligned on common boundaries.  The image has a top margin of -32px to
                account for the System Tray. Set this to 0 (or remove the margin altogether)
                if the System Tray is hidden.
    
                Before shipping remove this XAML and the image itself.-->
            <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
        </Grid>
    
    </phone:PhoneApplicationPage>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Shell;
    using PhoneApp1.Resources;
    
    namespace PhoneApp1
    {
        public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
    
            }
    
           protected override void OnNavigatedTo(NavigationEventArgs e)
           {
               Storyboard1.Begin();
           }
        }
    }


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2015年1月20日 22:50