locked
Extended Splash Page Text fade out effect

    Question

  • Hello,

    I created an extended splash page that will display an image, progress ring and text on the top and the bottom. I was able to get the text, image and ring done but the bottom text needs to be able to fade in and out on second intervals.

    I figured I would/could use blend to get the fade results but not sure how to get started since the splash needs to be on for at least 5 seconds all while showing the text fade in and out during the load time. (The text will display for example..."Loading...", "Creating Images", "Starting App".

    Please advise me on how to do this!




    • Edited by compuluv Monday, March 17, 2014 11:36 AM
    Monday, March 17, 2014 11:34 AM

Answers

  • Ok, I hope this will help you. As you are not using MVVM so I have written it in your choice of style.

    <Page
        x:Class="SampleApp1.ExtendedSpalshScreen"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SampleApp1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid Width="620" Height="345" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="10"/>
                    <RowDefinition Height="25"/>
                </Grid.RowDefinitions>
                <Image Grid.Row="0" Source="Assets/SplashScreen.png" />
                <ProgressBar x:Name="progressBar" Grid.Row="1" Minimum="0" Maximum="100" Width="400"/>
                <TextBlock x:Name="progressMessage" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" 
                           Padding="2" Style="{StaticResource TitleTextBlockStyle}" Text="Please wait" Foreground="White"/>
            </Grid>
        </Grid>
    </Page>
    using System.Diagnostics;
    using System.Threading.Tasks;
    using Windows.UI.Xaml.Controls;
    
    namespace SampleApp1
    {
        public sealed partial class ExtendedSpalshScreen : Page
        {
            private Task<bool> startAppInitializationTask;
            public ExtendedSpalshScreen()
            {
                this.InitializeComponent();
                startAppInitializationTask = startAppInitialization();
            }
    
            private async Task<bool> startAppInitialization()
            {
                bool result;
    
                try
                {
                    await Task.Delay(500);
    
                    progressMessage.Text = "Step 1 in progress...";
                    result = await step1();
                    progressBar.Value += 20;
    
                    progressMessage.Text = "Step 2 in progress...";
                    if (result)
                    {
                        result = await step2();
                        progressBar.Value += 20;
                    }
    
                    progressMessage.Text = "Step 3 in progress...";
                    if (result)
                    {
                        result = await step3();
                        progressBar.Value += 20;
                    }
    
                    progressMessage.Text = "Step 4 in progress...";
                    if (result)
                    {
                        result = await step4();
                        progressBar.Value += 20;
                    }
    
                    progressMessage.Text = "Step 5 in progress...";
                    if (result)
                    {
                        result = await step5();
                        progressBar.Value += 20;
                    }
                    progressMessage.Text = "Done!";
    
                    //Now you can navigate your home screen 
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
    
            private async Task<bool> step1()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
            private async Task<bool> step2()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
            private async Task<bool> step3()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
            private async Task<bool> step4()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
            private async Task<bool> step5()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
        }
    }
    


    This is just a sample to show you how to deal with Progress Bar and show a progress message.


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!


    Wednesday, March 19, 2014 11:27 AM

All replies

  • It does not look like you need fade effects here, rather you want to show progress message. If you create a notifying property in your ViewModel say ProgressMessage and bind it to your TextBlock

    <TextBlock Text="{Binding ProgressMessage}"/>
    And as you do things in your app, you can keep changing the value of ProgressMessage.


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Monday, March 17, 2014 2:26 PM
  • Thank you for the answer! But I am not using MVVM. Will this still work in a regular app?
    Monday, March 17, 2014 2:57 PM
  • Well in that case you can simply name the text block in XAML say progressMessage and then in code behind refer it to change text property with progress.

    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

    Monday, March 17, 2014 7:55 PM
  • @Vishal, I did some research and mostly found progress controls but no progress message. Could you provide an example of this or point me to the right location to see an example?
    Tuesday, March 18, 2014 1:46 AM
  • Ok, I hope this will help you. As you are not using MVVM so I have written it in your choice of style.

    <Page
        x:Class="SampleApp1.ExtendedSpalshScreen"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:SampleApp1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid Width="620" Height="345" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="10"/>
                    <RowDefinition Height="25"/>
                </Grid.RowDefinitions>
                <Image Grid.Row="0" Source="Assets/SplashScreen.png" />
                <ProgressBar x:Name="progressBar" Grid.Row="1" Minimum="0" Maximum="100" Width="400"/>
                <TextBlock x:Name="progressMessage" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" 
                           Padding="2" Style="{StaticResource TitleTextBlockStyle}" Text="Please wait" Foreground="White"/>
            </Grid>
        </Grid>
    </Page>
    using System.Diagnostics;
    using System.Threading.Tasks;
    using Windows.UI.Xaml.Controls;
    
    namespace SampleApp1
    {
        public sealed partial class ExtendedSpalshScreen : Page
        {
            private Task<bool> startAppInitializationTask;
            public ExtendedSpalshScreen()
            {
                this.InitializeComponent();
                startAppInitializationTask = startAppInitialization();
            }
    
            private async Task<bool> startAppInitialization()
            {
                bool result;
    
                try
                {
                    await Task.Delay(500);
    
                    progressMessage.Text = "Step 1 in progress...";
                    result = await step1();
                    progressBar.Value += 20;
    
                    progressMessage.Text = "Step 2 in progress...";
                    if (result)
                    {
                        result = await step2();
                        progressBar.Value += 20;
                    }
    
                    progressMessage.Text = "Step 3 in progress...";
                    if (result)
                    {
                        result = await step3();
                        progressBar.Value += 20;
                    }
    
                    progressMessage.Text = "Step 4 in progress...";
                    if (result)
                    {
                        result = await step4();
                        progressBar.Value += 20;
                    }
    
                    progressMessage.Text = "Step 5 in progress...";
                    if (result)
                    {
                        result = await step5();
                        progressBar.Value += 20;
                    }
                    progressMessage.Text = "Done!";
    
                    //Now you can navigate your home screen 
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
    
            private async Task<bool> step1()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
            private async Task<bool> step2()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
            private async Task<bool> step3()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
            private async Task<bool> step4()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
            private async Task<bool> step5()
            {
                bool result;
                try
                {
                    //This is just a dummy thing to get some delay
                    await Task.Delay(1000);
                    result = true;
                }
                catch (System.Exception error)
                {
                    //Do what you need to do here
                    Debug.WriteLine(error.Message);
                    result = false;
                }
    
                return result;
            }
        }
    }
    


    This is just a sample to show you how to deal with Progress Bar and show a progress message.


    -- Vishal Kaushik --

    Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!


    Wednesday, March 19, 2014 11:27 AM