locked
popup control 100% width in xaml

    Question

  • Dear team

                    i am using popup control and i want in 100% width but i am not able to achieve it

     <ContentControl x:Name="Logincontainer" Height="400" Margin="0,194,0,0" HorizontalAlignment="Stretch" Width="auto">
                <Popup x:Name="logincontroler" IsOpen="False" HorizontalAlignment="Stretch" Width="auto">
                    <StackPanel Orientation="Vertical" Background="Purple" Height="350" x:Name="popup"  HorizontalAlignment="Stretch" >
                        <StackPanel>
                            <TextBlock Text="Sign In" HorizontalAlignment="Center" Foreground="White" FontSize="25" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="0,50" HorizontalAlignment="Center">
                            <TextBlock Text="Email id" Margin="10" Foreground="White" FontSize="25" />
                            <TextBox x:Name="id" Height="40" Margin="13,1" Width="408"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <TextBlock Text="Password" Foreground="White" FontSize="25" />
                            <PasswordBox x:Name="pwd" Height="40" Margin="5,1" Width="408"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Margin="0,50" HorizontalAlignment="Center">
                            <Button x:Name="loginclick" Foreground="Wheat"  Width="100" Content="Login" ></Button>
                            <Button x:Name="cancel" Foreground="Wheat" Width="100" Content="Cancel" ></Button>
                            <Button x:Name="SignIn" Foreground="Wheat" Width="100" Content="New Sign Up" ></Button>
                        </StackPanel>
                    </StackPanel>
                </Popup>
            </ContentControl>
    kindly help


    Friday, October 24, 2014 7:07 PM

Answers

  • The popup will be the size of what ever it's content is. If the content inside the popup is 200x200, the popup will be that same size. What I normally do, is have a grid wrapping my content and I set the grid' swidth and hight to be the entire screen size (Window.Current.Bounds.Width / Height). One thing to remember is to monitor the screen size change event, if the user turns the device, you will need to update the popup with the new size inside of the size change event. Hope this helps you.


    mark

    • Marked as answer by mann madhan1 Friday, October 24, 2014 10:31 PM
    Friday, October 24, 2014 8:36 PM

All replies

  • Hi Mann,

    Unfortunately, the Popup control is not a part of the same visual tree as the rest of the page. It means it does not react to properties such as HorizontalAlignment="Stretch". You can think of it as a separate embedded window.

    A pretty good explanation of what's going on is here. It's about vertical alignment but the same principles apply to the horizontal alignment:

    http://stackoverflow.com/questions/6170230/popup-control-verticalalignment-doesnt-catch

    Leszek


    My Apps



    • Edited by ata6502 Friday, October 24, 2014 8:19 PM
    Friday, October 24, 2014 8:17 PM
  • The popup will be the size of what ever it's content is. If the content inside the popup is 200x200, the popup will be that same size. What I normally do, is have a grid wrapping my content and I set the grid' swidth and hight to be the entire screen size (Window.Current.Bounds.Width / Height). One thing to remember is to monitor the screen size change event, if the user turns the device, you will need to update the popup with the new size inside of the size change event. Hope this helps you.


    mark

    • Marked as answer by mann madhan1 Friday, October 24, 2014 10:31 PM
    Friday, October 24, 2014 8:36 PM
  • You may refer to this link for more details

    http://www.c-sharpcorner.com/UploadFile/99bb20/show-popup-control-as-flyout-in-windows-store-apps-using-xam/

    Monday, November 3, 2014 7:59 AM