Application2 Demo

App.xaml

Look here: Application2

MainPage.xaml

Define namespaces:

<rf:ContentPage2 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:RedCorners.Demo.Views"
    xmlns:rf="clr-namespace:RedCorners.Forms;assembly=RedCorners.Forms"
    xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
    xmlns:vm="clr-namespace:RedCorners.Demo.ViewModels"

We don’t want to fix paddings just yet.

    FixBottomPadding="False"
    FixTopPadding="False"

iOS Status Bar style:

    UIStatusBarStyle="{Binding UIStatusBarStyle}"

Android Status Bar style, color, translucency and margins:

    AndroidLayoutInScreen="{Binding AndroidLayoutInScreen}"
    AndroidTranslucentStatus="{Binding AndroidTranslucentStatus}"
    AndroidStatusBarColor="{Binding AndroidStatusBarColor}"

Class name:

    x:Class="RedCorners.Demo.Views.MainPage">

Binding context:

    <rf:ContentPage2.BindingContext>
        <vm:MainViewModel />
    </rf:ContentPage2.BindingContext>

Colorful background image that goes below the status bar:

    <Grid>
        <ff:CachedImage
            Aspect="AspectFill"
            Source="{Binding BackgroundImage}" />

Fix paddings with a ContentView2:

        <rf:ContentView2 FixTopPadding="True" BackgroundColor="Transparent">

Add a button that opens a new page using a PageCommand. The inner page contains a button that pops the page using a PopCommand:

            <StackLayout Padding="10">
                <Button Text="Test Modal">
                    <Button.Command>
                        <rf:PageCommand IsModal="True">
                            <rf:ContentPage2>
                                <Grid>
                                    <Button Text="Pop" HorizontalOptions="Center" VerticalOptions="Center">
                                        <Button.Command>
                                            <rf:PopCommand FireOnce="False" FireDelay="1000" />
                                        </Button.Command>
                                    </Button>
                                </Grid>
                            </rf:ContentPage2>
                        </rf:PageCommand>
                    </Button.Command>
                </Button>

Add a button that shows a modal page defined in a separate class:

                <Button Text="Show Modal From Page">
                    <Button.Command>
                        <rf:PageCommand IsModal="True">
                            <rf:PageCommand.Page>
                                <views:CounterPage />
                            </rf:PageCommand.Page>
                        </rf:PageCommand>
                    </Button.Command>
                </Button>

Add a button that shows the same modal page, but every time activates a new instance of that page from its type:

                <Button Text="Show Modal From Type">
                    <Button.Command>
                        <rf:PageCommand IsModal="True" PageType="{Type views:CounterPage}" />
                    </Button.Command>
                </Button>

Add a button that shows the SideBar:

                <Button Text="Show SideBar" Command="{Binding ShowSideBarCommand}" />

Add a switch that toggles the iOS status bar style:

                <Grid Padding="2" BackgroundColor="#EE000000">
                    <Label Text="LightContent" TextColor="White" VerticalOptions="Center" />
                    <Switch HorizontalOptions="End" IsToggled="{Binding LightContent}" />
                </Grid>

Add switches and buttons that toggle Android status bar properties:

                <Grid Padding="2" BackgroundColor="#99000000">
                    <Label Text="AndroidLayoutInScreen" TextColor="White" VerticalOptions="Center" />
                    <Switch HorizontalOptions="End" IsToggled="{Binding AndroidLayoutInScreen}" />
                </Grid>
                
                <Grid Padding="2" BackgroundColor="#99000000">
                    <Label Text="AndroidTranslucentStatus" TextColor="White" VerticalOptions="Center" />
                    <Switch HorizontalOptions="End" IsToggled="{Binding AndroidTranslucentStatus}" />
                </Grid>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Button Grid.Column="0" Text="Blue" Command="{Binding BlueStatusBarCommand}" />
                    <Button Grid.Column="1" Text="Green" Command="{Binding GreenStatusBarCommand}" />
                </Grid>                

Add a switch that toggles the SideBar’s side:

                <Grid Padding="2" BackgroundColor="#99000000">
                    <Label Text="IsRight" TextColor="White" VerticalOptions="Center" />
                    <Switch HorizontalOptions="End" IsToggled="{Binding IsRight}" />
                </Grid>
                

            </StackLayout>
        </rf:ContentView2>

Define the SideBar:

        <rf:SideBar Side="{Binding Side}">
            <Frame
                HasShadow="True"
                HorizontalOptions="Fill"
                VerticalOptions="Fill"
                BackgroundColor="#BB000000"
                Padding="{Static rf:Values.PageMargin}"
                CornerRadius="0">
                <StackLayout Padding="10" Spacing="20">
                    <ff:CachedImage Source="http://ooze.redcorners.com/redcorners_forms_logo.png" HorizontalOptions="Center" HeightRequest="128" WidthRequest="128" />
                    <Label Text="RedCorners.Forms" TextColor="White" FontSize="Large" HorizontalTextAlignment="Center" HorizontalOptions="Center" />
                    <BoxView HeightRequest="1" HorizontalOptions="Fill" BackgroundColor="White" />
                </StackLayout>
            </Frame>
        </rf:SideBar>
    </Grid>
    
</rf:ContentPage2>

MainViewModel

using RedCorners.Forms;
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
using System.Reflection;
using static RedCorners.Forms.SideBar;

namespace RedCorners.Demo.ViewModels
{
    public class MainViewModel : BindableModel
    {
        bool _androidTranslucentStatus = true;
        public bool AndroidTranslucentStatus
        {
            get => _androidTranslucentStatus;
            set => SetProperty(ref _androidTranslucentStatus, value);
        }

        bool _androidLayoutInScreen = false;
        public bool AndroidLayoutInScreen
        {
            get => _androidLayoutInScreen;
            set => SetProperty(ref _androidLayoutInScreen, value);
        }

        bool _lightContent = true;
        public bool LightContent
        {
            get => _lightContent;
            set
            {
                _lightContent = value;
                UpdateProperties();
            }
        }

        public UIStatusBarStyles UIStatusBarStyle => LightContent ? UIStatusBarStyles.LightContent : UIStatusBarStyles.Default;

        Color _androidStatusBarColor = Color.Red;
        public Color AndroidStatusBarColor
        {
            get => _androidStatusBarColor;
            set => SetProperty(ref _androidStatusBarColor, value);
        }

        SidebarSides _side = SidebarSides.Right;
        public SidebarSides Side
        {
            get => _side;
        }

        public bool IsRight
        {
            get => _side == Sides.Right;
            set
            {
                _side = value ? Sides.Right : Sides.Left;
                UpdateProperties();
            }
        }

        public Command BlueStatusBarCommand => new Command(() => AndroidStatusBarColor = Color.FromHex("#770000FF"));
        public Command GreenStatusBarCommand => new Command(() => AndroidStatusBarColor = Color.FromHex("#7700FF00"));

        public ImageSource BackgroundImage => "https://images.pexels.com/photos/163822/color-umbrella-red-yellow-163822.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260";
    }
}