18 avril 2024

Ouvrir un popup personnalisé sur votre application

Voilà pour aider un ami un exemple réduit au plus simple possible pour afficher un popup personnalisé dans son application Windows Phone. Personnellement, je préfère le CustomMessageBox du toolkit Windows Phone mais parfois on peut avoir besoin de créer son propre Message.
popup

il suffit d’ajouter à son projet un UserControl : Clique droit sur votre projet puis « Ajouter » et « Nouvel élément ».
Ajouter un usercontrol à votre projet
Puis dans le code-behind d’ajouter ces lignes afin d’utiliser ce usercontrol comme un futur contenu d’une « fenêtre contextuelle »

private readonly Popup _popup = null;

public TonPopupPerso(Popup popup)
{
    InitializeComponent();
    this._popup = popup;
}

//méthode a utiliser derrière l'un des boutons 
//type "fermer" de votre message
private void ClosePopup()
{
    if (this._popup != null)
    {
        this._popup.IsOpen = false;
    }
}

Maintenant dans la page où vous souhaitez ouvrir ce UserControl, vous pouvez le placer par exemple dans le OnNavigatedTo
On créer un Popup, on déclare notre UserControl comme contenu de cet élément, on récupère la largeur de l’application afin d’adapter ce dernier, un petit décalage vertical est possible par exemple si on Affiche le SystemTray… et voilà

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    if (e.NavigationMode == NavigationMode.New)
    {
        var popup = new Popup();
        var content = new TonPopupPerso(popup);
        content.Width = Application.Current.Host.Content.ActualWidth;
        popup.Child = content;
        popup.VerticalOffset = 31; 
        popup.IsOpen = true;
                
    }
}

A noter au passage l’utilisation de NavigationMode == NavigationMode.New qui permet d’afficher ce message que lorsque cette page est ouverte pour la première fois.

Après, je vous invite à ajouter une petite animation (un storyboard) avec une rotationX à l’ouverture et à la fermeture. Je l’ai volontairement pas mis dans cette source afin d’épurer tout ce qui n’est pas indispensable.

Voici la source complète et réduite à son plus simple code pour comprendre ça : popup-usercontrol.zip

Laisser un commentaire