2012-02-09 4 views
6

je le code XAML suivant:Image étirée et centrée?

<Image Source="a.jpg" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/> 

et moi, visuellement, obtenu ceci:

enter image description here

(http://img810.imageshack.us/img810/2401/imagestretchuniform.png)

Avec Stretch="None", je suis arrivé ceci:

enter image description here

(http://img28.imageshack.us/img28/1783/imagestretchnone.png)

Maintenant, ce que je veux est de centrer l'image verticalement ou horizontalement avec Stretch="Uniform"! Seul le "plus petit" côté (avec Uniform) sera centré, à droite. Mais en ce moment, comme vous pouvez le voir sur les captures d'écran, l'image est tout simplement mis dans le coin supérieur gauche, même si je définissais HorizontalAlignment et VerticalAlignment-"Center"

Que dois-je faire?

tout le code est:

<UserControl [...]> 
    <Canvas Width="640" Height="480" Background="#FF881607"> 
     <Image Source="a.jpg" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/> 
    </Canvas> 
</UserControl> 

EDIT (Solution): Juste au cas où some1 a le même problème, voici comment je l'a résolu:

<Canvas Width="640" Height="480" Background="#FFAA00FF" > 
    <Image Source="z.jpg" Height="480" Width="640"/> 
</Canvas> 

C'est le même comportement comme HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" L'image est extensible à uniforme (si l'image est plus petite ou plus grande que le canevas) et il est centré à la fois verticalement et horizontalement!

+0

Pouvez-vous poster aussi Xaml autour? Peut-être qu'un parent de l'image n'est pas centré ou étiré. – Botz3000

+0

l'a ajouté à la question! –

Répondre

7

Si vous le placez dans une grille, il sera centré automatiquement.

<Grid> 
    <Image Source="a.jpg"/> 
</Grid> 

Le contrôle complet avec quelques autres Grids:

<UserControl> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <Grid Grid.Row="0"> 
      <Image Source="a.jpg" Stretch="Uniform"/> 
     </Grid> 
     <Grid Grid.Row="1" Margin="10"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition/> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 
      <Button Grid.Column="0" Content="Start"/> 
      <Button Grid.Column="2" Content="Stop"/> 
     </Grid> 
    </Grid> 
</UserControl> 
+0

Ne fonctionne pas si je renonce à l'image avec une grille et je ne veux pas utiliser une grille autour de mon Canvas ou de mon UserControl entier ... En fait, je ne veux pas du tout utiliser une grille. Peut-être que si je dois abandonner l'image mais ce n'est pas le cas en réalité –

+0

Voir ma réponse éditée de la façon dont vous pourriez obtenir la mise en page souhaitée. Vous ne devriez pas utiliser Canvas du tout. – Clemens

+0

c'est typiquement le genre de code que je ne veux pas utiliser! J'ai un code XAML propre en ce moment et je ne veux pas créer de lignes; colonnes, modèles et ce genre de choses:/ –

6

Canvas ne supporte pas la HorizontalAlignment de l'image. Si vous voulez une mise en page dynamique comme celle-ci, Canvas est un mauvais choix (il est utile si vous voulez réellement ignorer une telle disposition). Quelle est la raison exacte pour laquelle vous utilisez un canevas?
Il suffit d'utiliser une grille:

<Grid Background="#FF881607"> 
    <Image Source="a.jpg" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/> 
</Grid> 
+0

J'ai édité ma question avec la solution que j'ai trouvée! –

Questions connexes