none
画面の遷移でクロスフェードを行いたい。 RRS feed

  • 質問

  • VisualStudio2012、Blend for VisualStudio2012を使い開発を行っています。

    XAMLを使い画面を構築しているのですが、どうしてもPageの遷移でクロスフェードの実現方法がわかりません。

    フェードアウト、フェードインが順番に行われ同時に行えません。

    同時に行うにはどのように実装すればよいでしょうか?

    よろしくお願いいたします。

    2013年7月2日 5:35

回答

  • こんな?

    <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="200" Width="200">
        <Window.Resources>
            <Storyboard x:Key="crossFade"  Completed="DoubleAnimation_Completed">
                <ParallelTimeline>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                Storyboard.TargetName="backgroundFrame"
                                From="0" To="1" Duration="0:0:2" />
    
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                Storyboard.TargetName="mainFrame"
                                From="1" To="0" Duration="0:0:2"/>
                </ParallelTimeline>
    
            </Storyboard>
    
            <Page x:Key="1stPage">
                <Grid>
                    <Image Source="/WpfApplication1;component/Images/1.png" />
                </Grid>
            </Page>
    
            <Page x:Key="2ndPage">
                <Grid>
                    <Image Source="/WpfApplication1;component/Images/2.jpg" />
                </Grid>
            </Page>
        </Window.Resources>
        
        <DockPanel>
            <Button DockPanel.Dock="Top" Click="Button_Click" Content="START"/>
            <Grid>
                <Frame x:Name="mainFrame" NavigationUIVisibility="Hidden" 
                       Opacity="1" >
                </Frame>
                <Frame x:Name="backgroundFrame" NavigationUIVisibility="Hidden" 
                       Opacity="0" Navigated="backgroundFrame_Navigated">
                </Frame>
            </Grid>
        </DockPanel> 
    </Window>
    フェードアウトとフェードインを別のFrameにしてそれぞれを同時に透明度の変化をさせてます。
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    
    namespace WpfApplication1
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                this.mainFrame.Content = (Page)FindResource("1stPage");
            }
            bool flag = false;
            private void Button_Click(object sender, RoutedEventArgs e)
            {
    
                Page nextPage;
                if (flag)
                {
                    nextPage = (Page)FindResource("1stPage");
                }
                else
                {
                    nextPage = (Page)FindResource("2ndPage");
                }
                flag = !flag;
                this.backgroundFrame.Navigate(nextPage); //新しいページをバックグランドフレームに読み込み
            }
    
            private void backgroundFrame_Navigated(object sender, NavigationEventArgs e)
            {
                if (e.Content != null)
                {//新しいページが読み込めたらクロスフェード開始
                    var story = (System.Windows.Media.Animation.Storyboard)this.FindResource("crossFade");
                    story.Begin();
                }
            }
    
            private void DoubleAnimation_Completed(object sender, EventArgs e)
            {
                var story = (System.Windows.Media.Animation.Storyboard)this.FindResource("crossFade");
                story.Stop();
    
                //バックグランドフレームにあるページをメインフレームへ移す
                object content = backgroundFrame.Content;
                backgroundFrame.Content = null;
                mainFrame.Content = content;
    
                mainFrame.Opacity = 1;
                backgroundFrame.Opacity = 0;
            }
        }
    }
    


    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク しえる 2013年7月3日 7:02
    2013年7月2日 11:41

すべての返信

  • こんな?

    <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="200" Width="200">
        <Window.Resources>
            <Storyboard x:Key="crossFade"  Completed="DoubleAnimation_Completed">
                <ParallelTimeline>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                Storyboard.TargetName="backgroundFrame"
                                From="0" To="1" Duration="0:0:2" />
    
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                Storyboard.TargetName="mainFrame"
                                From="1" To="0" Duration="0:0:2"/>
                </ParallelTimeline>
    
            </Storyboard>
    
            <Page x:Key="1stPage">
                <Grid>
                    <Image Source="/WpfApplication1;component/Images/1.png" />
                </Grid>
            </Page>
    
            <Page x:Key="2ndPage">
                <Grid>
                    <Image Source="/WpfApplication1;component/Images/2.jpg" />
                </Grid>
            </Page>
        </Window.Resources>
        
        <DockPanel>
            <Button DockPanel.Dock="Top" Click="Button_Click" Content="START"/>
            <Grid>
                <Frame x:Name="mainFrame" NavigationUIVisibility="Hidden" 
                       Opacity="1" >
                </Frame>
                <Frame x:Name="backgroundFrame" NavigationUIVisibility="Hidden" 
                       Opacity="0" Navigated="backgroundFrame_Navigated">
                </Frame>
            </Grid>
        </DockPanel> 
    </Window>
    フェードアウトとフェードインを別のFrameにしてそれぞれを同時に透明度の変化をさせてます。
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    
    namespace WpfApplication1
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                this.mainFrame.Content = (Page)FindResource("1stPage");
            }
            bool flag = false;
            private void Button_Click(object sender, RoutedEventArgs e)
            {
    
                Page nextPage;
                if (flag)
                {
                    nextPage = (Page)FindResource("1stPage");
                }
                else
                {
                    nextPage = (Page)FindResource("2ndPage");
                }
                flag = !flag;
                this.backgroundFrame.Navigate(nextPage); //新しいページをバックグランドフレームに読み込み
            }
    
            private void backgroundFrame_Navigated(object sender, NavigationEventArgs e)
            {
                if (e.Content != null)
                {//新しいページが読み込めたらクロスフェード開始
                    var story = (System.Windows.Media.Animation.Storyboard)this.FindResource("crossFade");
                    story.Begin();
                }
            }
    
            private void DoubleAnimation_Completed(object sender, EventArgs e)
            {
                var story = (System.Windows.Media.Animation.Storyboard)this.FindResource("crossFade");
                story.Stop();
    
                //バックグランドフレームにあるページをメインフレームへ移す
                object content = backgroundFrame.Content;
                backgroundFrame.Content = null;
                mainFrame.Content = content;
    
                mainFrame.Opacity = 1;
                backgroundFrame.Opacity = 0;
            }
        }
    }
    


    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク しえる 2013年7月3日 7:02
    2013年7月2日 11:41
  • ありがとうございます!

    このコードで実現できました。

    2013年7月3日 7:04