prs/prs.desktop/Panels/Maps/MapsPanel.xaml

<UserControl x:Class="PRSDesktop.MapsPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
             xmlns:dynamicGrid="clr-namespace:InABox.DynamicGrid;assembly=InABox.Wpf"
             xmlns:prsDesktop="clr-namespace:PRSDesktop"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    
    <UserControl.DataContext>
        <prsDesktop:MapViewModel x:Name="ViewModel" />
    </UserControl.DataContext>
    
    <UserControl.Resources>
        <prsDesktop:TestConverter x:Key="TestConverter" />
        <DataTemplate x:Key="MapMarkerTemplate" DataType="{x:Type syncfusion:CustomDataSymbol}"  >
            <Border
                    x:Name="_border"
                    CornerRadius="0,10,10,10"
                    BorderBrush="Black"
                    BorderThickness="0.75"
                    Background="{Binding ., Converter={StaticResource TestConverter}}"
                    Padding="5,2,5,2"
                    PreviewMouseDown="Image_PreviewMouseDown">
                <Label
                    Content="{Binding ., Converter={StaticResource TestConverter}}"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    FontSize="10"
                    Background="Red"
                    Foreground="Yellow"/>
            </Border>
        </DataTemplate>
        <!-- -->
        <!-- <DataTemplate x:Key="MapWayPointTemplate" DataType="{x:Type prsDesktop:MapMarker}"> -->
        <!--     <Border  -->
        <!--         x:Name="_border"  -->
        <!--         CornerRadius="0,10,10,10" -->
        <!--         BorderBrush="Black"  -->
        <!--         BorderThickness="0.75"  -->
        <!--         Background="Green" -->
        <!--         Padding="5,2,5,2" > -->
        <!--         <Label  -->
        <!--             x:Name="Code"  -->
        <!--             Content="Time"  -->
        <!--             HorizontalContentAlignment="Center" -->
        <!--             VerticalContentAlignment="Center" -->
        <!--             FontSize="10" -->
        <!--             Background="Yellow" -->
        <!--             Foreground="Red"/> -->
        <!--     </Border> -->
        <!-- </DataTemplate> -->
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="400" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Margin="0,0,2,0" BorderBrush="Gray"
                BorderThickness="0.75" Padding="5">
            <Slider x:Name="Zoom" Orientation="Vertical" ValueChanged="Zoom_ValueChanged" Minimum="1" Maximum="20"
                    Value="11" />
        </Border>
        
        <syncfusion:SfMap x:Name="Map" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" BorderBrush="Gray"
                          BorderThickness="0.75" PreviewMouseWheel="Map_PreviewMouseWheel"
                          PreviewMouseDoubleClick="Map_PreviewMouseDoubleClick" PreviewMouseUp="Map_PreviewMouseUp">
            <syncfusion:SfMap.Layers>
                <syncfusion:ImageryLayer
                    x:Name="ImageryLayer"
                    LayerType="Bing"
                    BingMapKey="5kn7uPPBBGKdmWYiwHJL~LjUY7IIgFzGdXpkpWT7Fsw~AmlksNuYOBHNQ3cOa61Nz2ghvK5EbrBZ3aQqvTS4OjcPxTBGNGsj2hKc058CgtgJ"
                    BingMapStyle="Road"
                    Center="-31.95105, 115.85939"
                    Radius="10"
                    Markers="{Binding Markers}"
                    MarkerTemplate="{StaticResource MapMarkerTemplate}">
                    <!-- <syncfusion:ImageryLayer.SubShapeFileLayers> -->
                    <!--     <syncfusion:SubShapeFileLayer > -->
                    <!--         <syncfusion:SubShapeFileLayer.MapElements > -->
                    <!--             <syncfusion:MapPolyline Stroke="DarkBlue" StrokeThickness="5" Points="{Binding WayPoints}" /> -->
                    <!--         </syncfusion:SubShapeFileLayer.MapElements> -->
                    <!--     </syncfusion:SubShapeFileLayer> -->
                    <!-- </syncfusion:ImageryLayer.SubShapeFileLayers> -->
                    
                </syncfusion:ImageryLayer>
            </syncfusion:SfMap.Layers>
        </syncfusion:SfMap>
        
        <Border Grid.Column="2" Grid.Row="0" Margin="4,0,0,0" BorderBrush="Gray" BorderThickness="0.75"
                Background="WhiteSmoke">
            <StackPanel Orientation="Vertical">
                <Label Content="Map Options" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
                <ComboBox x:Name="Viewstyle" Margin="5,0,5,5" SelectedIndex="0"
                          SelectionChanged="Viewstyle_SelectionChanged" Visibility="Collapsed">
                    <ComboBoxItem x:Name="OSMViewStyle" Content="Open Street Map" />
                    <ComboBoxItem x:Name="BingStandardViewStyle" Content="Bing Standard View" />
                    <ComboBoxItem x:Name="BingTerrainViewStyle" Content="Bing Terrain View" />
                    <ComboBoxItem x:Name="BingTerrainLabelsViewStyle" Content="Bing Terrain with Labels" />
                    <ComboBoxItem x:Name="GoogleMapsViewStyle" Content="Google Maps" />
                </ComboBox>
                <ComboBox x:Name="ViewType" Margin="5,0,5,5" Visibility="Visible" />
                <ComboBox x:Name="ViewGroup" Margin="5,0,5,5" DisplayMemberPath="Value" SelectedValuePath="Key" />
            </StackPanel>
        </Border>

        <dynamicGrid:DynamicTabControl 
            x:Name="TabView"
            Grid.Column="2" 
            Grid.Row="1" 
            Margin="4,2,0,0" 
            BorderBrush="Gray"
            BorderThickness="0.75" 
            Background="WhiteSmoke" 
            TabStripPlacement="Bottom" 
            SelectionChanged="TabView_PageChanged">
            
            <dynamicGrid:DynamicTabItem Header="Marker List">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <ListView Grid.Row="0" Grid.Column="0" x:Name="Markers" Margin="5,5,5,0"
                              MouseDoubleClick="Markers_MouseDoubleClick"
                              ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                              SelectionChanged="Markers_SelectionChanged">
                        <ListView.Resources>
                            <Style TargetType="{x:Type GridViewColumnHeader}">
                                <Setter Property="HorizontalContentAlignment" Value="Left" />
                            </Style>
                        </ListView.Resources>
                        <ListView.View>
                            <GridView>
                                <GridViewColumn Header="Code" DisplayMemberBinding="{Binding Code}" Width="100" />
                                <GridViewColumn Header="Description" DisplayMemberBinding="{Binding Description}"
                                                Width="188" />
                                <GridViewColumn Header="Updated"
                                                DisplayMemberBinding="{Binding Updated, StringFormat='{}{0:dd MMM yy}'}"
                                                Width="85" />
                            </GridView>
                        </ListView.View>

                    </ListView>
                    <DockPanel Grid.Row="2" Grid.Column="0">
                        <Button x:Name="ResetView" DockPanel.Dock="Right" Content="Reset View" Margin="5" Width="70"
                                Click="ResetView_Click" />
                        <CheckBox x:Name="ShowAll" DockPanel.Dock="Left" Content="Include Hidden Markers" Margin="5"
                                  HorizontalContentAlignment="Left" VerticalContentAlignment="Center"
                                  Checked="IncludeVisibleMarkers_Checked" Unchecked="IncludeVisibleMarkers_Checked"
                                  IsThreeState="False" />
                    </DockPanel>
                </Grid>
            </dynamicGrid:DynamicTabItem>
            
            <dynamicGrid:DynamicTabItem Header="Marker Details">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Margin="5" Content="Name" VerticalContentAlignment="Center" />
                    <TextBox Grid.Row="0" Grid.Column="1" x:Name="Description" Margin="5"
                             HorizontalContentAlignment="Left" VerticalContentAlignment="Center" />
                    <Label Grid.Row="1" Grid.Column="0" Margin="5,0,5,5" Content="Updated"
                           VerticalContentAlignment="Center" />
                    <TextBox Grid.Row="1" Grid.Column="1" x:Name="LastUpdate" Margin="5,0,5,5"
                             HorizontalContentAlignment="Left" VerticalContentAlignment="Center" />
                    <Label Grid.Row="2" Grid.Column="0" Margin="5,0,5,5" Content="Updated By"
                           VerticalContentAlignment="Center" />
                    <TextBox Grid.Row="2" Grid.Column="1" x:Name="Device" Margin="5,0,5,5"
                             HorizontalContentAlignment="Left" VerticalContentAlignment="Center" />

                    <Border BorderBrush="Gray" BorderThickness="0.75" Padding="0,5,0,0" Grid.Row="3" Grid.Column="0"
                            Grid.ColumnSpan="2" Margin="5" Background="White">
                        <syncfusion:CalendarEdit x:Name="Date" ShowAbbreviatedMonthNames="True"
                                                 AllowMultiplySelection="False" DateChanged="Date_DateChanged"
                                                 BorderBrush="Transparent" />
                    </Border>


                    <ListView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" x:Name="History" Margin="5,0,5,5"
                              MouseDoubleClick="History_MouseDoubleClick"
                              ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                        <ListView.Resources>
                            <Style TargetType="{x:Type GridViewColumnHeader}">
                                <Setter Property="HorizontalContentAlignment" Value="Left" />
                            </Style>
                        </ListView.Resources>
                        <ListView.View>
                            <GridView>
                                <GridViewColumn Header="Date"
                                                DisplayMemberBinding="{Binding Date, StringFormat='{}{0:HH:mm}'}"
                                                Width="40" />
                                <GridViewColumn Header="Activity" DisplayMemberBinding="{Binding Description}"
                                                Width="315" />
                            </GridView>
                        </ListView.View>
                    </ListView>

                </Grid>
            </dynamicGrid:DynamicTabItem>
            
        </dynamicGrid:DynamicTabControl>

    </Grid>
</UserControl>