2012-12-16 15 views
5

Ho creato un Popup utilizzando il seguente codice, ma non riesco a capire come centrarlo
Ho provato a cambiare automaticamente il margine su runtime, ma non riuscivo a capire come farlo , ma qualcuno ha un'idea di come centrare il popup?
Non ha una causa standard dimensione ho bisogno di globalizzare il mio programmapopup centrale in XAML

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Name="MainGrid"> 
    <Popup x:Uid="LoginPopup" IsOpen="True" Name="LoginPopup"> 
     <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <TextBlock Margin="10" Grid.Column="0" Grid.Row="0" Text="App Name" Grid.ColumnSpan="2" Style="{StaticResource HeaderTextStyle}" /> 
     <TextBlock Margin="10" Grid.Column="0" Grid.Row="1" Text="Username" Style="{StaticResource ResourceKey=SubheaderTextStyle}" /> 
     <TextBox Margin="10" Grid.Column="1" Grid.Row="1" Name="InputUsername" /> 
     <TextBlock Margin="10" Grid.Column="0" Grid.Row="2" Text="Password" Style="{StaticResource ResourceKey=SubheaderTextStyle}" /> 
     <PasswordBox Margin="10" Grid.Column="1" Grid.Row="2" Name="InputPassword" /> 
     <StackPanel Margin="10" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Orientation="Horizontal"> 
      <Button Name="Login" x:Uid="LoginPopupLogin" /> 
      <Button Name="Cancel" x:Uid="LoginPopupCancel" /> 
     </StackPanel> 
     </Grid> 
    </Popup> 
</Grid> 

UPDATE

ho provato con la risposta di user1603313 di sotto, ma non ha fatto il trucco, come dice il la dimensione della griglia all'interno del popup è NaN.
Ho anche cercato di spostare il metodo nella rete, ma non ha fatto il trucco sia
Il metodo di cui sto parlando è questo con la griglia aggiornata correttamente

private void LoginPopup_Loaded_1(object sender, RoutedEventArgs e) 
{ 
    LoginPopup.HorizontalOffset = (Window.Current.Bounds.Width - gdChild.ActualWidth)/2; 
    LoginPopup.VerticalOffset = (Window.Current.Bounds.Height - gdChild.ActualHeight)/2; 
} 
+0

Sarete pensa flyout. http://msdn.microsoft.com/en-us/library/windows/apps/hh465354.aspx –

+0

@SinanErgin Mentre leggo, Flyouts è solo per HTML – The87Boy

+0

ah, è vero. i flyout non possono essere usati xaml + C#/vb. Buoni funzionamenti;) –

risposta

8

Ecco una soluzione per voi problema . sto riscrivendo il codice xaml e insieme alla modifica e puoi trovare la spiegazione dopo il codice.

 <Popup x:Uid="LoginPopup" IsOpen="True" Name="LoginPopup" Loaded="LoginPopup_Loaded_1"> 
     <Grid Background="Red" x:Name="gdChild" Height="Auto" Width="Auto"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto" /> 
       <RowDefinition Height="Auto" /> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <TextBlock Margin="10" Grid.Column="0" Grid.Row="0" Text="App Name" Grid.ColumnSpan="2" Style="{StaticResource HeaderTextStyle}" /> 
      <TextBlock Margin="10" Grid.Column="0" Grid.Row="1" Text="Username" Style="{StaticResource ResourceKey=SubheaderTextStyle}" /> 
      <TextBox Margin="10" Grid.Column="1" Grid.Row="1" Name="InputUsername" /> 
      <TextBlock Margin="10" Grid.Column="0" Grid.Row="2" Text="Password" Style="{StaticResource ResourceKey=SubheaderTextStyle}" /> 
      <PasswordBox Margin="10" Grid.Column="1" Grid.Row="2" Name="InputPassword" /> 
      <StackPanel Margin="10" Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Orientation="Horizontal"> 
       <Button Name="Login" x:Uid="LoginPopupLogin" /> 
       <Button Name="Cancel" x:Uid="LoginPopupCancel" /> 
      </StackPanel> 
     </Grid> 
    </Popup> 

Qui ho aggiunto un evento Loaded="LoginPopup_Loaded_1" alla XAML del popup

Ecco il codice evento in C#

private void LoginPopup_Loaded_1(object sender, RoutedEventArgs e) 
    { 
     LoginPopup.HorizontalOffset = (Window.Current.Bounds.Width - gdChild.ActualWidth)/2; 
     LoginPopup.VerticalOffset = (Window.Current.Bounds.Height - gdChild.ActualHeight)/2; 
    } 

Spiegazione:

HorizontalOffset ottiene la distanza tra la sinistra lato della finestra dell'applicazione e il lato sinistro del popup.

scostamento Analogamente verticale ottiene la distanza tra la parte superiore della finestra e superiore della comparsa

Poiché abbiamo centrare allinearlo così dobbiamo sottrarre metà della larghezza e l'altezza della comparsa della larghezza e l'altezza della finestra dell'applicazione (il centro del popup è metà della distanza del popup dal suo limite superiore e sinistro)

il codice viene scritto nell'evento Loaded="LoginPopup_Loaded_1" perché questo evento viene chiamato quando l'elemento viene visualizzato nell'applicazione finestra e Griglia è presa perché è la griglia del contenitore di tutti gli elementi figlio.

Spero m chiaro :)

+0

Questo era in realtà quello che stavo cercando, ma non pensavo a Loaded;) Forse puoi dirmi la differenza tra x: Nome e Nome? Mi sembra di essere veloce, perché dice che l'altezza e la larghezza della griglia è NaN – The87Boy

+0

E la dimensione della griglia? – The87Boy

+0

E è possibile eseguire Carica quando lo schermo viene ruotato? – The87Boy

0

sulla x: nome e il nome attributo u chiesto che cosa mi spiego sarà stesso quanto scritto nel link qui sotto

x:name and name difference silverlight

e anche passare attraverso questo link per WPF

In WPF, what are the differences between the x:Name and Name attributes?

Come per la mia comprensione generale il nome è ap roperty della classe (es: Grid o TextBlock e molti altri) ma è necessario accedere a classi che non hanno un attributo name come (es: StoryBoard ecc.) quindi a tale scopo x: name is provided. Durante il metodo initializecomponent chiama la x: nome e nome sono mappati alla classe usando il metodo FindName(string) per renderli accessibili.

ora ciò che accade internamente è una lunga storia tagliato corto

MainPage.xaml -> MainPage.gics -> MainPage.xaml.cs

1

Re: Ed è possibile eseguire Loaded, quando la lo schermo è ruotato? - The87Boy 24 min fa

risposta è sì, si può eseguire lo stesso set di codice con la creazione di un metodo e chiamare tale metodo su Window.Current.SizeChanged += Current_SizeChanged;

void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) 
    { 
     //call custom method from loaded event as well as size changed event 
    }