Centrer verticalement une fenêtre modale sur l'écran

**abbepierre94** · 25/09/2011, 12h00

Bonjour à tous

J'utilise Silverlight 3 et je ne parviens pas à centrer verticalement une fenêtre modale sur mon écran. J'arrive à la centrer sur ma page XAML, mais si cette page prend 5 écrans en hauteur et que je me trouve au 2ème écran en haut, j'aimerais que la fenêtre modale apparaisse au milieu du 2ème écran (où je me trouve), et non au milieu du 3ème écran.

D'un point de vue code, j'en suis là :
- Page XAML : embarque le UserControl, avec la visibilité Visible ou Collapsed.

- UserControl XAML :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
...
...
  <Grid x:Name="LayoutRoot">
    <Border Width="300" Height="300">
      ...
      ...
    </Border>
  </Grid>
</UserControl>

Juste pour vous guider, si je met VerticalAlignment="Top" sur le Border, la fenêtre modale apparaît tout en haut de la page XAML.

Merci de votre aide !

**Samuel Blanchard** · 26/09/2011, 15h22

Hello,

Je suis désolé mais la description de ton problème est incompréhensible

Le problème vient de la position externe de ta fenêtre ou du positionnement interne ?

**abbepierre94** · 26/09/2011, 17h52

Ah, désolé Samuel

Pour faire plus clair, j'illustre mon problème avec une image.

L'image montre la popup bleue qui apparaît en bas. La popup est verticalement centrée sur la page (il faut regarder la scrollbar pour comprendre ce que je dis), mais pas centrée sur l'écran. Je voudrais qu'elle soit centrée sur l'écran.

Merci d'avance

**Samuel Blanchard** · 26/09/2011, 18h13

Oui c'est plus clair merci

Le comportemement naturel d'une fenetre est de se placer au centre de la page. Si ta page fait plusieurs écran tu vas avoir effectivement un problème.

Le plus simple, serait de reconsidérer la taille de ta page et non le placement de ta fenetre.

Ainsi si tu mets le contenu de ta page dans un ScrollViewer c'est le scrollviewer qui grandira et pas ta page. donc plus de problème de centrage de fenetre :

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<Grid x:Name="LayoutRoot">
<ScrollViewer>
    <!-- ici le contenu original de LayoutRoot -->
</ScrollViewer>
</Grid>

**abbepierre94** · 26/09/2011, 22h10

J'ai pas bien compris ce que tu expliques, mais j'ai quand même essayé ta solution. Ca me rajoute une scrollbar dans laquelle il n'y a jamais d'ascenseur (peu importe la quantité de données en "hauteur"), et la popup réapparaît invariablement au milieu de la page, et non de l'écran

En fait, je peux formuler ma demande plus simplement : comment placer un UserControl en plein milieu de la page, et qui flotte en restant au milieu même si je scroll ma page en haut ou en bas ?
En HTML il suffit de jouer avec position-absolute

Merci d'avance

**Skyounet** · 27/09/2011, 02h51

En mettant ton controle par dessus le scrollviewer et pas dedans.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<Grid>
   <ScrollViewer>
      ...
   </ScrollViewer>
   <local:TonUserControl />
</Grid>

**Samuel Blanchard** · 27/09/2011, 08h00

euuuh ça m'étonnerait Benjamin, à moins que j'ai mal compris le problème

A mon avis, tu as fixé une taille fixe à son tag Silverlight dans la page HTML/ASPX (d'ou le scroll HTML de la page). ATTENTION ce n'est pas dans le XAML mais dans la page HTML et ASPX !

Dans l'exemple ci-dessous j'ai mis une hauteur à 3000 pixels (en gras) dans le tag Silverlight et l'on retrouve le fameux scroll en provenance de la page HTML (en non Silverlight):

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="3000">
		  <param name="source" value="ClientBin/SilverlightTest.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="4.0.50826.0" />
		  <param name="autoUpgrade" value="true" />
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		  </a>
	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

Tu dois remettre 100% dans la propriété Height (en gras) pour que ton control Silverlight prenne 100% de la page HTML.

puis tu peux mettre une hauteur de 3000 pixel dans le ScrollViewer :

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<Grid>
  <ScrollViewer>
    <Grid Height="3000">
         <!-- Je mets ici ce que je veux -->
    </Grid>
  </ScrollViewer>
</Grid>

**Skyounet** · 27/09/2011, 15h51

Je dois pas avoir compris le problème alors.

**Samuel Blanchard** · 27/09/2011, 16h03

Si tu regardes le screenshot envoyé par abbepierre94 on voit que le scroll n'est pas un scroll Silverlight mais de type HTML. C'est donc que le container Silverlight sur la page HTML est definie à une taille superieur à la taille du navigateur.

**abbepierre94** · 27/09/2011, 20h26

Si tu regardes le screenshot envoyé par abbepierre94 on voit que le scroll n'est pas un scroll Silverlight mais de type HTML. C'est donc que le container Silverlight sur la page HTML est definie à une taille superieur à la taille du navigateur.

Ah zut... En fait Samuel, j'ai fabriqué un screenshot au pif. La scrollbar que j'ai dans mon appli est bel et bien une scrollbar Silverlight. Donc désolé de t'avoir induit en erreur

Mais je suis toujours pas sûr de m'être bien expliqué. Je voudrais qu'un UserControl Silverlight se mette par-dessus ma page Silverlight, en plein milieu, et reste en plein milieu même si je scroll la page Silverlight (avec scrollbar Silverlight). Voilà

J'ai encore cherché, mais en vain.
Merci encore, et merci d'avance

**Samuel Blanchard** · 27/09/2011, 21h14

Ah ouai d'accord

Bon ben il faut faire faire comme Sky à dit alors...
Sorry Benjamin, c'est moi qu'avait pas capter finalement

**abbepierre94** · 27/09/2011, 23h52

Ah ouais, la solution de Sky fonctionne !!!

Merci beaucoup à vous !!! Finalement, c'est encore plus simple qu'en HTML !

Bon, je suis juste un peu embêté parce que mon ScrollViewer se trouve 2 niveaux au-dessus de ma popup, en terme de parenté de UserControl, c-a-d que j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
MasterPage.xaml
<Page Master XAML>
  <ScrollViewer>
    <UserControl1 />
  </ScrollViewer>
</Page>

UserControl1.xaml (fichier séparé)
<UserControl1>
  <UserControl2 />
</UserControl1>

UserControl2.xaml (fichier séparé)
<UserControl2>
  <Popup flottante />
</UserControl2>

Je pense qu'il va falloir que je déclare toutes les popups flottantes dont j'aurai besoin dans mon appli dans la MasterPage, et que dans mes UserControl j'y accède via :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(Application.Current.RootVisual as MasterPage).Popup...

Si vous avez une meilleure solution je suis preneur, si non, je ferme le topic.
Merci beaucoup en tout cas

Centrer verticalement une fenêtre modale sur l'écran

Silverlight

Discussions similaires

Partager

Partager