I crafted this user control to animate a brief toast when the user clicks the Favorite button in the Application Bar.

<UserControl x:Class="Bio.UserControls.FavoriteNotificationControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="50" d:DesignWidth="200">
        
    <Border x:Name="FavoriteNotification"
        CornerRadius="5" Width="250" Height="50" BorderThickness="1" BorderBrush="White"
        HorizontalAlignment="Left" VerticalAlignment="Bottom" Opacity="0">
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Offset="0.0" Color="DarkSlateBlue"/>
                        <GradientStop Offset="1.0" Color="DodgerBlue"/>
                    </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Border.Background>
        <Border.RenderTransform>
            <TranslateTransform x:Name="FavoriteTranslation" Y="0"/>
        </Border.RenderTransform>
        <Border.Resources>
            <Storyboard x:Name="FavoriteStoryboard">
                <DoubleAnimation
                    Storyboard.TargetName="FavoriteNotification"
                    Storyboard.TargetProperty="Opacity"
                    From="0.0" To="1.0" Duration="0:0:.5"
                    AutoReverse="True">
                    <DoubleAnimation.EasingFunction>
                        <QuadraticEase/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
                <DoubleAnimation
                    Storyboard.TargetName="FavoriteTranslation"
                    Storyboard.TargetProperty="Y"
                    From="0" To="-50" Duration="0:0:1"
                    AutoReverse="False">
                    <DoubleAnimation.EasingFunction>
                        <QuadraticEase/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </Border.Resources>
        <TextBlock x:Name="FavoriteNotificationText" Text="Favorite Added"
            HorizontalAlignment="Center" VerticalAlignment="Center"
            TextAlignment="Center"
            TextWrapping="Wrap"/>
    </Border>

</UserControl>

Here’s the code-behind:

using System.Windows.Controls;

namespace Bio.UserControls
{
    public partial class FavoriteNotificationControl : UserControl
    {
        public FavoriteNotificationControl()
        {
            InitializeComponent();
        }

        public void Play( bool favorite )
        {
            FavoriteNotificationText.Text = favorite ? "Added to Favorites" : "Removed from Favorites";
            FavoriteStoryboard.Begin();
        }
    }
}

And here’s how I instantiate it in the page where I need it:

        <userControls:FavoriteNotificationControl x:Name="FavoriteNotification" Margin="50,0,0,0" Grid.Row="2" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2"/>

And when I need to play the animated toast, this is how I call it from the Application Bar button Click event:

        private void Favorite_Click( object sender, EventArgs e )
        {
            _person.Favorite = !_person.Favorite;
            var b = (ApplicationBarIconButton)ApplicationBar.Buttons[ 0 ];
            b.IconUri = new Uri( _person.Favorite ? "/Assets/fav.png" : "/Assets/fav-no.png", UriKind.Relative );

            FavoriteNotification.Play( _person.Favorite );
        }

No Comments