Windows phone: Loading overlay
Yesterday I just submitted my first windows phone app: Daylight, to the market. I have used several libraries for different purposes, but to create the “Loading” overlay that looks like the original one, I have used Coding4Fun Toolkit for windows phone.
1. Install Coding4Fun libraries using NuGet
VS > Tools > Library Package Manager > Package Manager Console
PM > Install-Package Coding4Fun.Phone.Controls.Complete
2. Add references to the namespaces in the XAML that you want to add the overlay
xmlns:slToolkit ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"
xmlns:Converters="clr-namespace:Coding4Fun.Phone.Controls.Converters;assembly=Coding4Fun.Phone.Controls"
xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"
xmlns:Converters="clr-namespace:Coding4Fun.Phone.Controls.Converters;assembly=Coding4Fun.Phone.Controls"
3. Add resources
<phone:PhoneApplicationPage.Resources>
<Converters:BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter" />
</phone:PhoneApplicationPage.Resources>
<Converters:BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter" />
</phone:PhoneApplicationPage.Resources>
4. Overlay markup
The app is using a Grid with 2 rows as main layout, the overlay is using the same layout to cover the whole screen:
<!-- Loading Overlay -->
<c4f:ProgressOverlay Canvas.ZIndex="1000" Name="progressOverlay"
Visibility="{Binding Path=OverlayVisibility, Converter={StaticResource BoolToVisibilityConverter}}"
Grid.RowSpan="2" Opacity="80" d:IsLocked="True" d:IsHidden="True">
<c4f:ProgressOverlay.Content>
<StackPanel>
<slToolkit:PerformanceProgressBar IsIndeterminate="True" />
<TextBlock HorizontalAlignment="Center">Loading</TextBlock>
</StackPanel>
</c4f:ProgressOverlay.Content>
</c4f:ProgressOverlay>
<c4f:ProgressOverlay Canvas.ZIndex="1000" Name="progressOverlay"
Visibility="{Binding Path=OverlayVisibility, Converter={StaticResource BoolToVisibilityConverter}}"
Grid.RowSpan="2" Opacity="80" d:IsLocked="True" d:IsHidden="True">
<c4f:ProgressOverlay.Content>
<StackPanel>
<slToolkit:PerformanceProgressBar IsIndeterminate="True" />
<TextBlock HorizontalAlignment="Center">Loading</TextBlock>
</StackPanel>
</c4f:ProgressOverlay.Content>
</c4f:ProgressOverlay>
5. ViewModel attribute that will set the overlay to visible or collapsed
public bool OverlayVisibility { get; set; }
Enjoy Coding4Fun!
