Using InkCanvas, Inktoolbar and maps together

Question

I'm trying to make a program where you can use Bing maps and draw on it. But I have a problem where the "InkCanvas" is above the map so I can't move around the map or use any of the buttons on the map.

Here's the MainPage.xaml code:

<Page xmlns:my="using:Windows.UI.Xaml.Controls.Maps"
x:Class="Drawit4you.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Drawit4you"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
        <InkToolbar x:Name="inkToolbar"
                    VerticalAlignment="Top"
                    Margin="10,0,10,0"
                    TargetInkCanvas="{x:Bind inkCanvas}">
        </InkToolbar>
    </StackPanel>
    <Grid Grid.Row="1">
        <my:MapControl
            x:Name="MyMap"
            MapServiceToken="MY-TOKEN"
            Style="AerialWithRoads"
            ZoomInteractionMode="GestureAndControl"
            TiltInteractionMode="GestureAndControl"
            RotateInteractionMode="GestureAndControl"/>
        <InkCanvas x:Name="inkCanvas" />
    </Grid>
</Grid>

and here's the MainPage.xaml.cs code:

    using Windows.UI.Xaml.Controls;

namespace Drawit4you
{

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            inkCanvas.InkPresenter.InputDeviceTypes =
            Windows.UI.Core.CoreInputDeviceTypes.Mouse |
            Windows.UI.Core.CoreInputDeviceTypes.Pen;
        }
    }
}

Is there any possible way that I can interact with the map and the buttons, without drawing and then by clicking on a button, start drawing on the map?

Answer 1

I found a solutions to my problem. By using a ToggleSwitch I can turn on and off the InkCanvas.

I added the following code to MainPage.xaml:

<ToggleSwitch OffContent="Tegn" OnContent="Kort" Toggled="ToggleSwitch_Toggled" Width="110" Margin="240,-37,0,0" VerticalAlignment="Top"/>

and the following code to MainPage.xaml.cs:

        private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
    {
        ToggleSwitch toggleSwitch = sender as ToggleSwitch;
        if (toggleSwitch != null)
        {
            if (toggleSwitch.IsOn == true)
            {
                inkCanvas.Visibility = Visibility.Collapsed;                    
            }
            else
            {
                inkCanvas.Visibility = Visibility.Visible;
            }
        }
    }