https://github.com/damiansuess/test.animatesplash
Animate your Xamarin.Forms splash screen with explosive transitions using MVVM and Prism.Forms
https://github.com/damiansuess/test.animatesplash
animation c-sharp prism prism-forms prismlibrary splash splash-screen splashscreen suesslabs xamarin-forms xeno-innovations xenoinc
Last synced: 3 months ago
JSON representation
Animate your Xamarin.Forms splash screen with explosive transitions using MVVM and Prism.Forms
- Host: GitHub
- URL: https://github.com/damiansuess/test.animatesplash
- Owner: DamianSuess
- Created: 2021-01-17T21:37:09.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-17T21:57:35.000Z (over 4 years ago)
- Last Synced: 2025-02-14T14:42:41.861Z (5 months ago)
- Topics: animation, c-sharp, prism, prism-forms, prismlibrary, splash, splash-screen, splashscreen, suesslabs, xamarin-forms, xeno-innovations, xenoinc
- Language: C#
- Homepage: https://suesslabs.com
- Size: 2.31 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Xamarin.Forms Startup Animation
This lesson shows you how to create a light-weight startup animation after the Splash Screen using ``ScaleTo`` and ``FadeTo`` transitions in Xamarin.Forms.
When creating this project, I started from the base Prism.Forms project in Visual Studio 2019. This way, its easy for you to reproduce this on your own using the standard content.
| Package | NuGet |
|---------|-------|
| [Xamarin.Forms](https://github.com/xamarin/Xamarin.Forms) | |
| [Prism.Forms](https://github.com/PrismLibrary/Prism) | [Prism.Forms](https://www.nuget.org/packages/Prism.Forms/) |
| DryIoc | [Prism.DryIoc.Forms](https://www.nuget.org/packages/Prism.DryIoc.Forms/) |
Prism is a framework for building loosely coupled, maintainable, and testable XAML applications.
## Hiding Splash Animation Navigation
After validating our animation, we need to hide UI stuff such as the Navigation Bar. To do so we need to add, ``NavigationPage.SethasNavigationBar(this, false);`` inside the constructor of our ``SplashPage.xml.cs`` file.
```cs
public SplashPage()
{
InitializeComponent();
// Hide navigation bar
NavigationPage.SetHasNavigationBar(this, false);
}
```
## Further Mods
To hide status bar, we'll need to perform some native-side code.
### Single Page Use
**NOTE: THIS IS UNTESTED!!**
Create the IStatusBar interface in our client-side project
```cs
public interface IStatusBar
{
void HideStatusBar();
void ShowStatusBar();
}
```
Android:
```cs
public class StatusBarImplementation : IStatusBar
{
WindowManagerFlags _originalFlags;
public void HideStatusBar()
{
var activity = (Activity)Forms.Context;
var attrs = activity.Window.Attributes;
_originalFlags = attrs.Flags;
attrs.Flags |= Android.Views.WindowManagerFlags.Fullscreen;
activity.Window.Attributes = attrs;
}
public void ShowStatusBar()
{
var activity = (Activity)Forms.Context;
var attrs = activity.Window.Attributes;
attrs.Flags = _originalFlags;
activity.Window.Attributes = attrs;
}
}
```
iOS:
```cs
public class StatusBarImplementation : IStatusBar
{
WindowManagerFlags _originalFlags;
public void HideStatusBar()
{
var activity = (Activity)Forms.Context;
var attrs = activity.Window.Attributes;
_originalFlags = attrs.Flags;
attrs.Flags |= Android.Views.WindowManagerFlags.Fullscreen;
activity.Window.Attributes = attrs;
}
public void ShowStatusBar()
{
var activity = (Activity)Forms.Context;
var attrs = activity.Window.Attributes;
attrs.Flags = _originalFlags;
activity.Window.Attributes = attrs;
}
}
```
Inside our SplashPage
```cs
// to hide
DependencyService.Get().HideStatusBar();
// to show
DependencyService.Get().ShowStatusBar();
```
#### References
This code snip was borrowed from a StackOverflow discussion on [Hide StatusBar for Specific ContentPage](https://stackoverflow.com/questions/36449480/hide-statusbar-for-specific-contentpage) [2](https://medium.com/@fairushyn/how-to-hide-status-bar-for-specific-content-page-in-xamarin-d8d02a00f18c)
### For the whole app
For Android it would be the following in the Activity's OnCreate (_i.e. ``MainActivity``_):
```cs
this.Window.AddFlags(WindowManagerFlags.Fullscreen); //to show
this.Window.ClearFlags(WindowManagerFlags.Fullscreen); //to hide
```
And for iOS, you'd open your ``Info.plist`` and add the following lines:
```xml
UIStatusBarHidden
UIViewControllerBasedStatusBarAppearance
```
## Without Prism
For use with standard Xamarin Navigation stack, check out this article at [Mallibone.com](https://mallibone.com/post/lets-improve-that-xamarin-forms-startup-experience)
_image from mallibon.com_