Popup control in Blend/Design Surface?

Question

I haven't found much documentation on the xaml Popup control so far, so perhaps my expectations are the problem here, but...

The Popup control does not seem to be working correctly when I add it to a page in Blend.

Toggling the IsOpen property seems to sometimes lockup and hang Blend.
The visual representation of what gets displayed seems to be quirky and inconsistent in the Blend designer, sometimes showing the contents and sometimes not.

The other major issue I am finding is that sizing behavior of the contents of the Popup control do not seem behave the way I would expect or hope.
If the contents of a popup  is a grid set to have an autosize width and height, the grid ends up sizing to zero, even when the Popup itself is assigned either a fixed size or relative size based on its parent.  

Is there a known problem with the Popup control in Blend in the Release Preview?

Answer 1

Yes, the popup control does have issues on the design surface, but I am not aware of any hangs resulting thereof.

It would be useful if you could share out a XAML snippet, so we can try to reproduce it on our end. Also, if you had a consistent set of repro steps, that would help us narrow down the cause.

Thanks
Unni

---

Unni Ravindranathan, Program Manager, Microsoft Expression This posting is provided "AS IS" with no warranties, and confers no rights.

Answer 2

Thank Unni!

I will try and narrow it down to a reliable repro and send/post something once I get a chance.

Answer 3

Okay Unni,

After many hours of experimenting and creating numerous variations of test projects with things added into some projects and stuff cut out from others...

I believe I have narrowed it down to a very simplified repro that demonstrates how to lock Blend up with the Popup control:

1. Open Blend, create a new XAML C# project based on the Blank App Template. MainPage.xaml should appear in the design surface.

2. With focus set on the Grid element in the Objects and Timeline pane, click the Assets tab and search for "popup"

3. Double-click the Popup control to add an instance of it to the main grid on the page.

4. Select the new Popup in the Objects and Timeline pane, expand the Miscellaneous section of the Properties pane and set IsLightDismissEnabled to True by clicking the associated checkbox.

5. Move the mouse cursor casually around the design surface around the edges of the page content. You should see things like the orange grid column and row creation hint adornments appear as you mouse over those areas.

6. Toggle the IsOpen property (found in the Common section of the Properties pane) by clicking its checkbox.

7. Repeat steps 5 and 6 if you can.

Continue steps 5 thru 7 a number of times if possible (I find this particular series of steps will now lock up rather quickly and predictably for me now)
There seems to be some relationship with the mouseover events maybe both (or either) in the design surface and the tooltips in the Properties pane. So if it does not lock up right away you might experiment and try mousing over a few more items each time you cycle through the steps including triggering the IsOpen tooltip and then back over the design surface.

I also found that the IsLightDismissEnabled property being set to true played a major contributing factor to being able to predictably reproduce this behavior.

Setting other layout and formatting properties ultimately did not seem necessary.

HTH, please let me know if you are able to reproduce this in your environment.
Thanks.

In the interest of clarity and completeness I have pasted a copy of the page xaml that I had just prior to cycling through steps 5-7.

<Page
    x:Class="App2.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    	<Popup IsLightDismissEnabled="True">
    		<Grid Background="#FFE5E5E5" Height="100" Width="100"/>
    	</Popup>

    </Grid>
</Page>

Answer 4

Thanks for the awesome repro steps . Will try to repro this on our latest internal bits.

---

Dev@Mic

Answer 5

We have successfully repored this on our latest bits and will look into the possibility of a fix . Would like to know some more info to understand the impact. How often do you run into this while working with the PopUp control ?

---

Dev@Mic

Answer 6

Hi Harikrishna,

In the absence of a Flyout control like the one in HTML projects, it appears that the Popup control is the suggested way to create application settings panels in XAML. The behavior of the Settings panel is typically to have it LightDissmiss.

Many of the app bar buttons may also require use of the Popup control in the same fashion.

The likely frequency of encountering this problem while designing app guideline required basic platform functionality within Metro applications seems significant.

So I expect that Blend users will encounter this bug frequently and when they do it is very insidious since you can loose all changes that you have made since your last save. It may also be difficult to tell what series of steps just caused the lock up (I know it took me many hours to nail it down) and this kind of unexpected and very sudden lock-up of Blend seriously undermines the credibility of the tool.

Definitely seems like a Priority 1 Severity 1 bug to me.

However, there do seem to be a few other issues with the Popup control that also seem to need attention in order to actually use it in production. So if those other issues are not currently in scope then maybe no one will use the Popup control anyway and it won't matter. :-)

Answer 7

Harikrishna,

In the hope that it helps, I have posted a copy of this bug to the Connect site.
It has been a while since I used my account there, I seem to recall there being value to posting confirmed bugs in there.
Does doing so duplicate anything that you might have already done or is posting to Connect still the recommended procedure in cases like these?

Answer 8

Posting to connect is the recommended way to file and track issues. I will make sure that the issue you filed is resolved against the internal bug. Also we should just mark this post as answered so that everybody knows it’s a known issue and that's it being tracked by the product group. Thanks a bunch for taking the time to find the repro and reporting this issue.

Most times you will get a faster response when you post in the forum :).

---

Dev@Mic

Answer 9

Thanks for the info . We have some issues around pop up control in general that we will be fixing as soon as possible post RTM. We understand that this is a core XAML control and will do our best to get the best design time experience out there in the near future.

---

Dev@Mic

Answer 10

In the mean time, until this issue gets fixed...

If you are using the Popup for something like a custom app slide out settings pane or an AppBar triggered panel and you want it to LightDismiss you probably do not want to set the IsLightDismissEnabled property to "True" in Blend until this nasty issue is fixed.

I have found that setting the Popup control's IsLightDismissEnabled property in code behind (in the page constructor) and not in the Blend properties pane seems to avoid the lockup problem that this bug can cause but still gives you the LightDismiss functionality at runtime with the majority of your UI still defined and designed in XAML.

   public MainPage()
        {
            this.InitializeComponent();
            puSettings.IsLightDismissEnabled = true;
            puFeedback.IsLightDismissEnabled = true;
           ...

        }

HTH and saves others a little time and aggravation.

Answer 11

It appears that the fix to this issue made it into the RTM.
It doesn't look like I can reproduce the crash with the same steps that I could before.
We may be able to safely use the Popup control with the IsLightDismissEnabled property in the release version of Blend for VS without the sudden lockup side effect.

Thank you Harikrishna!