2

como están? Vengo a buscar ayuda porque llevo ya muchos días en lo mismo y no alcanzo a encontrar solución

Estoy creando un popup que se abre cuando el mouse pasa sobre algún control, la idea es que cuando se pase el mouse por otro control el popup cambie su ubicación y contenido, ya que solo quiero 1 popup a la vez en la pantalla, la frase que muestra se toma desde una BBDD, el problema es que no logro que el popup se cierre, cambie el contenido y se abra de nuevo en la nueva ubicación, en vez de esto el popup se mantiene abierto, cambia de ubicación aun estando abierto y sin cambiar el contenido, y luego al acabar el método MouseEnter se cierra y se vuelve a abrir con el nuevo contenido, esto da como resultado una especie de parpadeo que se ve super mal, en este corto video muestro el comportamiento:

https://youtu.be/skmxDVGQrYU

Aclaraciones importantes:

  1. Uso CodeBehind porque la idea es reutilizar el popup en todas las ventanas WPF, que son bastantes, esto me ahorra escribir todo el contenido en cada una de las ventanas, además el contenido del popup cambia, sería repetir el mismo código largo en todas las ventanas, me parece poco óptimo
  2. Apenas llevo 1 mes y medio estudiando WPF y C#, así que aún soy nivel novato
  3. La idea luego de arreglar este problema es mover el popup a una clase nueva, y que cada WPF simplemente llame esta clase cuando necesite un popup
  4. No uso binding para el contenido o estado porque como digo, el mismo popup se llama desde diferentes WPF, desconozco una mejor manera de implementar lo que quiero

Acá los códigos tal cual como los tengo en el programa reducido a solo dos bloques, no he usado mas ficheros, ni clases, ni métodos, ni wpf ni nada

El código c#:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;

namespace TestPopup
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            popup.PopupAnimation = PopupAnimation.Fade;
            popup.AllowsTransparency = true;
        }
        // creo el popup que voy a reutilizar durante todo el programa
        private Popup popup = new Popup();

        // Primero paso el mouse por acá
        private void block_MouseEnter(object sender, MouseEventArgs e)
        {
            // Cierro el popup, aun cuando esté cerrado
            popup.IsOpen = false;   

            // Creo el grid
            Grid grid = new Grid       
            {
                Width = 50,
                Height = 50,
                Background = Brushes.Red,
            };

            // creo el textbox con el texto nuevo
            TextBlock textBlock = new TextBlock();
            textBlock.Text = "Hola";

            // Añado los hijos al grid y al popup
            grid.Children.Add(textBlock);
            popup.Child = grid;

            // Fijo el target para el popup
            popup.PlacementTarget = sender as UIElement;

            // Abro el popup
            popup.IsOpen = true;

            // Todo va bien hasta acá, se muetsra el
            // popup con el color y texto que quiero
        }


        // Ahora paso el mouse por acá
        private void label_MouseEnter(object sender, MouseEventArgs e)
        {

            // Cierro el popup
            popup.IsOpen = false;
            // Usando Debug paso a paso, veo a pesar de ordenarle que se
            // cierre en realidad no cierra, continúa abuerto

            // Creo el grid
            Grid grid = new Grid
            {
                Width = 50,
                Height = 50,
                Background = Brushes.Aqua,
            };

            // creo el textbox con el texto nuevo que quiero mostrar
            TextBlock textBlock = new TextBlock();
            textBlock.Text = "Adios";

            // Añado los hijos al grid y al popup
            grid.Children.Add(textBlock);
            popup.Child = grid;

            // Fijo el target para el popup
            popup.PlacementTarget = sender as UIElement;

            // Abro el popup
            popup.IsOpen = true;
            // Acá en debug claramente se ve como el popup
            // cambia de ubicaicón al nuevo target aún sin haberse cerrado,
            // y el contenido aún no cambia, solo cambia la ubicación
            // pero mostrando aún el contenido anterior
        }
        // Recién acá es cuando se cierra, se abre y cambia el contenido
        // por eso se ve el parpadeo
    }
}

El XAML:

<Window x:Class="TestPopup.MainWindow"
        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"
        xmlns:local="clr-namespace:TestPopup"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <TextBlock Name="block"
                   Text="Bloque 1"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="25"
                   MouseEnter="block_MouseEnter"/>

        <Label      Name="label"
                   Grid.Column="1"
                   Content="Bloque 2"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="25"
                   MouseEnter="label_MouseEnter"/>
    </Grid>
