How to create something similar to “toast notification” in Android in windows phone 8.1

Question

I want to create something similar to "toast notification" in Android in windows phone 8.1. What I want is, a text box to be displayed, indicating the user of some events happened ( like "Paired", "Connection Lost"...etc) . But the text box should get dismissed automatically after a few seconds without any user interaction. I have gone through Message Box, and Popup in windows. But both doesn't suite my needs, or I have to use a timer callback to dismiss it automatically, which is not recommended.

Can anyone suggest a method to achieve this in Windows Phone 8.1

Answer 1

In my opinion the best solution is igrali's solution, because he respect the guideline.

But if you want show Toast same Android :

Create userControl like this :

<Border CornerRadius="50" Background="#CC000000" Height="80" Width="150" Margin="10">
    <TextBlock Text="{Binding Message}" Foreground="White" 
               HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>

In code behind :

public MyUserControl1()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }


    public string Message
    {
        get { return (string)GetValue(MessageProperty); }
        set { SetValue(MessageProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Message.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty MessageProperty =
        DependencyProperty.Register("Message", typeof(string), typeof(MyUserControl1), new PropertyMetadata(string.Empty));

And use this userControl in your page :

 private MyUserControl1 toast;
    private DispatcherTimer timer = new DispatcherTimer();

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        toast = new MyUserControl1();
        toast.Message = "Message in my toast";
        toast.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Bottom;
        toast.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;


        timer.Interval = new TimeSpan(0, 0, 1);
        timer.Start();
        timer.Tick += timer_Tick;
        layoutRoot.Children.Add(toast);
    }

    void timer_Tick(object sender, object e)
    {
        if(toast != null)
            layoutRoot.Children.Remove(toast);

        timer.Stop();
    }

I create a button, and fired click event.

In this event i create my usercontrol and add in grid (layoutRoot). I use a DispatcherTimer for remove user control after one seconde.

[Edit] There you are with a working base. Of course you can greatly improve the code.

For example, create an enum that defines the display time. You can also create a Storyboard to run an animation.

Answer 2

You can add a static class add following in that. After that call this showText() from wherever you want to show your toast.Just pass the layout root (parent grid) and string to display. You can customize your look and feel as you want.

 public static void ShowToast(Grid layoutRoot, string message)
    {
        Grid grid = new Grid();
        grid.Width = 300;
        grid.Height = 60;
        grid.Background = new Windows.UI.Xaml.Media.SolidColorBrush(Colors.Transparent);
        grid.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
        grid.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Bottom;
        grid.Margin = new Thickness(0, 0, 0, 30);


        TextBlock text = new TextBlock();
        text.Text = message;
        text.VerticalAlignment = VerticalAlignment.Center;
        text.HorizontalAlignment = HorizontalAlignment.Center;
        text.FontSize = 22;

        grid.Children.Add(text);

        layoutRoot.Children.Add(grid);

        DispatcherTimer timer = new DispatcherTimer();
        timer.Interval = new TimeSpan(0, 0, 3);
        timer.Tick += (sender, args) =>
        {
            layoutRoot.Children.Remove(grid);
            timer.Stop();
        };
        timer.Start();
    }

Answer 3

So I used the Coding4fun ToastPrompt to tweak as per android.
In your code add the following code:


  ToastPrompt toast = new ToastPrompt();
   toast.Title = "Toast Title";
   toast.Message = "Toast Message"
   toast.MillisecondsUntilHidden = 2000; //duration for toast
   toast.Background =new SolidColorBrush(Colors.Gray);
   toast.Foreground = new SolidColorBrush(Colors.White);
   toast.IsHitTestVisible = false;
   toast.Margin = new Windows.UI.Xaml.Thickness(0,0,0,100);
   toast.HorizontalContentAlignment = HorizontalAlignment.Center;
   toast.VerticalContentAlignment = VerticalAlignment.Center;
   toast.Stretch = Stretch.Uniform;
   toast.VerticalAlignment = VerticalAlignment.Bottom;
   toast.HorizontalAlignment = HorizontalAlignment.Center;
   toast.Template = Application.Current.Resources["ToastPromptStyle"] as ControlTemplate;
   toast.Show();

In your Styles.xaml page or wherever you have decalared your styles, define a ControlTemplate. Name for mine is "ToastPromptStyle".

To target Toast Prompt. Add the reference to toolkit on your styles page.Some thing like this: xmlns:toolkit="using:Coding4Fun.Toolkit.Controls"

<ControlTemplate x:Key="ToastPromptStyle" TargetType="toolkit:ToastPrompt">
<Border CornerRadius="15" Background="Gray">
  <TextBlock Text="{TemplateBinding Message}" Foreground="White"   FontFamily="DengXian" FontSize="20" Margin="10"/>
</Border> 
</ControlTemplate>

As you can see that I have set the corner radius property to give that bend at the edges similar to what is given in android. Hope it helps.

Answer 4

ToastPrompt by Coding4Fun.

ToastPrompt toast = new ToastPrompt();
toast.Title = "Title";
toast.Message = "Message";
toast.MillisecondsUntilHidden = 4000; //dismissed after 4 seconds

toast.Completed += toast_Completed;
toast.Show();