How to set the longitude and latitude from ViewModel in bing maps in windows phone 7

Question

I want to give the longitude and latitude from ViewModel.

Now i am using like:-

 private void button1_Click(object sender, RoutedEventArgs e)
    {
        Pushpin p = new Pushpin();
        p.Background = new SolidColorBrush(Colors.Yellow);
        p.Foreground = new SolidColorBrush(Colors.Black);
        p.Location = new GeoCoordinate(double.Parse(longitude.Text), double.Parse(latitude.Text));//Longitude and Latitude
        p.Content = "I'm here";//To show the place where it is located
        map1.Children.Add(p);
        map1.SetView(new GeoCoordinate(double.Parse(longitude.Text), double.Parse(latitude.Text), 200), 9);
    }

My Xaml is:-

  <Grid x:Name="MapPageUIContainer" Grid.Row="1" Margin="2,0,2,0">
        <my:Map CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" CredentialsProvider=""  Mode="AerialWithLabels" Height="543" HorizontalAlignment="Left" Name="map1" VerticalAlignment="Top" Width="480" Margin="2,100,0,0"  />
        <Border BorderBrush="Silver" BorderThickness="1" Height="100" HorizontalAlignment="Left" Margin="0,0,0,0" Name="border1" VerticalAlignment="Top" Width="476" Background="#FFA3A371">
            <TextBlock Text="Map Example" HorizontalAlignment="Center" FontSize="32" FontWeight="Bold" VerticalAlignment="Center" />
        </Border>
        <TextBox Height="72" HorizontalAlignment="Left" Margin="6,627,0,0" Name="longitude" Text="" VerticalAlignment="Top" Width="200" />
        <TextBox Height="72" HorizontalAlignment="Left" Margin="260,627,0,0" Name="latitude" Text="" VerticalAlignment="Top" Width="200" />
        <Button Content="Set" HorizontalAlignment="Left" Margin="190,690,0,0" Name="button1" VerticalAlignment="Top" Click="button1_Click" />
    </Grid>

Here i want to give the Pushpin, longitude, latitude from view model. Please let me know how to achieve this?

Thanks in advance..

I have try like this..

public class MapPageViewModel : ReactiveObject
{

    public static string _longitude;
    public string longitude
    {
        get { return _longitude; }
        set { this.RaiseAndSetIfChanged(x => x.longitude, value); }
    }

    public static string _latitude;
    public string latitude
    {
        get { return _latitude; }
        set { this.RaiseAndSetIfChanged(x => x.latitude, value); }
    }

    public ReactiveAsyncCommand setButton { get; set; }

    public MapPageViewModel()
    {
        setButton = new ReactiveAsyncCommand();
        setButton.Subscribe(x => {

            Pushpin p = new Pushpin();
            p.Background = new SolidColorBrush(Colors.Yellow);
            p.Foreground = new SolidColorBrush(Colors.Black);
            p.Location = new GeoCoordinate(double.Parse(longitude), double.Parse(latitude));
            p.Content = "I'm here";//To show the place where it is located
            //map1.Children.Add(p);
            //map1.SetView(new GeoCoordinate(double.Parse(longitude), double.Parse(latitude), 200), 9);
        });
    }


}

But i don't know how to set map1.Children.Add() and map1.SetView and how to bind these values in Map?

Hi Clemens. I have tried your instruction. But it showing error.

And also i have try this:-

public MapPageViewModel()
    {
        PushpinItems = new ObservableCollection<PushpinItem>();
        PushpinItem pp = new PushpinItem();
        setButton = new ReactiveAsyncCommand();
        setButton.Subscribe(x => {
            pp.Location = new GeoCoordinate(double.Parse(longitude), double.Parse(latitude));
            pp.Text = "I'm here";
            PushpinItems.Add(pp);
        });
    }

But here run time error happening. Please let me know where i did mistake.

Answer 1

In a proper MVVM approach you would usually have a MapItemsControl with an ItemTemplate for the Pushpin, and bind that to an ObservableCollection of pushpin data items in your view model:

public class PushpinItem
{
    public GeoCoordinate Location { get; set; }
    public string Text { get; set; }
}

public class MapPageViewModel : ReactiveObject
{
    public ObservableCollection<PushpinItem> PushpinItems { get; set; }
    ...

    public MapPageViewModel()
    {
        PushpinItems = new ObservableCollection<PushpinItem>();
        setButton = new ReactiveAsyncCommand();

        setButton.Subscribe(x =>
        {
            PushpinItems.Add(new PushpinItem
            {
                Location = new GeoCoordinate(...),
                Text = ...
            });
        });
    }
}

XAML:

<map:Map ...>
    <map:MapItemsControl ItemsSource="{Binding PushpinItems}">
        <map:MapItemsControl.ItemTemplate>
            <DataTemplate>
                <map:Pushpin Location="{Binding Location}" Content="{Binding Text}"
                             Background="Yellow" Foreground="Black"/>
            </DataTemplate>
        </map:MapItemsControl.ItemTemplate>
    </map:MapItemsControl>
</map:Map>

Answer 2

SetView From ViewModel @Clemens and this link is very helpful to me..!! Thanks for Both of them..!!