</Window>

Muchas gracias por su ayuda

4
  • Puedes reducir el caso a solamente dos bloques y pegar tanto el xaml como el codebehind? Intenté reproducirlo pero no pude.
    – Carlos
    Commented el 28 may. 2021 a las 22:27
  • Listo, ya pasé todo el código para que puedas copiar y pegar y reduje todo lo innecesario Commented el 29 may. 2021 a las 1:06
  • Necesitas AllowTransparency? Parece ser que el problema está con esa propiedad. Si la setteas a False, al parecer no se reproduce.
    – Carlos
    Commented el 29 may. 2021 a las 3:04
  • Disculpa la demora, estaba de viaje, si necesito el allowtransparency por el diseño que tiene, he hecho cambios y logré que se comporte bien el 90% de las veces, sobre todo cuando la frase es traida desde la bbdd y es diferente a la anterior, veré si puedo mejorarlo, de lo contrario estoy pensando en crearme un usercontrol personalizado, solo que no tengo ni idea de como hacerlo Commented el 5 jun. 2021 a las 14:48

1 respuesta 1

1

Al parecer, el bug aparece debido a que no se cierra y abre en tiempos adecuados. Podría intentar un comportamiento personalizado heredando de Popup, para que después de que el popup detecte el cambio de IsOpen a false, asignes los valores y cambies IsOpen de nuevo a true.

      public class CustomPopup : Popup
      {
         public event CancelEventHandler BeforeClosing;
         protected override void OnClosed(EventArgs e)
         {
            if (BeforeClosing != null)
            {
               var args = new CancelEventArgs
               {
                  Cancel = false
               };

               BeforeClosing.Invoke(this, args);
               IsOpen = args.Cancel;
               if (IsOpen)
               {
                  return;
               }
            }

            base.OnClosed(e);
         }
      }

Aquí el code behind:

public class RenderData
{
      public UIElement Element { get; set; }
      public string Text { get; set; }
      public SolidColorBrush Color { get; set; }
}

public partial class Window1 : Window
{
      RenderData _data;
      CustomPopup _customPopup;
      TextBlock _textBlock;
      Grid _grid;

      public Window1()
      {
         InitializeComponent();

         _grid = new Grid
         {
            Width = 50,
            Height = 50,
            Background = Brushes.Red
         };

         _textBlock = new TextBlock
         {
            Text = "Hola"
         };

         _grid.Children.Add(_textBlock);

         _customPopup = new CustomPopup
         {
            Child = _grid,
            PopupAnimation = PopupAnimation.Fade,
            AllowsTransparency = true
         };

         _customPopup.BeforeClosing += CustomPopup_BeforeClosing1;
         this.Closing += Window1_Closing;
      }

      private void CustomPopup_BeforeClosing1(object sender, CancelEventArgs e)
      {
         if (_data is null)
            return;

         ModificarPropiedades(_data);
         e.Cancel = true;
      }

      private void Window1_Closing(object sender, System.ComponentModel.CancelEventArgs e)
      {
         _data = null;
         _customPopup = null;
         _grid = null;
         _textBlock = null;
      }

      private void block_MouseEnter(object sender, MouseEventArgs e)
         => HandleMouseEnter(sender as UIElement, "Hola", Brushes.Red);
      

      private void label_MouseEnter_1(object sender, MouseEventArgs e)
         => HandleMouseEnter(sender as UIElement, "Adios", Brushes.Blue);

      
      private void HandleMouseEnter(UIElement el, string text, SolidColorBrush color)
      {
         // Evita parpadeo cuando reingresa al mismo control
         if (el == _data?.Element)
            return;

         // Nuevos parametros
         var newData = new RenderData
         {
            Element = el,
            Text = text,
            Color = color
         };

         _customPopup.IsOpen = false;

         // Primera vez
         if (_data == null)
         {
            ModificarPropiedades(newData);
            _customPopup.IsOpen = true;
         }

         _data = newData;
      }

      private void ModificarPropiedades(RenderData data)
      {
         _grid.Background = data.Color;
         _textBlock.Text = data.Text;
         _customPopup.PlacementTarget = data.Element;
      }
}
1
  • Perfecto, funciona muy bien y es justo lo que necesitaba, voy a analizar bien el código aunque de antemano adelanto que es justo así como lo voy a implementar, muchas gracias por la ayuda Commented el 11 jun. 2021 a las 18:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.