We Keep Coding

UWP MapControl inW WPF app using XAML Islands

I have included a MapControl in my WPF Core application using these instructions. I can correctly display the map but the problem is when I try to place any other interface element on top of the map. I have tried many ways but the map always overlays any other element I place on top of it, and therefore does not display. For example:
<Window x:Class="WpfMapControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfMapControl"
xmlns:controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
mc:Ignorable="d"
Title="MainWindow" Height="400" Width="400">
<Grid>
<controls:MapControl Grid.Column="1"
x:Name="mapControl"/>
<Rectangle Width="100" Height="100" Fill="Red"></Rectangle>
</Grid>
This should look like this:
But the result is this:
How can I place any other element on top of the MapControl?

How can I place any other element on top of the MapControl?
Short answer: You can't.
Just like a Windows Forms control in a WindowsFormsHost, a WindowsXamlHost is hosted in a separate HWND that is always drawn on top of the WPF elements.
From the docs:
A hosted Windows Forms control is drawn in a separate HWND, so it is always drawn on top of WPF elements.

How to implement a window that sits on top and reduces the working space area, using C# and WPF?

I have a WPF window declared like this
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MyWindow"
Height="800" Width="200"
BorderThickness="0"
WindowStyle="None"
AllowsTransparency="False"
ResizeMode="CanResizeWithGrip"
Topmost="True"
Background="#fff59d"
ShowInTaskbar="False">
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="0" ResizeBorderThickness="5" />
</WindowChrome.WindowChrome>
</Window>
In this window there are a bunch of aligned buttons, making the window a nice tool bar that sits on top of the other windows.
Now I'd like to snap it to a screen edge (bottom, left, top, right) so that the working area of the screen is reduced by the window's area. Just like what happens with the Windows taskbar: the area covered by the taskbar is not used when other windows are maximized and the taskbar is always on top.
Any help is much appreciated !
EDIT
I'm adding an image to better explain my question:
I'm interested in position my WPF window on an edge so that the area of the window is forbidden to other windows.

First use Top="0" Left="0" to snap your "nice tool bar window" to the top and left edges of the screen. Second use the event Window_Loaded to set the window height equal to the screen height minus the taskbar height so that it will not be on top of it.
Side note Title doesn't make sens in your case
XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="200"
BorderThickness="0"
WindowStyle="None"
AllowsTransparency="False"
ResizeMode="CanResizeWithGrip"
Topmost="True"
Top="0"
Left="0"
Loaded="Window_Loaded"
Background="#fff59d"
ShowInTaskbar="False">
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="0" ResizeBorderThickness="5"/>
</WindowChrome.WindowChrome>
</Window>
Code-Behind:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
double TaskBarHeight = SystemParameters.PrimaryScreenHeight - SystemParameters.WorkArea.Height;
Height = SystemParameters.PrimaryScreenHeight - TaskBarHeight;
}
Edit
As #Bradley_Uffner explained in his comment you need an AppBar, you may want to take a look at Github.WpfAppBar or better check your options in this answer C# Window Docking.

You should check the "GridSplitter" control:
https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-resize-columns-with-a-gridsplitter
You should change your window(toolbar) to make it a UserControl so you can insert it in another window with GridSplitter on all edges (bottom, left, top, right). As for the "snap" part, I think you will have to handle the drag and drop event and hide/show the gridsplitters accordingly and either show/hide or add/remove the UserControl (your toolbar) behind the GridSplitter.
Sorry that I do not give much detail for the implementation, I believe there is quite a lot to do.
I would be very interested in another solution if someone knows a better way.
I know that the Telerik library(not free) provide a control for that https://docs.telerik.com/devtools/wpf/controls/raddocking/overview2

WPF Colors different from images and web

I've been creating custom color resources in my WPF apps and the colors in the WPF form do not match the original colors from the images.
In the above I have chosen a blue color at random, and made a form with that color as its background. Source code below:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid Background="#2E4272">
</Grid>
</Window>
What am I missing?
Edit:
I'm trying to identify the root cause and I'm getting a strange phenomena that I will try to explain. So, first I took an image with a color I liked and used the eye dropper tool in adobe illustrator to determine its color. Then I used that color in my WPF form. They didn't match so I put the two next to each other and did a screen capture.
I then opened that screen capture in illustrator and the part from WPF gave me the right hex value (the same as the original image) and if I put them next to each other they look the same. The part of the screen capture that was the original logo is some other color. So...if I take a screen capture from my computer the WPF color get turned back to the right color and the original color gets changed to something else.

Prevent resizing of page window in WPF

I have a WPF app that is set to a specific size for a reason. However the user still has the ability to resize the page. I have set all the maximum page sizes and have achieved three different results, none of which suit my need.
1) The window goes full screen with my app in the top left corner. The rest of the screen is filled with the page background colour.
2) The window goes full screen, page stays central and the rest of the screen is filled with white space.
3) This is the worst solution... The window resizes and shows all the junk i have lying around outside of the page!
All i want to do is prevent someone from changing the window size at all! I am new to wpf and especially new to xaml so want time to learn how to set up auto resizing properly. unfortunately now is not that time (deadlines!).
Thanks

All i want to do is prevent someone from changing the window size at all!
Set the ResizeMode property of the Window to NoResize then:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="Window13" Height="300" Width="300" ResizeMode="NoResize">
...
If you do want the user to be able to resize the window it can never have a fixed size...

Horizontal scrolling to navigate between the windows of application

I would like to create an application with two or three screens for pc with tactile screen by using c# and WPF.
I would like to be able to navigate through the windows of my application by sliding the finger across the screen (left to right for previous screen or right to left for next screen).
How to proceed with c# and wpf ? What are the controls to use ? MatrixTransform and Manipulation events ? Scrollviewer ?
How to make the different windows of the application attached while gliding ? I mean: for right to left slide operation, we begin to see the next window while the current window disappears step by step.

My answer takes into account your additional comments, especially this one "There will be only two or three windows and each window keeps its fix relative position.". It suggests that you actually don't need windows. It'll be sufficient and much more easier to use custom user controls. These controls should placed next to each other. You can achieve it by using StackPanel with the horizontal orientation. This StackPanel should be inside ScrollViever which will provide scrolling. Additionally, ScrollViewer has PanningMode property which controls how it will cooperate with touch screens. Here is an example showing an idea:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
Height="600"
Width="800">
<ScrollViewer HorizontalScrollBarVisibility="Hidden" PanningMode="HorizontalOnly">
<StackPanel Orientation="Horizontal">
<UserControl Width="500" Height="500" Background="Red" />
<UserControl Width="500" Height="500" Background="Blue" />
<UserControl Width="500" Height="500" Background="Yellow" />
</StackPanel>
</ScrollViewer>
</Window>