Simple.Toast 1.1.0

Table of contents

1. Quick start
2. Features and limitations
3. Examples
4. Changes

Quick start

1. Download package
2. Register simple xml namespace in page:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             ...
             xmlns:simple="clr-namespace:Simple.Toast;assembly=Simple.Toast"> 

3. Add toast component to top-level page container:

    <Grid RowDefinitions="*"
          ColumnDefinitions="*">
                    
        <simple:Toast DismissDelay="2000" 
                      ToastBackgroundColor="#2E7D32" 
                      CornerRadius="12"
                      ToastPadding="16,12"
                      ProgressBarColor="#81C784"
                      Show="{Binding Show}" 
                      Dismiss="{Binding Dismiss}"
                      ToastDirection="LeftToRight"
                      VerticalOptions="Start"
                      HorizontalOptions="Center"
                      ProgressBarDirection="Center"
                      ZIndex="5">
            <simple:Toast.InnerContent> 
                <Label Text="✓ Operation completed successfully!"
                       TextColor="White"
                       FontSize="16"
                       FontAttributes="Bold"
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center" />
            </simple:Toast.InnerContent>
        </simple:Toast>
    
    </Grid>

4. Add observable properties and bind them to Show and Dismiss toast properties:

public partial class MainPageVM : ObservableObject
{  
    [ObservableProperty]
    private bool _show = false;

    [ObservableProperty]
    private bool _dismiss = false;

    //...
}

5. Show configured toast or dismiss it in viewmodel:

public partial class MainPageVM : ObservableObject
{  
    //...observable properties definitions...
   
    [RelayCommand]
    public void ShowNotification()
    {
        Show = true;
    }

    [RelayCommand]
    public void CancelNotification()
    {
        Dismiss = true;
    }

    //...
}

Features and limitations

Properties

Show

• Show property automatically resets to false value when changed to true. Thus, one may use Show = true to show toast multiple times.
• Setting Show = true multiple times resets running toast animations.

Dismiss

• Dismiss property is similar to Show: setting Dismiss = true hides toast; it automatically resets to false when set to true; one may use Dismiss = true multiple times.

ToastDirection

ToastDirection property supports 4 toast appearance directions:

• TopToDown (default)
• LeftToRight
• DownToTop
• RightToLeft

IsProgressBarEnabled

Boolean property, that enables or disables toast dismiss progress bar visibility.

DismissDelay

Integer property, toast dismiss delay in milliseconds.

ProgressBarDirection

ProgressBarDirection is a enum property, supporting following 3 values:

• Center (default)
• Left
• Right

This property is used to specify progress bar move direction.

Examples

<figure> <img src="Assets/defaultToast.jpg" alt="Default toast image"> <figcaption>Default toast</figcaption> </figure>

<simple:Toast DismissDelay="2000" 
              ToastBackgroundColor="#2E7D32" 
              CornerRadius="12"
              ToastPadding="16,12"
              ProgressBarColor="#81C784"
              Show="{Binding Show}" 
              Dismiss="{Binding Dismiss}"
              ToastDirection="LeftToRight"
              VerticalOptions="Start"
              HorizontalOptions="Center"
              ZIndex="5">
    <simple:Toast.InnerContent> 
        <Label Text="✓ Operation completed successfully!"
                TextColor="White"
                FontSize="16"
                FontAttributes="Bold"
                HorizontalTextAlignment="Center"
                VerticalTextAlignment="Center" />
    </simple:Toast.InnerContent>
</simple:Toast>

<figure> <img src="Assets/progressBarHidden.jpg" alt="Progress bar hidden"> <figcaption>Progress bar hidden</figcaption> </figure>

<simple:Toast DismissDelay="15000" 
              ToastBackgroundColor="#2E7D32" 
              CornerRadius="12"
              ToastPadding="16,12"
              ProgressBarColor="#81C784"
              Show="{Binding Show}" 
              Dismiss="{Binding Dismiss}"
              ToastDirection="DownToTop"
              VerticalOptions="Start"
              HorizontalOptions="Center"
              IsProgressBarEnabled="False"
              ZIndex="5">
    <simple:Toast.InnerContent> 
        <Label Text="✓ Operation completed successfully!"
               TextColor="White"
               FontSize="16"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
    </simple:Toast.InnerContent>
</simple:Toast>

<figure> <img src="Assets/complexToastDesign.jpg" alt="Complex toast design"> <figcaption>Complex toast design</figcaption> </figure>

<simple:Toast DismissDelay="8000" 
              ToastBackgroundColor="#C62828" 
              CornerRadius="12"
              ToastPadding="16,12"
              ProgressBarColor="#FFAB91"
              Show="{Binding Show}" 
              Dismiss="{Binding Dismiss}"
              ToastDirection="DownToTop"
              VerticalOptions="Start"
              HorizontalOptions="Center"
              IsProgressBarEnabled="True"
              ZIndex="5">
    <simple:Toast.InnerContent>
        <StackLayout Spacing="10">
            <BoxView BackgroundColor="#FFCCBC" 
                     HeightRequest="2" 
                     WidthRequest="40" 
                     HorizontalOptions="Center" />
            <Label Text="⚠️ Operation failed"
                   TextColor="#FFCCBC"
                   FontSize="16"
                   FontAttributes="Bold"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" />
            <Label Text="Please check your internet connection and try again later"
                   TextColor="White"
                   FontSize="14"
                   HorizontalTextAlignment="Center"
                   LineBreakMode="WordWrap" />
            <BoxView BackgroundColor="#FFCCBC" 
                     HeightRequest="1" 
                     WidthRequest="60" 
                     HorizontalOptions="Center" />
        </StackLayout>
    </simple:Toast.InnerContent>
</simple:Toast>

Changes

version 1.1.0

• ProgressBarDirection property was added.
• Updated documentation.