locked
How to set popup dialog height to be the same as screen height

    Question

  • I read somewhere that the height of a popup dialog of a Metro-style app should be the same as the screen height, just like the Windows 8 charm bar that is located on the right edge of the screen.

    In our app, the size of popup dialogs are designed to be fixed, say 400 pixels high and 200 pixels wide. I want to change the height at runtime with the code like

    m_PopupDialog->Height = windowBounds.Height;
    

    but to no avail. Could someone kindly help?

    Friday, October 26, 2012 3:11 PM

All replies

  • Hi Lenoard,

    MB you can try to use the actual height of current page, like m_PopupDialog->Height = this->ActualHeight;

    Cheers,

    xDon


    • Edited by Xudong He Friday, October 26, 2012 4:42 PM
    • Proposed as answer by turibbioMVP Friday, October 26, 2012 7:15 PM
    • Unproposed as answer by Leonard Friday, October 26, 2012 11:22 PM
    Friday, October 26, 2012 4:42 PM
  • Hi Xudong,

    Thanks for your response. Can you elaborate what does "this" refer in your code m_PopupDialog->Height = this->ActualHeight? In my code, the statements

    auto windowBounds = Window::Current->Bounds;
    m_PrefDialog->PopupDialog->HorizontalOffset = windowBounds.Width- m_PrefDialog->Width;
    m_PrefDialog->PopupDialog->VerticalOffset = 0;
    PrefDialog->PopupDialog->Height = windowBounds.Height;
    are in MainPage.xaml.cpp. If I use your code, then "this" will refer to MainPage.
    Friday, October 26, 2012 11:22 PM
  • Hi Leonard:

    I think you can Move
    m_PrefDialog->PopupDialog->HorizontalOffset = windowBounds.Width- m_PrefDialog->Width;
    to you PrefDialog's MainPage::MainPage() .

    Like this:

    PrefDialog::PrefDialog()
    {
    	InitializeComponent();
    	auto windowBounds = Window::Current->Bounds;
    	Grid_Root->Width = windowBounds.Width;
    	Grid_Root->Height = windowBounds.Height;
    	// ....
    }

    Monday, October 29, 2012 12:42 AM
  • Hi Jumping fish,

    I tried your method but unfortunately it does not work.

    Wednesday, October 31, 2012 4:58 PM
  • Hi,

    I think you should set the element in Popup control's height.
    For example, we put a border in Popup control and set the
    LeftPopupBorder->Height=windowBounds.Height;

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    Thursday, November 01, 2012 5:56 AM
  • Jesse, it does not work either. Here is the definition of a popup dialog

    <UserControl
        x:Class="metouch.PreferencesDialog"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:metouch"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Height="464"
        Width="250">
    		<Popup x:Name="PreferencesPopup" VerticalOffset="0" HorizontalOffset="0"
    			IsLightDismissEnabled="True">
    			<Popup.ChildTransitions>
    				<TransitionCollection>
    					<PaneThemeTransition Edge="Right"/>
    				</TransitionCollection>
    			</Popup.ChildTransitions>
    
                <Border x:Name="PopupBorder">
                    <StackPanel Height="110" Width="250" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    				<Grid Height="100" Margin="0,10,0,0">
    					<Grid.RowDefinitions>
    						<RowDefinition Height="Auto"/>
    						<RowDefinition Height="Auto"/>
    					</Grid.RowDefinitions>
    					<Grid.ColumnDefinitions>
    						<ColumnDefinition Width="Auto"/>
    						<ColumnDefinition Width="Auto"/>
    					</Grid.ColumnDefinitions>
    					<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="UI Language" VerticalAlignment="Top" FontSize="16" Grid.ColumnSpan="2" Margin="10,10,0,0"/>
    					<RadioButton Content="English" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Margin="5,10,0,0"/>
    					<RadioButton Content="Spanish" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" Margin="5,10,0,0"/>
    				</Grid>
    			</StackPanel>
                </Border>
            </Popup>
    </UserControl>
    

    And here is the header file

    //
    // PreferencesDialog.xaml.h
    // Declaration of the PreferencesDialog class
    //
    
    #pragma once
    
    #include "PreferencesDialog.g.h"
    
    namespace metouch
    {
    	[Windows::Foundation::Metadata::WebHostHidden]
    	public ref class PreferencesDialog sealed
    	{
    	public:
    		PreferencesDialog();
    
    		property Windows::UI::Xaml::Controls::Primitives::Popup^ PopupDialog
    		{
    			Windows::UI::Xaml::Controls::Primitives::Popup^ get()
    			{
    				return PreferencesPopup;
    			}
    			void set(Windows::UI::Xaml::Controls::Primitives::Popup^ value)
    			{
    				PreferencesPopup = value;
    			}
    		}
    
    		property Windows::UI::Xaml::Controls::Border^ LeftPopupBorder
    		{
    			Windows::UI::Xaml::Controls::Border^ get()
    			{
    				return PopupBorder;
    			}
    			void set(Windows::UI::Xaml::Controls::Border^ value)
    			{
    				PopupBorder = value;
    			}
    		}
    
    	};
    }
    

    And the code to show the popup dialog

        // Create dialog MaprojOptionsDialog 
        // PreferencesDialog^ m_preferencesDialog;
        if ( m_preferencesDialog==nullptr )
            m_preferencesDialog = ref new PreferencesDialog();
        
        // Dismiss top and bottom AppBars
        MainPageBottomAppBar->IsOpen = false;
        MainPageTopAppBar->IsOpen = false;
    
        // Open the popup at right
    	auto windowBounds = Window::Current->Bounds;
    	m_preferencesDialog->PopupDialog->HorizontalOffset = windowBounds.Width- m_preferencesDialog->Width;
    	m_preferencesDialog->PopupDialog->VerticalOffset = 0; //windowBounds.Height- m_preferencesDialog->Height;
        m_preferencesDialog->LeftPopupBorder->Height = windowBounds.Height;
    
        m_preferencesDialog->PopupDialog->IsOpen = true; 
    

    Thursday, November 01, 2012 9:51 AM
  • How about change the UserControl Height as the Window's Height.

     

    Best regards,

    Jesse



    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    Thursday, November 01, 2012 10:35 AM
  • Did you mean this:

    // m_preferencesDialog is derived from UserControl
    m_preferencesDialog->Height = windowBounds.Height;
    
    Unfortunately it does not work
    Thursday, November 01, 2012 2:33 PM