Label au dessus d'une image

**Erakis** · 26/05/2008, 23h50

Bonjour à tous,

Je suis vraiment tout nouveau dans WPF

J'essais de placer une dizaine de label sur une grande image.

Voici ce que j'ai jusqu'ici :

Code :

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

1
2
3
4
5
6
7
 
<Grid>
<StackPanel Margin="180,0,0,0" Name="stackPanel1">
    <Image Source="/AgrilinkClient;component/Images/MonImage.jpg" Stretch="Fill"></Image>
    <Label Height="28" Name="label1" Width="120" Foreground="White">Information #1 :</Label>
</StackPanel>
</Grid>

Cependant, la label se place en-dessous de l'image et non au-dessus.
Comment faire ?
Merci pour votre aide

**binoo** · 27/05/2008, 01h03

Salut,

tu as juste à faire ça :

Code :

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

1
2
3
4
5
6
<Grid>
<StackPanel Margin="180,0,0,0" Name="stackPanel1">
    <Label Height="28" Name="label1" Width="120" Foreground="White">Information #1 :</Label>
    <Image Source="/AgrilinkClient;component/Images/MonImage.jpg" Stretch="Fill"></Image>
</StackPanel>
</Grid>

StackPanel est un conteneur dans lequel tu empiles tes contrôles. Par défaut, il a la propriété Orientation Vertical. La place du contrôle suit l'ordre définit dans le xaml.

Nb : tu peux définir cette propriété à Horizontal et l'ordre est alors de gauche à droite.

**Erakis** · 27/05/2008, 01h11

Merci pour ton aide, mais ça ne fonctionne pas

Ce que je veux, c'est de placer la LABEL au-dessus de l'image. Pas avant ou après.

L'idéal serait que je puisse ajouter un Uniformgrid par-dessus l'image et ainsi y disposer mes 10 labels.

Sinon, ben je me contenterais peut-être de spécifier les coordonnées x et y de chacune des labels...

**Thomas Lebrun** · 27/05/2008, 08h50

Essaye sans passer par un StackPanel, qui empile les éléments les uns sur les autres:

Code :

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

1
2
3
4
5
 
<Grid>
    <Label Height="28" Name="label1" Width="120" Foreground="White">Information #1 :</Label>
    <Image Source="/AgrilinkClient;component/Images/MonImage.jpg" Stretch="Fill"></Image>
</Grid>

Ou alors remplace ce StackPanel par un Canvas, qui te permettra de jouer avec la propriété Z-Index

**binoo** · 27/05/2008, 09h01

Tu peux aussi choisir de quadriller ton image avec une Grid en faisant ainsi :

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
17
18
19
20
21
22
      <Grid Height="{Binding ElementName=MonImage2, Path=Height}" Width="{Binding ElementName=MonImage2, Path=Width}">
        <Image x:Name="MonImage2" Height="120" Width="120" 
             Source="/AgrilinkClient;component/Images/MonImage.jpg" />
 
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.3*" />
            <ColumnDefinition Width="0.3*" />
            <ColumnDefinition Width="0.3*" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="0.3*" />
            <RowDefinition Height="0.3*" />
            <RowDefinition Height="0.3*" />
          </Grid.RowDefinitions>
 
          <Label Grid.Column="0" Grid.Row="0" Content="TOTO" HorizontalAlignment="Center" VerticalAlignment="Center" />
          <Label Grid.Column="1" Grid.Row="1" Content="TITI" HorizontalAlignment="Center" VerticalAlignment="Center" />
          <Label Grid.Column="2" Grid.Row="2" Content="TUTU" HorizontalAlignment="Center" VerticalAlignment="Center" />
 
        </Grid>
      </Grid>

**Erakis** · 27/05/2008, 20h02

Envoyé par Thomas Lebrun

Essaye sans passer par un StackPanel, qui empile les éléments les uns sur les autres:

Code :

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

1
2
3
4
5
 
<Grid>
    <Label Height="28" Name="label1" Width="120" Foreground="White">Information #1 :</Label>
    <Image Source="/AgrilinkClient;component/Images/MonImage.jpg" Stretch="Fill"></Image>
</Grid>

Ou alors remplace ce StackPanel par un Canvas, qui te permettra de jouer avec la propriété Z-Index

J'ai essayé et ça fonctionne

