Discussion :

[derfez]

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 xaml :

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
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.

[Samuel Blanchard]

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 XAML :

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

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 XAML :

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
 
<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.

[derfez]

Merci !

[Samuel Blanchard]

Ton problème est résolu finalement ?

[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.