StackPanel Overlapping RadMap

[Alex]

Hello,

I have a TabControl with many different tabs on it. In three of the tabs I use a RadMap. The user has the ability to click a button which brings up a stackpanel over the map to change the location of the geopath in the current radmap. But when I try to input values into the textboxes inside the stackpanel nothing happens. As if the stackpanel doesn't exist. I hover around the stackpanel and the menus from radmap show up. I have set the ZIndex, right clicked radmap and clicked "send to back" and right clicked the stackpanel and clicked send to front without success. Do you have have a way to make this work right? I've attached a screenshot to try to explain what is happening.

Thanks,

Alex

[Andrey]

Hello Alex,

Unfortunately we were unable to reproduce the problem without your specific XAML and code behind. Could you create a small sample application that we can use to observe the problematic behavior?

Here is the XAML and code behind I've used to reproduce the problem (without success):

<UserControl x:Class="RadMapInTabControl.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadTabControl>
            <telerik:RadTabItem Header="Map">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <telerik:RadMap x:Name="radMap"
                        Center="0,0"
                        ZoomLevel="1">
                        <telerik:RadMap.Provider>
                            <telerik:OpenStreetMapProvider />
                        </telerik:RadMap.Provider>
                    </telerik:RadMap>

                    <StackPanel Name="bottomPanel"
                                VerticalAlignment="Bottom"
                                Visibility="Collapsed"
                                Background="Gray">
                        <TextBlock HorizontalAlignment="Center" Text="Some map settings" />
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <TextBox Width="200" />
                            <RadioButton GroupName="OnOff">
                                <TextBlock Text="On" />
                            </RadioButton>
                            <RadioButton GroupName="OnOff">
                                <TextBlock Text="Off" />
                            </RadioButton>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal"
                                    HorizontalAlignment="Center"
                                    Margin="0,6,0,0">
                            <TextBox Width="200" />
                            <RadioButton GroupName="OnOff">
                                <TextBlock Text="On" />
                            </RadioButton>
                            <RadioButton GroupName="OnOff">
                                <TextBlock Text="Off" />
                            </RadioButton>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal"
                                    HorizontalAlignment="Center"
                                    Margin="0,6,0,0">
                            <TextBox Width="200" />
                            <RadioButton GroupName="OnOff">
                                <TextBlock Text="On" />
                            </RadioButton>
                            <RadioButton GroupName="OnOff">
                                <TextBlock Text="Off" />
                            </RadioButton>
                        </StackPanel>
                    </StackPanel>

                    <Button Click="ShowPanel"
                            Grid.Column="1"
                            VerticalAlignment="Top">
                        <TextBlock Name="actionButtonText" Text="Show Panel" />
                    </Button>
                </Grid>
            </telerik:RadTabItem>
        </telerik:RadTabControl>
    </Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace RadMapInTabControl
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void ShowPanel(object sender, RoutedEventArgs e)
        {
            this.bottomPanel.Visibility = this.bottomPanel.Visibility == System.Windows.Visibility.Collapsed ?
                System.Windows.Visibility.Visible : System.Windows.Visibility.Collapsed;
            this.actionButtonText.Text = this.bottomPanel.Visibility == System.Windows.Visibility.Collapsed ?
                "Show panel" : "Hide panel";
        }
    }
}

Greetings,
Andrey Murzov
the Telerik team

[Alex]

