Voraussetzungen

Die erforderlichen Libraries können alle über NuGet hinzugefügt werden.

Außer den üblichen Verdächtigen wie Callisto und dem MVVM Light Toolkit ist dies noch Win8nl. Letzteres hat auch noch eine Reihe von Abbhängigkeiten zu Rx-Libraries sowie zu WinRtBehaviors.

Zudem muss noch das Bing Maps SDK für Windows Store apps installiert werden.

 

Erste Schritte

Am besten einfach den nummerierten ToDos aus der Task List folgen (Doppelklick!) und das Framework den eigenen Bedürfnissen anpassen.

image

 

Details zum Binding der PushPins

Über attached Properties können Center und Zoom gebunden werden (siehe Zeile 3 und 4). Ein Two-Way Binding ist damit aber leider nicht möglich.

Für dIe beiden Layers wird jeweils ein MapItemControl verwendet und dessen Property ItemsSource an eine ObservableCollection gebunden und ein entsprechendes ItemTemplate angegeben.

Beim zweiten MapItemsControl ist zusätzlich noch die Visibility gebunden, und zwar an eine Eigenschaft im SettingsViewModel; damit lässt sich dieses Layer ganz leicht ein- und ausblenden.

<bing:Map x:Name="MapControl"
            Credentials="{Binding MapsKey}"
            mapExtensions:MapExtensions.Center="{Binding Center}"
            mapExtensions:MapExtensions.Zoom="{Binding Zoom}">
    <bing:MapItemsControl ItemTemplate="{StaticResource FinanzamtTemplate}" 
                          ItemsSource="{Binding Finanzaemter}" />
    <bing:MapItemsControl ItemTemplate="{StaticResource SonderObjektTemplate}"
                          ItemsSource="{Binding SonderObjekte}"
                          Visibility="{Binding Settings.ShowSonderObjekte, Source={StaticResource Locator}, Converter={StaticResource BooleanToVisiblityConverter}}" />
</bing:Map>

So sieht das erste ItemTemplate aus:

Mit der attached Property MapExtensions.Location wird die Location jedes Pushpins gebunden. (Zeile 4)

Mit einer EventToCommandBehavior wird das “Tapped” Event mit einem Command verknüpft. Da der DataContext dieses Templates ja das Item (hier Finanzamt) ist, könnte das Command einfach eine Property in der Model-Klasse sein. Da die Navigation aber sicher keine Aufgabe des Models ist, wurde das Command im ViewModel definiert und es wird noch ein CommandParameter des auslösenden Items mitgegeben. Das ViewModel ist der DataContext des Parent-Controls, welches über ElementBinding angesprochen wird.

<DataTemplate x:Key="FinanzamtTemplate">
    <Grid HorizontalAlignment="Center"
            VerticalAlignment="Center"
            mapExtensions:MapExtensions.Location="{Binding Location}">
        <winRtBehaviors:Interaction.Behaviors>
            <behaviors:EventToBoundCommandBehavior 
                Command="{Binding DataContext.GoToDetailCommand, ElementName=MapControl}"
                CommandParameter="{Binding KurzZeichen}"
                Event="Tapped" />
        </winRtBehaviors:Interaction.Behaviors>
        <ToolTipService.ToolTip>
            <StackPanel>
                <Image Source="{Binding Image}" />
                <TextBlock Text="{Binding Name}" />
            </StackPanel>
        </ToolTipService.ToolTip>
        <Border Height="24"
                MinWidth="40"
                MaxWidth="100"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Background="Green"
                CornerRadius="10"
                Padding="5">
            <TextBlock Foreground="White"
                        Text="{Binding Id}"
                        TextAlignment="Center" />
        </Border>
    </Grid>
</DataTemplate>

 

Wer vermeiden möchte, den Typ Location in seinen Models und ViewModels zu verwenden – schließlich ist das eine UI Klasse – der kann auch zwei weitere Extension Methoden zum direkten Binden von Latitude und Longitude verwenden. Das zweite ItemTemplate für die Sonderobjekte zeigt die Verwendung.

<DataTemplate x:Key="SonderObjektTemplate">
    <Grid Width="30"
          Height="30"
          ToolTipService.ToolTip="{Binding Name}"
          mapExtensions:MapExtensions.Latitude="{Binding Latitude}"
          mapExtensions:MapExtensions.Longitude="{Binding Longitude}">
        <Ellipse Fill="HotPink" />
        <TextBlock VerticalAlignment="Center"
                    Foreground="White"
                    Text="{Binding Id}"
                    TextAlignment="Center" />
    </Grid>
</DataTemplate>

Happy Coding!

Last edited Dec 5, 2012 at 12:24 AM by devionics, version 6

Comments

jmayrbaeurl Dec 12, 2012 at 9:10 AM 
Wie bzw. wo findet man die oben beschriebene Task Liste? Ich habe den Source über Codeplex als Zip Datei heruntergeladen und wenn ich, wie oben beschrieben, das Task Fenster öffne, bekomme ich nur eine leere Liste.