Centrer un contrôle WPF

Question

J'ai une fenêtre où j'ajoute un nouveau UserControl (avec une image), je veux simplement centrer le contrôle au milieu de l'écran (verticalement et horizontalement). Je peux seulement faire fonctionner le vertical. Je vais échanger du contenu dans le DockPanel de mon CodeBehind et je veux montrer cet écran de démarrage avant de commencer à faire mon diaporama, cela signifie que le contenu est défini à partir du CodeBehind.

Mon Window:

<Window x:Class="GreenWebPlayerWPF.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="512" Width="853" WindowStyle="None" WindowState="Maximized" WindowStartupLocation="CenterScreen"> 
    <DockPanel Width="Auto" Height="Auto" Name="TransitionContainer" Background="Black" Margin="0" LastChildFill="True"></DockPanel> 
</Window> 

Mon UserControl:

<UserControl x:Class="GreenWebPlayerWPF.FrontPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <DockPanel Background="Black"> 
     <Image Name="image1" Stretch="None" Source="/GreenWebPlayerWPF;component/gw.png" /> 
    </DockPanel> 
</UserControl> 

S'il vous plaît noter que je suis en utilisant l'écran maximisé/plein.

Answer 1

Utilisez un Grid:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <!-- Replace with your UserControl --> 
    <Button Content="Foo" Grid.Column="1" Grid.Row="1"/> 
    </Grid> 

Vous pouvez l'ancrer dans votre DockPanel (si vous devez avoir une il DockPanel) à étirer. Et, bien sûr, alors que tout ce qui précède est tout le balisage, vous pouvez tout aussi facilement créer une telle grille à partir du code.

Answer 2

Je continue à courir dans ce problème en essayant de centrer des éléments sur la page. Le problème avec le StackPanel est que HorizontalAlignment n'a aucun effet lorsque l'Orientation est Horizontal et VerticalAlignment aucun effet lorsque l'Orientation est Vertical. Donc, vous continuez à frapper la tête en essayant de définir des valeurs sans effet. Il n'est pas illogique que cela fonctionne de cette façon, mais ce serait bien si cela a été signalé comme une erreur.

La solution que j'ai trouvée est d'avoir deux StackPanels imbriqués, l'un centré horizontalement et l'autre verticalement, comme indiqué ci-dessous. Trouver la taille du parent est nécessaire pour dimensionner le panneau intermédiaire sinon il serait plat et son contenu caché - une valeur absolue fonctionnerait aussi bien. Bien que n'étant pas une panacée, il est un peu moins verbeux que d'utiliser une grille.

<StackPanel Background="Bisque" Orientation="Vertical" Width="300" Height="300" > 
    <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" 
        Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=StackPanel}, Path=ActualHeight}"> 
     <StackPanel VerticalAlignment="Center" Width="200" Height="60" Background="Blue"> 
     </StackPanel> 
    </StackPanel> 
</StackPanel>