Login-popup not working when rotating

问题:

I have a code that looks like this

<Popup IsOpen="True" Margin="200" Height="260" Width="900">
   <Grid Height="250">
      <TextBlock Style="{StaticResource HeaderTextStyle}" Text="Login" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Top" Height="50" />
      <TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="" Margin="0,63,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
      <TextBox Name="InputUsername" Margin="0,63,0,0" HorizontalAlignment="Right" Height="40" Width="650"/>
      <TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="" Margin="0,138,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
      <PasswordBox Name="InputPassword" Margin="0,0,138,0" HorizontalAlignment="Right" VerticalAlignment="Top" Height="40" Width="650"  />
      <Button Name="Login" Content="" Margin="200,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"  />
      <Button Name="Cancel" x:Uid="LoginPopupCancel" Content="" Margin="300,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
   </Grid>
</Popup>

But it does not work, when I rotate the screen, what could be wrong?

UPDATE

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="100" />
      <RowDefinition Height="100" />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="Brugernavn" />
   <TextBox Name="InputUsername" />
   <TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="Adgangskode" />
   <PasswordBox Name="InputPassword" />
</Grid>

I am trying to find a fix, but this sets all the boxes and blocks below each other, how can I fix this?
D'oh I forgot to set Grid.Column and Grid.Row

回答1:

You need to add a Visual State for the Portrait view and, inside of it, handle the position of the Popup Element.

<VisualState x:Name="FullScreenPortrait">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Margin"> <!--Example-->
                        <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,0"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>

You need to target every component adjust the Margin so they fit and look good. Otherwise, you can just support the landscape view and your problem is over.