<sdk:TabItem Margin="0,0,0,3" Header="Loc" BorderThickness="0,0,1,0" Padding="0" ><Grid>
                <telerik:RadMap NavigationVisibility="Collapsed" x:Name="RadMap1" ZoomLevel="10" DistanceUnit="Mile"  Height="389" VerticalAlignment="Top" Margin="8,7,0,0" Center="{Binding LastLocationCenter}">
                    <telerik:RadMap.Provider>
                        <telerik:BingMapProvider ApplicationId="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
                    </telerik:RadMap.Provider>

                    <telerik:InformationLayer>
                        <telerik:MapPinPoint telerik:MapLayer.Location="{Binding LastLocationCenter}"
                                                        ImageSource="../images/Car-icon.png"
                                             />
                    </telerik:InformationLayer>
                </telerik:RadMap>
                <StackPanel x:Name="stackPanel1" Margin="84,0,64,-16" Orientation="Vertical" VerticalAlignment="Bottom" Height="45">
                        <Grid>
                            <Button Command="{Binding CloseLocationDetailsCommand, Mode=TwoWay}" >
                                <Button.Template>
                                    <ControlTemplate TargetType="Button">
                                        <Grid>
                                            <Path Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Fill="#FF363636" Data="F1 M 721.102,519.796C 721.102,519.796 719.039,512.759 717.386,507.833C 715.735,502.907 713.669,500.796 708.715,500.796L 508.863,500.796L 311.491,500.796C 306.535,500.796 304.47,502.907 302.819,507.833C 301.167,512.759 299.103,519.796 299.103,519.796L 721.102,519.796 Z " Height="20.333" Margin="0,0,0.667,0" UseLayoutRounding="False"/>
                                            <TextBlock x:Name="Details" Text="DETAILS" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#838383" FontWeight="Bold"  FontSize="14" IsHitTestVisible="False"/>
                                            <Path Stretch="Fill" Fill="#FF838383" Data="F1 M 696.817,506.242L 691.567,514.117L 702.067,514.117" HorizontalAlignment="Center" Height="7.875"  UseLayoutRounding="False" VerticalAlignment="Center" Width="10.5" Margin="180,0,0,0" RenderTransformOrigin="0.5,0.5" IsHitTestVisible="False">
                                                <Path.RenderTransform>
                                                    <CompositeTransform Rotation="180"/>
                                                </Path.RenderTransform>
                                            </Path>
                                            <Path Stretch="Fill" Data="F1 M 721.102,519.796C 721.102,519.796 719.039,512.759 717.386,507.833C 715.735,502.907 713.669,500.796 708.715,500.796L 508.863,500.796L 311.491,500.796C 306.535,500.796 304.47,502.907 302.819,507.833C 301.167,512.759 299.103,519.796 299.103,519.796L 721.102,519.796 Z " Height="20.333" Margin="0,0,0.667,0" UseLayoutRounding="False"/>
                                        </Grid>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>
                            <Button x:Name="button1" Command="{Binding OpenLocationDetailsCommand, Mode=TwoWay}" Margin="0,0,0,0" VerticalAlignment="Bottom">
                                <Button.Template>
                                    <ControlTemplate TargetType="Button">
                                        <Grid>
                                            <Path Stretch="Fill" StrokeThickness="1.33333" StrokeLineJoin="Round" Fill="#FF363636" Data="F1 M 721.102,519.796C 721.102,519.796 719.039,512.759 717.386,507.833C 715.735,502.907 713.669,500.796 708.715,500.796L 508.863,500.796L 311.491,500.796C 306.535,500.796 304.47,502.907 302.819,507.833C 301.167,512.759 299.103,519.796 299.103,519.796L 721.102,519.796 Z " Height="20.333" Margin="0,0,0.667,0" UseLayoutRounding="False"/>
                                            <TextBlock x:Name="Details" Text="DETAILS" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#838383" FontWeight="Bold"  FontSize="14" IsHitTestVisible="False"/>
                                            <Path Stretch="Fill" Fill="#FF838383" Data="F1 M 696.817,506.242L 691.567,514.117L 702.067,514.117" HorizontalAlignment="Center" Height="7.875"  UseLayoutRounding="False" VerticalAlignment="Center" Width="10.5" Margin="180,0,0,0" IsHitTestVisible="False"/>
                                            <Path Stretch="Fill" Data="F1 M 721.102,519.796C 721.102,519.796 719.039,512.759 717.386,507.833C 715.735,502.907 713.669,500.796 708.715,500.796L 508.863,500.796L 311.491,500.796C 306.535,500.796 304.47,502.907 302.819,507.833C 301.167,512.759 299.103,519.796 299.103,519.796L 721.102,519.796 Z " Height="20.333" Margin="0,0,0.667,0" UseLayoutRounding="False"/>
                                        </Grid>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button></Grid>
                            <StackPanel Orientation="Horizontal" Background="#FFCECECE" Height="100">
                                <TextBlock Text="{Binding LastLocationAddress}"  FontSize="14" VerticalAlignment="Center" Margin="125,0,0,0" HorizontalAlignment="Center"/>
                            </StackPanel>

                    </StackPanel>
                    </Grid>
            </sdk:TabItem>

[Alex]

^^^^That is the code I'm currently using.

[Andrey]

Hello Alex,

Unfortunately this XAML is not enought to reproduce the problem. It contains some data bindings and commands we have not any information how they should be implemented and how they work. Your screenshot contains few controls (text boxes, numeric up-down, buttons and radio buttons), but your XAML have not any one. The stack panel itself (as it is presented in your XAML) does not produce effect you've described.

Could you create a small sample application which will contains ALL necessary parts (XAML, code bihind, resources and so on) that we can use to observe the problematic behavior?

Best wishes,
Andrey Murzov
the Telerik team

[Alex]

I made a sample project and it actually works fine when I attempt to recreate.

Can you guys see anything weird in the code that could be causing the behavior seen in the screenshots? I know that's hard to do without being able to recreate. But maybe looking at the code you might find something that I'm missing?

Thanks,

Alex

[Evgenia]

Hello Alex,

Could you please open a formal support thread and send us the project you mentioned so that we will be able to investigate it and help you?
Also it will be great if you can use it as a single thread for communication. This way it will be easier for both sides to follow the posts.

Looking forward to hearing from you!

Regards,
Evgenia
the Telerik team