帶有C＃和MVVM信息框和圖釘綁定的Bing映射

Question

我正在嘗試為我的Windows 8.1程序實現地圖屏幕，並且將Bing Maps API與C＃和MVVM結合使用。

我面臨的問題：

首先，我可以使用xaml中的綁定在地圖上顯示圖釘和信息框，但是當我移動地圖時，信息框保持在同一位置（在這種情況下居中），而不是跟隨圖釘或地圖移動。

這里的xaml：

<bm:Map ZoomLevel="15" Height="500" Width="600" ShowTraffic="False" ShowScaleBar="False" ShowNavigationBar="False" ShowBreadcrumb="False" ShowBuildings="False"
            Credentials="xxxxxxx" Name="myMap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <bm:Map.Center>
            <bm:Location Latitude="-25.450520" Longitude="-49.251557" />
        </bm:Map.Center>

        <bm:Map.Children>

            <bm:MapLayer Name="DataLayer">
                <bm:Pushpin Style="{Binding PushpinStyle}">
                    <bm:MapLayer.Position>
                        <bm:Location Latitude="{Binding Establishment.Pin.Latitude, Mode=OneWay}" Longitude="{Binding Establishment.Pin.Longitude, Mode=OneWay}" />
                    </bm:MapLayer.Position>
                </bm:Pushpin>
            </bm:MapLayer>

            <bm:MapLayer Margin="5,0,0,0" Position="{Binding InfoboxPosition}" Height="Auto" Width="Auto" >
                <Grid x:Name="Infobox" Visibility="{Binding InfoboxVisibility}" Margin="35,0,0,0" Height="Auto" >
                    <Border MaxWidth="350" Style="{StaticResource InfoboxBorderStyle}" />
                    <StackPanel Margin="10" MinWidth="200" MaxWidth="350">
                        <Grid>
                            <TextBlock Text="{Binding Establishment.Name}" Style="{StaticResource InfoboxTitleStyle}" />
                        </Grid>
                        <TextBlock Text="{Binding EstablishmentAddress}" Style="{StaticResource InfoboxContentStyle}"  MaxWidth="290" Margin="7" />
                    </StackPanel>
                </Grid>
            </bm:MapLayer>

        </bm:Map.Children>

    </bm:Map>

其次，如果我的地圖上綁定了多個圖釘，則如何為每個圖釘添加“ Pushpin.Tapped”事件，從而調用從ViewModel移動並設置可見信息框的方法？ 目前，我使用諸如此類的簡單代碼隱藏（而非VM）使其工作：

public MapControl()
    {
        this.InitializeComponent();
        AddPushpin(new Location(-25.450520, -49.251557), "Title", "Description", DataLayer, EstablishmentKindEnum.Cinema);
    }

    private async void pushpinTapped(object sender, TappedRoutedEventArgs e)
    {
        Pushpin p = sender as Pushpin;
        PushpinMetadata m = (PushpinMetadata)p.Tag;

        //Ensure there is content to be displayed before modifying the infobox control
        if (!String.IsNullOrEmpty(m.Title) || !String.IsNullOrEmpty(m.Description))
        {
            Infobox.DataContext = m;
            Infobox.Visibility = Visibility.Visible;
            MapLayer.SetPosition(Infobox, MapLayer.GetPosition(p));
        }
        else
            Infobox.Visibility = Visibility.Collapsed;
    }

    private void CloseInfobox_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Infobox.Visibility = Visibility.Collapsed;
    }

    public void AddPushpin(Location latlong, string title, string description, MapLayer layer, EstablishmentKindEnum kind)
    {
        var pushpin = MapHelper.CreatePushpin(latlong, title, description, kind);
        MapLayer.SetPosition(pushpin, latlong);
        pushpin.Tapped += pushpinTapped;
        layer.Children.Add(pushpin);
    }

我需要通過ViewModel完成所有操作。 我是MVVM的新手，有人可以給我一些提示嗎？

Answer 1

我一直在閱讀有關MVVM的信息，有人說View應該負責所有演示交互，而ViewModel應該負責數據。

我將其與以下結構一起使用：

視圖：

<Grid>
    <bm:Map ZoomLevel="15" Height="500" Width="600" ShowTraffic="False" ShowScaleBar="False" ShowNavigationBar="False" ShowBreadcrumb="False" ShowBuildings="False"
            Credentials="xxxxxx" Name="myMap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContextChanged="Map_DataContextChanged">
        <bm:Map.Center>
            <bm:Location Latitude="-25.450520" Longitude="-49.251557" />
        </bm:Map.Center>

        <bm:Map.Children>

            <bm:MapLayer Name="DataLayer">
                <bm:Pushpin Style="{Binding PushpinStyle}">
                    <bm:MapLayer.Position>
                        <bm:Location Latitude="{Binding Establishment.Pin.Latitude, Mode=OneWay}" Longitude="{Binding Establishment.Pin.Longitude, Mode=OneWay}" />
                    </bm:MapLayer.Position>
                </bm:Pushpin>
            </bm:MapLayer>

            <bm:MapLayer Margin="5,0,0,0"  Height="Auto" Width="Auto" >
                <Grid x:Name="Infobox" Visibility="Collapsed" Margin="35,0,0,0" Height="Auto" >
                        <Border MaxWidth="350" Style="{StaticResource InfoboxBorderStyle}" />
                    <StackPanel Margin="10" MinWidth="200" MaxWidth="350">
                        <Grid>
                            <TextBlock Text="{Binding Establishment.Name}" Style="{StaticResource InfoboxTitleStyle}" />
                            <Button Tapped="CloseInfobox_Tapped" Style="{StaticResource InfoboxCloseButtonStyle}" />
                        </Grid>
                        <TextBlock Text="{Binding EstablishmentAddress}" Style="{StaticResource InfoboxContentStyle}"  MaxWidth="290" Margin="7" />
                    </StackPanel>
                </Grid>
            </bm:MapLayer>

        </bm:Map.Children>

    </bm:Map>
</Grid>

查看代碼背后：

public sealed partial class MapControl : UserControl
{
    public MapControl()
    {
        this.InitializeComponent();
    }

    private async void pushpinTapped(object sender, TappedRoutedEventArgs e)
    {
        Pushpin p = sender as Pushpin;
        Infobox.Visibility = Visibility.Visible;
        MapLayer.SetPosition(Infobox, MapLayer.GetPosition(p));
    }

    private void CloseInfobox_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Infobox.Visibility = Visibility.Collapsed;
    }

    private void Map_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
    {
        if (DataLayer.Children != null)
            foreach (var pin in DataLayer.Children)
            {
                pin.Tapped += pushpinTapped;
            }
    }
}

我的代碼背后是在數據源更改后將事件“ Pushpin.Tapped”添加到“ DataLayer”中的所有圖釘，並且還控制了信息框的位置和可見性。 我認為這不是打破模式的方法，如果你們有任何建議或意見，我將很高興聽到。