Positionner des objets sur une image de façon dynamique

Version imprimable

Bonjour !

Pour un projet qui fait appel à une cartographie simplifiée, j'affiche une mapemonde sur laquelle je zoome via des appels a des Xaml différents contenants les images que je recherche

Par exemple Monde > Europe > France.

Je me suis pour ça servi un peu du très bon petit projet de G Roux. (merci à lui ^^) http://blog.developpez.com/broux/p60...ises-en-silve/

Par contre je n'ai pas trouvé de moyen de faire apparaitre des villes sur ma carte, autrement qu'en créant des images sous forme de Canvas dans une Grid.

C'est un peu lourd et je souhaiterais récupérer les coordonnées d'une ville (la Margin en somme) qui seraient stockées en base, et les afficher.

Code:

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
28
29
30
31
32
        <Canvas Name="Geneva" VerticalAlignment="Top"  HorizontalAlignment="Left" Margin="44,55,0,0"
                Visibility="{Binding ElementName=europa, Path=IsZoomed, Mode=OneWay, Converter={StaticResource visibilityConverter}}">
 
 
            <TextBlock Name="textGeneva"   Text="Geneva" FontSize="3" Foreground="Orange" Visibility="Collapsed"  />
 
            <Ellipse Name="geneva"   Height="2" Width="2" Fill="Orange" MouseEnter="geneva_MouseEnter" 
                       MouseLeave="geneva_MouseLeave" Canvas.Top="4" Canvas.Left="10" Cursor="Hand"/>
 
        </Canvas>
<Canvas Name="Lyon" VerticalAlignment="Top"  HorizontalAlignment="Left" Margin="41,62,0,0"
                Visibility="{Binding ElementName=europa, Path=IsZoomed, Mode=OneWay, Converter={StaticResource visibilityConverter}}">
 
 
            <TextBlock Name="textLyon"   Text="Lyon" FontSize="3" Foreground="Orange" Visibility="Collapsed" Canvas.Top="2" />
 
            <Ellipse Name="lyon"  Height="2" Width="2" Fill="Orange" MouseEnter="lyon_MouseEnter" MouseLeftButtonUp="lyon_MouseLeftButtonUp"
                       MouseLeave="lyon_MouseLeave" Canvas.Top="0" Canvas.Left="9" Cursor="Hand"/>
 
        </Canvas>
 
 
        <Canvas Name="London" VerticalAlignment="Top"  HorizontalAlignment="Left" Margin="31,44,0,0"
                Visibility="{Binding ElementName=europa, Path=IsZoomed, Mode=OneWay, Converter={StaticResource visibilityConverter}}">
 
 
            <TextBlock Name="textLondon"   Text="London" FontSize="3" Foreground="Orange" Visibility="Collapsed" />
 
            <Ellipse Name="london"  Height="2" Width="2" Fill="Orange" MouseEnter="london_MouseEnter" 
                       MouseLeave="london_MouseLeave" Canvas.Top="4" Canvas.Left="9" Cursor="Hand"/>
 
        </Canvas>

Ca serait largement pus maintenable et sympathique.

Quelqu'un sait-il si c'est seulement possible ? Je ne crois pas qu'on puisse insérer à la volée des canvas dans une Grid de façon dynamique ?

Ou voyez-vous une autre solution ?

D'avance merci, et bonne prog' !

D.

Bonjour,

La manière la plus élégante de faire cela est d'utiliser, en surimpression de l'image de la région, une ListBox (ou un ItemsControl si tu ne veux pas de gestion de selection) :)

En effet, tu peux customiser une ListBox comme tu le souhaites et pas seulement en utilsant un StackPanel. Dans l'exemple on remplace le StackPanel classiquement utiliser pour ajouter des items de haut en bas par un Canvas (et non un Grid) :
Code:

1 2 3 4 5 6 7 <ListBox> <ListBox.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox>
Il ne reste plus qu'ajouter ton Canvas en ItemTemplate de ta ListBox
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <ListBox> <ListBox.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <Canvas Name="Geneva" Canvas.Left="{Binding PositionX}" Canvas.Top="{Binding PositionY}"> <TextBlock Name="textGeneva" Text="Geneva" FontSize="3" Foreground="Orange" Visibility="Collapsed" /> <Ellipse Name="geneva" Height="2" Width="2" Fill="Orange" MouseEnter="geneva_MouseEnter" MouseLeave="geneva_MouseLeave" Canvas.Top="4" Canvas.Left="10" Cursor="Hand"/> </Canvas> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
En affectant à l'ItemsSource de ta ListBox la liste des villes que tu veux voir apparaître (en oubliant pas de rajouter les propriété PositionX et PositionY à ton objet Ville) tu obtiens l'effet escompté :)

Les villes peuvent bien sur être stockées dans une base de donnée.

02/11/2011, 13h08
derfez

Merci !

:)
14/11/2011, 09h24
Samuel Blanchard

Ton problème est résolu finalement ?
14/11/2011, 09h44
derfez

Sur l'affichage dynamique, oui c'est résolu et merci encore ! :)

Par contre, j'ai ce souci sur l'accès aux propriétés de mon Canvas, dans les méthodes citées.