Popup not obeying device orientation

Question

I'm opening a Popup Window programatically in response to a button Click Event Handler but the Popup Content is always oriented in Portrait Mode even if the device was already in Landscape Mode before the Click Handler runs. 

Am I supposed to handle this myself or is this a bug?

---

weichhold.com

Answer 1

Hi Oliver,

It looks like there's a couple of ways to keep the proper orientation.

1. Make sure the Popup window is in the visual tree. I got it to appear and correctly orient by placing it in the XAML; you should be able to implement this functionality programmatically too:

<Grid x:Name="TitleGrid" Grid.Row="0">
  <TextBlock Text="MY APPLICATION" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>
  <TextBlock Text="page title" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>
  <Popup IsOpen="True">
    <Button Content="Button" Height="70" HorizontalAlignment="Left" Margin="190,74,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
  </Popup>
</Grid>

2. If you absolutely had to, you could rotate it manually, for example:

Popup msgBox = new Popup();

 

msgBox.VerticalOffset = -400;

msgBox.HorizontalOffset = 150;

 

RotateTransform transform = new RotateTransform();

transform.Angle = 90d;

msgBox.RenderTransform = transform;

 

---

Mark Chamberlain Sr. Escalation Engineer | Microsoft Developer Support | Windows Phone 7

Answer 2

Yeah I've figured it out in the meantime. If the popup is not part of the visual tree, wierd things happen.

But now I've got another problem. The popup correctly rotates with the parent page but since I want it to cover the whole page - acting like a modal dialog - I need to update its dimensions when Orientation has changed. Unfortunately this does not work because this.ActualWidth and this.ActualHeight always contain the values before the Orientation Change and using a SizeChanged event handler for this purpose totally screwed up my orientation transition animation:

 

 

protected override void OnOrientationChanged(Microsoft.Phone.Controls.OrientationChangedEventArgs e)
{
  if (dlgPopup.IsOpen)
  {
    var dlg = (TestDialog) dlgPopup.Child;
    dlg.Width = this.ActualWidth;
    dlg.Height = this.ActualHeight;
  }
}

 

---

weichhold.com

Answer 3

Hi Oliver,

  What is your design goal for using a Popup? 

  There may be alternate methods to acheive the results you want.

Thanks,
-Eric.

Answer 4

That highlights an important issue actually: what's the best/most appropriate way to create a modal dialog in WP7?

I'm currently favouring Popups myself because

a) There's no trouble getting a result back

and

b) It would only require saving state for one page if the application is paused.

But I think we could really do with some guidance and examples in areas like this (it might also include whether there are any standard transitions that should be used for a modal dialog for the sake of consistency)

Answer 5

Hi Oliver,

  What is your design goal for using a Popup? 

  There may be alternate methods to acheive the results you want.

Thanks,
-Eric.

The goal is to get a string input from the user. Think of a very simple (modal) dialog containing a textbox, an OK and a Cancel button.

---

weichhold.com

Answer 6

That highlights an important issue actually: what's the best/most appropriate way to create a modal dialog in WP7?

I'm currently favouring Popups myself because

a) There's no trouble getting a result back

and

b) It would only require saving state for one page if the application is paused.

But I think we could really do with some guidance and examples in areas like this (it might also include whether there are any standard transitions that should be used for a modal dialog for the sake of consistency)

Totally agreed. Too bad that ChildWindow does not seem to be supported.

---

weichhold.com

Answer 7

If there is no guidance on that particular case at the moment, have people noticed what apps are doing on other devices? There may be some interesting patterns there. So far on the iPhone I can say the only similar usage pattern I've seen is popups for authentication - which is done by iTunes. So no 3rd party apps as yet doing this that I've noticed.

Answer 8

If there is no guidance on that particular case at the moment, have people noticed what apps are doing on other devices? There may be some interesting patterns there. So far on the iPhone I can say the only similar usage pattern I've seen is popups for authentication - which is done by iTunes. So no 3rd party apps as yet doing this that I've noticed.

The iPhone OS has provision for views to be called modally, which involves doing a few special things but looks to the user much like any other view, except that by convention it slides up from the bottom rather than in from the side (although both are only conventions and can be overridden). For some purposes however (actually where it looks most like what we would recognise as a modal dialog people insert text input fields in a UIAlertView, although I'm not sure that's supported for third-party code).

I do think the iPhone standard approach of using a different transition for modal vs. non-modal views has some merit. But once again, I'd appreciate some more input from MS on these subjects.

Answer 9

Regarding dimensions, perhaps you can avoid specifying dimensions; instead let the Popup fill its parent container. So for example if you have a Stackpanel that fills the visual area, you can make the Popup a child of the topmost item in that Stackpanel. Then the width of the Popup will always be the width of the usable screen, regardless of orientation. The height could either be set as a fixed height, or it could be set to fill the Stackpanel item, depending on your visual design decisions.

---

Mark Chamberlain Sr. Escalation Engineer | Microsoft Developer Support | Windows Phone 7

Answer 10

Regarding dimensions, perhaps you can avoid specifying dimensions; instead let the Popup fill its parent container. So for example if you have a Stackpanel that fills the visual area, you can make the Popup a child of the topmost item in that Stackpanel. Then the width of the Popup will always be the width of the usable screen, regardless of orientation. The height could either be set as a fixed height, or it could be set to fill the Stackpanel item, depending on your visual design decisions.

---

Mark Chamberlain Sr. Escalation Engineer | Microsoft Developer Support | Windows Phone 7

Well actually I have to update the dimensions of the Popup's Content (a Usercontrol defined in its own xaml) and not of the popup itself. I never got this part working without explicitely setting pixel dimensions of the user control (ie. horz/vert stretch on the UserControl and/or Popup containing it). Any suggestions?

---

weichhold.com

Answer 11

I believe it should be possible to avoid explicit dimensions but instead allow the popup to autosize via Height="Auto" and/or space Grid elements ratiometrically by specifying "*", "2*" etc for Height etc. Something to think about especially if the app is designed to accommodate orientation rotating as well as future screen metrics/dimensions.  This approach better accommodates dynamic changing of font sizes too.

---

Mark Chamberlain Sr. Escalation Engineer | Microsoft Developer Support | Windows Phone 7

Answer 12

2. If you absolutely had to, you could rotate it manually, for example:

Popup msgBox = new Popup();

 

msgBox.VerticalOffset = -400;

msgBox.HorizontalOffset = 150;

 

RotateTransform transform = new RotateTransform();

transform.Angle = 90d;

msgBox.RenderTransform = transform;

Has anybody successfully done this rotation? My popup is not in the visual tree. On change to landscape orientation, it performs the rotate transform but the popup continues to display in portrait.

Answer 13

I ended up with the following resolution to my situation. Our app has several popups not in the visual tree that can appear in front of whatever page is currently displayed. I wanted to make the app rotate with orientation, including the popups.

• I was unable to make the Popup object rotate using RotateTransform (as in the code example above). However, I found that I could rotate controls inside the Popup. This was good enough as a workaround. In my case it was convenient to rotate contents using the Visual State Manager to define portrait/landscape layouts and swap between states, rather than do the manual RotateTransform.
• Our popups use a grid to cover the entire screen with a semi-transparent background. I had trouble getting the grid to rotate properly. It kept translating to some wonky x/y offset that I couldn't control. The solution: don't rotate the background grid! It doesn't honor the orientation and retains its position and size relative to the physical screen.
• With contents rotated but not the Popup itself rotated, dimensions and positioning (width/height, auto vs fixed, Left, Right, Stretch alignment) got funky. I just played around with the parameters until it looked right.

Richard