Flayout grabs focus

Question

Hello,

I want to code a TextBox. If I write something in this TextBox the flayout should appear.
I wrote such code:

TextBox atbx = new TextBox();
atbx.AcceptsReturn = true;
atbx.TextChanged += Atbx_TextChanged;

    private void Atbx_TextChanged(object sender, TextChangedEventArgs e)
    {
        var flyout = new Flyout();
        TextBlock tbl = new TextBlock();
        tbl.Text = "AAAAAAAAAAAAAa";

        flyout.Content = tbl;

        flyout.ShowAt(sender as FrameworkElement);

}

The problem is that the flyout grabs focus, and I can write more then one letter in my TextBox.

My intention is to create element similiar to AutoSuggestBox, but my functionality, cant be fully provided by AutoSuggestBox.

How to force the Flyout, that it coldnt grab focus, eventually how to do it in other way.

Answer 1

Hello,

Welcome to Microsoft Q&A!

Flyout Class is a lightweight UI control. Once it loses focus, it will be dismissed. If you want to show an alert when texting, I'd suggest you take a look at the PopUp Class. When using the PopUp, you could keep the PopUp showing and still being able to input in the TextBox.

I've made a simple demo and you could check this:

  private void CreatePopUp()   
        {  
            if (popup1 == null)  
            {  
                popup1 = new Popup();  
                popup1.Width = 500;  
                popup1.Height = 500;  
                  
                TextBlock tb2 = new TextBlock();  
                tb2.Text = "AAAAAAAAAAAAAa";  
                popup1.Child = tb2;  
  
                //show the popup in the center  
                Rect windowBounds = Window.Current.Bounds;  
                Point windowCenter = new Point(windowBounds.Left + (windowBounds.Width / 2.0), windowBounds.Top + (windowBounds.Height / 2.0));  
                popup1.SetValue(Popup.HorizontalOffsetProperty, windowCenter.X - (popup1.ActualWidth / 2.0));  
                popup1.SetValue(Popup.VerticalOffsetProperty, windowCenter.Y - (popup1.ActualHeight / 2.0));  
  
            }  
        }  
  
        private void Atbx_TextChanged(object sender, TextChangedEventArgs e)  
        {  
            //var flyout = new Flyout();  
            //TextBlock tbl = new TextBlock();  
            //tbl.Text = "AAAAAAAAAAAAAa";  
            //flyout.Content = tbl;  
            //flyout.ShowAt(sender as FrameworkElement);  
  
            CreatePopUp();  
  
            if (!popup1.IsOpen)   
            {  
                popup1.IsOpen = true;  
            }  
        }  

Update:

If you want to put the PopUp next to the TextBox or some other element. What I suggest is to put the element and the PopUp inside a Canvas. Then you could decide the position where the PopUp shows.

I've changed my code a little bit, and you could make a try:

Xaml:

  <Grid>  
        <!--put the textbox into a canvas-->  
        <Canvas x:Name="MyGrid">  
            <TextBox Canvas.Top="0" Canvas.Left="0" Width="500" Height="500" AcceptsReturn="True" TextChanged="Atbx_TextChanged"/>  
        </Canvas>  
    </Grid>  

Code-behind:

  private void CreatePopUp()   
        {  
            if (popup1 == null)  
            {  
                popup1 = new Popup();  
                popup1.Width = 500;  
                popup1.Height = 500;  
                  
                TextBlock tb2 = new TextBlock();  
                tb2.Text = "AAAAAAAAAAAAAa";  
                popup1.Child = tb2;  
  
                //set the position of the canvas under the TextBox  
                popup1.SetValue(Canvas.LeftProperty, 0);  
                popup1.SetValue(Canvas.TopProperty, 500);  
                MyGrid.Children.Add(popup1);  
  
  
                //show the popup in the center  
                //Rect windowBounds = Window.Current.Bounds;  
                //Point windowCenter = new Point(windowBounds.Left + (windowBounds.Width / 2.0), windowBounds.Top + (windowBounds.Height / 2.0));  
                //popup1.SetValue(Popup.HorizontalOffsetProperty, windowCenter.X - (popup1.ActualWidth / 2.0));  
                //popup1.SetValue(Popup.VerticalOffsetProperty, windowCenter.Y - (popup1.ActualHeight / 2.0));  
            }  
        }  

Thank you.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.