Discussion :

[Erakis]

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]

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]

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]

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

[Erakis]

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]

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>

[binoo]

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>