ProgressOverlay

Overview

Basically ProgressOverlay is an UI component that consists of ContentControl and PerformanceProgressBar elements. As its name says it is some kind of an animated overlay which can show the progress of a particular process. It uses the compositor thread exclusively for animation, instead of the UI (user interface) thread.


Getting Started

To begin using ProgressOverlay first add a reference to the Coding4Fun.Phone.Controls.dll assembly.

To use the ProgressOverlay in the XAML you have to add the following namespace declaration:

xmlns:Controls="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

Creating a ProgressOverlay :

XAML:
<Controls:ProgressOverlay Name="progressOverlay" >
   <Controls:ProgressOverlay.Content>
      <TextBlock>Loading</TextBlock>
   </Controls:ProgressOverlay.Content>
</Controls:ProgressOverlay>

C#:
ProgressOverlay progressOverlay = new ProgressOverlay();
progressOverlay.Content = "Loading";

Key Features

You can Show/Hide the ProgressOverlay using the Show() and Hide() methods.

NOTE: What is the HasGesturesDisabled property? : With the current Gesture Service in the Silverlight Toolkit (November 2010 release), if two controls are overlapped and the bottom control has a listener attached, events will still bubble through with no way to cancel it without putting on a listener. In a control that is called PopUp, it is self defeating to have this bubble through effect happening. If the SL toolkit corrects the behavior, we’ll remove the HasGesturesDisabled property as it would no longer be needed. This would also remove the dependency on the Silverlight Toolkit.

NOTE: If you want to use Gestures then first add a reference to the Microsoft.Phone.Controls.Toolkit.dll assembly which is installed with the Silverlight Toolkit and you can find it in :
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll

Example:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <Button Content="Bottom Control">
       <sltoolkit:GestureService.GestureListener>
           <sltoolkit:GestureListener Tap="GestureListener_Tap"/>
       </sltoolkit:GestureService.GestureListener>
  </Button>
  <Controls:ProgressOverlay Name="progressOverlay">
      <Controls:ProgressOverlay.Content>
        <TextBlock>Top Control</TextBlock>
      </Controls:ProgressOverlay.Content>
</Controls:ProgressOverlay>
</Grid>


private void GestureListener_Tap(object sender, GestureEventArgs e)
{
   MessageBox.Show("TAP Fired!", "Testing with Gesture Tap", MessageBoxButton.OKCancel);
}

Styling and Appearance

ProgressOverlay exposes a Style property which allows you to apply a style to it and modify its appearance.

NOTE: The property responsible for the color of the ProgressOverlay animation effect is "Foreground"!

Adding Flipping Animation:

In order to have a flipping effect around the X axis all we need to do is at first to add PlaneProjection to the ContentCntrol and after that just to change the rotation angel to 360 and make sure that CernerofRotationX and CenterofRotationY are set to 0.5 (this is the default value you do not need to change anything). The animation will be started in the "fadeIn" VisualState. Note that the BeginTime of each animation is calculated in such a way that at first the ContentControl becomes visible and after that the ProgressBar. (BeginTime="0:0:1").

<Style x:Name="customStyle" TargetType="Controls:ProgressOverlay">
<Setter Property="Background" Value="Black"/>
<Setter Property="Template"
<Setter.Value>
   <ControlTemplate TargetType="Controls:ProgressOverlay">
       <Grid Name="LayoutGrid" Visibility="{TemplateBinding Visibility}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
         <Grid.Resources>
            <Storyboard x:Name="fadeOut">
               <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutGrid" />
               <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="progressBar">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>
              </ObjectAnimationUsingKeyFrames>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LayoutGrid">
                  <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>
              </ObjectAnimationUsingKeyFrames>
          </Storyboard>
          <Storyboard x:Name="fadeIn">
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="contentControl">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutGrid" />
            <ObjectAnimationUsingKeyFrames BeginTime="0:0:1" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="progressBar">
                 <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="LayoutGrid">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
      </Grid.Resources>
      <Rectangle Fill="{TemplateBinding Background}" Opacity=".8" />
      <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Center" >
         <ContentControl x:Name="contentControl" Content="{TemplateBinding Content}">
            <ContentControl.Projection>
               <PlaneProjection/>
            </ContentControl.Projection>
         </ContentControl>
         <Controls:PerformanceProgressBar x:Name="progressBar" Foreground="Green" Visibility="{TemplateBinding Visibility}" HorizontalAlignment="Stretch" VerticalAlignment="Center" />     
     </StackPanel>
   </Grid>
 </ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Controls:ProgressOverlay Name="customProgressOverlay" Style="{StaticResource customStyle}">
     <Controls:ProgressOverlay.Content>
         <Image Source="logo.png" Height="80" Width="80"/>
     </Controls:ProgressOverlay.Content
</Controls:ProgressOverlay>


The demo video can be seen here: http://www.youtube.com/watch?v=2HkU1n4wk1w&feature=player_embedded

Last edited Feb 9, 2011 at 9:33 PM by WinPhoneGeek, version 2

Comments

No comments yet.