0

Using UWP XAML, I am trying to recreate this textbox UX from Postman whereby it pops up above all other elements in the app to display the full text: https://streamable.com/avrixo. I've almost fully recreated this UX, but I am having trouble bringing the textbox to the "front" of the app while the textbox is inside a listview.

What I have tried:

I have tried creating a UserControl for a custom text box with Canvas as its parent. Like this:

<Canvas>
  <TextBox/>
</Canvas

I added some event handling to change the text wrapping and the Canvas.Zindex attached property of the textbox when the user focuses on it (I've tried setting the z-index to 1, 10, 100, and 1000000). However, I found that as the textbox expands vertically, it remains "behind" the listview item below it no matter what z-index I give it.

How can I bring the textbox inside a listview item to the "front" of the UI?

Daniel
  • 126
  • 1
  • 8
  • That looks like some kind of [`ToolTip`](https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.tooltip?view=winrt-18362), explaining how it appears above everything else. – Corentin Pane May 24 '20 at 00:56
  • @CorentinPane ToolTip and Flyout are not an ideal UX because it's a separate element to the original textbox, so the focus jumps from the original element to the tooltip/flyout. This is an awkward UX based on my initial experimentations with flyout unfortunately. – Daniel May 24 '20 at 01:02

1 Answers1

1

I don't think your problem is with z-index (per say) in this case. The problem here in the ListView is that each ListViewItem has it's own bounds, so the TextBox is being clipped by the bounding box of the item. You can double-check the bounding areas with the Visual Tree tools at least to confirm that's the issue.

If you don't want the ListViewItem to expand in size to match, I can see two options. When the user clicks to edit, you put a 'fake' TextBox (bound to the original in the ListView or the data item) either in 1) a Pop-up that you display or 2) in an overlay that's part of your page's XAML that has the textbox.

You can grab the selection state and cursor positions and such from the original textbox, and move focus to the new one and mirror that same state.

That's the approach I think I'd take.

Michael Hawker - MSFT
  • 1,572
  • 12
  • 18
  • 1
    `If you don't want the ListViewItem to expand in size to match`. I ended up going with this approach. Thanks – Daniel May 24 '20 at 18:34