Question

I’m trying to make an animated splash screen for my app. I have my MainPage where I show a Popup which has an animation and a textblock. I’d like to change the text of my textblock to show the status of the loading, but I can’t change it. Any ideas?

Mainpage code

namespace animatedsplash
{
    public partial class MainPage : PhoneApplicationPage
    {
        BackgroundWorker preloader;
        Popup splashPop;

        public MainPage()
        {
            InitializeComponent();
            splashPop = new Popup(){IsOpen = true, Child = new Splash() };
            preloader = new BackgroundWorker();
            RunPreloader();
        }

        private void RunPreloader()
        {
            preloader.DoWork += ((s, args) => {
                  Thread.Sleep(10000);
                  });

            preloader.RunWorkerCompleted += ((s,args) => 
            {
                this.Dispatcher.BeginInvoke(()=> { this.splashPop.IsOpen = false; });
            });

            preloader.RunWorkerAsync();
        }
    }
}

Splash xaml

<phone:PhoneApplicationPage 
    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"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
    xmlns:local="clr-namespace:animatedsplash"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    x:Class="animatedsplash.Splash"
    Orientation="Portrait"
    shell:SystemTray.IsVisible="False">
    <phone:PhoneApplicationPage.Resources>

        <Storyboard x:Name="load">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="image">
                <EasingDoubleKeyFrame KeyTime="0" Value="-180"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="180"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

    <phone:PhoneApplicationPage.FontFamily>
        <StaticResource ResourceKey="PhoneFontFamilyNormal"/>
    </phone:PhoneApplicationPage.FontFamily>
    <phone:PhoneApplicationPage.FontSize>
        <StaticResource ResourceKey="PhoneFontSizeNormal"/>
    </phone:PhoneApplicationPage.FontSize>
    <phone:PhoneApplicationPage.Foreground>
        <StaticResource ResourceKey="PhoneForegroundBrush"/>
    </phone:PhoneApplicationPage.Foreground>
    <i:Interaction.Triggers>
        <eim:StoryboardCompletedTrigger Storyboard="{StaticResource load}">
            <eim:ControlStoryboardAction Storyboard="{StaticResource load}"/>
        </eim:StoryboardCompletedTrigger>
        <i:EventTrigger>
            <eim:ControlStoryboardAction Storyboard="{StaticResource load}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--TitlePanel contains the name of the application and page title--><!--ContentPanel - place additional content here-->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Image Margin="0" Grid.Row="1" Source="/media/splashbg.jpg" Stretch="Fill" d:IsLocked="True"/>
        <Image x:Name="rotator" Margin="96,288,184,312" Grid.Row="1" Source="media/splashpin.png" Stretch="Fill" d:IsLocked="True"/>
        <Image x:Name="image" Margin="142,305,0,370" Grid.Row="1" Source="media/pinload.png" Stretch="Fill" HorizontalAlignment="Left" Width="75" RenderTransformOrigin="0.838,0.504">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image>
        <TextBlock x:Name="preloader_percentage" Margin="178,354,0,0" Grid.Row="1" TextWrapping="Wrap" Text="100" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.593" TextAlignment="Right" HorizontalAlignment="Left" Width="35" FontFamily="Segoe WP Semibold" Height="27"/>
        <TextBlock Margin="213,354,0,0" Grid.Row="1" TextWrapping="Wrap" Text="%" VerticalAlignment="Top" HorizontalAlignment="Left" Width="16" FontFamily="Segoe WP Semibold" d:IsLocked="True"/>

    </Grid>
</phone:PhoneApplicationPage>

Answer 1

How about something like this:

In Splash.xaml.cs you would have the following:

public string Progress
{
    get { return preloader_percentage.Text; }
    set { preloader_percentage.Text = value; }
}

And in MainWindow.xaml.cs you change your code to look something like this:

preloader.WorkerReportsProgress = true;
preloader.ProgressChanged += (sender, e) =>
    {
        this.Dispatcher.BeginInvoke(() =>
            (this.splashPop.Child as Splash).Progress = e.ProgressPercentage.ToString());
    };

Then in your worker method you need to call preloader.ReportProgress() method several times. As far as I know, that should do it.

Note: There are a lot of design landmines here. I’d suggest getting this code to work, and you can refactor later to make it cleaner and easier to maintain.