Code :

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

1
2
3
4
5
 
<Canvas Margin="180,0,0,0" ClipToBounds="True">
   <Image Source="/AgrilinkClient;component/Images/Earth.jpg" Stretch="Fill" ClipToBounds="False" StretchDirection="Both"></Image>
    <Label Height="28" Name="lbHour" Width="86" Foreground="White" Canvas.Left="26" Canvas.Top="29">Heure actuel :</Label>
</Canvas>

Sauf que mon image est beaucoup plus grande que la taille de mon canvas. J'aimerais qu'elle soit stretché au canvas mais cela ne fonctionne pas. Même avec l'attribut Stretch="Fill".

Je ne comprend pas

**binoo** · 27/05/2008, 20h20

Le code suivant doit te permettre de faire ce que tu veux :

Code xml :

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

1
2
3
4
5
6
7
<Canvas x:Name="canvas1" Height="240" Width="400"
  Margin="180,0,0,0" ClipToBounds="True">
   <Image Height="{Binding ElementName=canvas1, Path=Height}" 
     Width="{Binding ElementName=canvas1, Path=Width}"
     Source="/AgrilinkClient;component/Images/Earth.jpg" ClipToBounds="False" StretchDirection="Both" />
    <Label Height="28" Name="lbHour" Width="86" Foreground="White" Canvas.Left="26" Canvas.Top="29">Heure actuel :</Label>
</Canvas>

**Erakis** · 27/05/2008, 20h34

En fait, je ne connais pas la taille du canvas. Il doit être ajusté à la taille de la fenêtre moins 180pixels à gauche.

Voici l'interface complet :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    <Grid>
        <Canvas HorizontalAlignment="Left" Name="CanvasGauche" Width="180">
        <!-- Liste de boutons vertical... --> 
        </Canvas>
 
        <Canvas Margin="180,0,0,0" Name="CanvasDroite" ClipToBounds="True">
            <Image Source="/MonProjet;component/Images/MonImage.jpg" Height="{Binding ElementName=CanvasDroite, Path=Height}" Width="{Binding ElementName=CanvasDroite, Path=Width}" Stretch="Fill"></Image>
 
            <Label Height="28" Name="lb1" Foreground="White" Canvas.Left="24" Canvas.Top="28">...</Label>
            <Label Height="28" Name="lb2" Foreground="White" Canvas.Left="54" Canvas.Top="28">...</Label>
           <!-- Une vingtaine d'autre comme ça... -->
        </Canvas>
    </Grid>

Comme le canvas de gauche est une menu il doit être fixe avec une largeur de 180 pixels. Tandis que le canvas de droite lui doit s'ajuster à la taille de la fenêtre moins 180 pixels en largeur. Enfin bref, je suis sur que vous comprendez

Et biensur l'image dans le canvas doit se stretché au Canvas "CanvasDroite".

Jusqu'ici tout va très bien avec votre solution, cependant l'image est CROPPÉ au lieu d'être stretché

**binoo** · 27/05/2008, 20h58

Voici une solution (qui je pense cette fois ci te conviendra, pas sur pas sur

) :

Code xml :

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
17
18
19
20
21
22
23
24
25
26
27
  <Grid x:Name="MainGrid" >
 
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="180" />
      <ColumnDefinition Width="0.2*" />
    </Grid.ColumnDefinitions>
 
    <Canvas Grid.Column="0" Name="CanvasGauche" Width="180" >
      <!-- Liste de boutons vertical... -->
    </Canvas>
 
    <Grid Grid.Column="1" x:Name="GridImgLabel" >
 
      <Image x:Name="Img" Source="/MonProjet;component/Images/MonImage.jpg" 
             Stretch="Fill" />
 
      <Canvas Name="CanvasDroite" ClipToBounds="True" Width="{Binding ElementName=Img, Path=Width}" Height="{Binding ElementName=Img, Path=Height}" >
 
        <Label Height="28" Name="lb1" Foreground="Red" Canvas.Left="24" Canvas.Top="28">...</Label>
        <Label Height="28" Name="lb2" Foreground="Red" Canvas.Left="54" Canvas.Top="28">...</Label>
        <!-- Une vingtaine d'autre comme ça... -->
 
      </Canvas>
 
    </Grid>
 
  </Grid>