WPF material design Snackbar duration

Question

Hey all I am trying to figure out how I can empliment a duration for the Snackbar that comes with the ButchersBoy Material Design In Xaml Toolkit found here and here.

There is no where that states if I can use a duration or not so maybe I am just looking over it within the code? There has got to be a parameter somewhere that allows this?

My current code is this (code behind):

items.Snackbar.MessageQueue.Enqueue("Wow, easy!")

And the XAML:

<materialDesign:Snackbar 
        HorizontalAlignment="Stretch" 
        MessageQueue="{materialDesign:MessageQueue}" 
        x:Name="Snackbar" 
        Grid.Row="1" 
        Grid.ColumnSpan="2" />

Which does work and shows "Wow, easy!" but it goes away too quickly and so that is why I am trying to find a way to do a duration on it.

Answer 1

SnackbarMessageQueue has the following constructor:

public SnackbarMessageQueue(TimeSpan messageDuration)

So you can create the message queue in a view model, and assign, such as:

<materialDesign:Snackbar MessageQueue="{Binding MyCustomMessageQueue}" />

Or, using code behind, name your control:

<materialDesign:Snackbar x:Name="MySnackbar" />

And then in code-behind you can assign a new snackbar:

var myMessageQueue = new SnackbarMessageQueue(TimeSpan.FromMilliseconds(8000));
MySnackbar.MessageQueue = myMessageQueue;

In the future we could add this to the markup extension used in your example , feel free to raise a request on GitHub for this.

Answer 2

1. View

<Button Content="Show SnackBar" Command={Binding ShowSnackBarCommand} />
<materialdesign:Snackbar
    IsActive="{Binding SnackBarIsActive}"
    Message="{Binding SnackBarMessage}" />

2. Context

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace SnackbarTesting
{
    public partial class MainViewModel : ObservableRecipient
    {
        [RelayCommand]
        private async Task ShowSnackBar()
        {
            SnackBarMessage = "TEST MESSAGE WITH DELAY!";

            SnackBarIsActive = true;
            await Task.Delay(TimeSpan.FromSeconds(3));
            SnackBarIsActive = false;
        }

        [ObservableProperty]
        private bool snackBarIsActive;

        [ObservableProperty]
        private string snackBarMessage = string.Empty;
    }
}

Answer 3

Here's another approach to add a duration for the Snackbar of Material Design In Xaml Toolkit.

XAML:

 <materialDesign:Snackbar 
                 IsActive="False" 
                 x:Name="SnackbarOne"  
                 MessageQueue="{materialDesign:MessageQueue}"/>

Code-behind:

 SnackbarOne.MessageQueue?.Enqueue("Wow, easy!", null, null, null, false, true, TimeSpan.FromSeconds(3));

Answer 4

1. View

<materialDesign:Snackbar
            Width="450"
            Margin="4"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            MessageQueue="{Binding SnackbarMessageQueue}" />

2. Context

public SnackbarMessageQueue SnackbarMessageQueue { set; get; } = 
        new(TimeSpan.FromSeconds(1)); // you could set a default time or not..

3. Utility

public static void SnackbarEnqueue(this SnackbarMessageQueue snackbarMsgQueue,
    string msg, string btnContent = "", Action btnAction = null, double duration = 1) =>
    snackbarMsgQueue.Enqueue(msg,
            btnContent,
            _ => btnAction?.Invoke(), actionArgument:null, 
            promote:false, neverConsiderToBeDuplicate:false, 
            durationOverride:TimeSpan.FromSeconds(duration));

4. Sample usage:

SnackbarMessageQueue.SnackbarEnqueue("Hi there1");
SnackbarMessageQueue.SnackbarEnqueue("Hi there2", duration: 2);
SnackbarMessageQueue.SnackbarEnqueue("Hi there3", "Click Me!", () => Console.WriteLine("Snackbar button clicked.."));