We Keep Coding

The image is cropped when the window is resized

I decided to migrate my application from WindForms to WPF and faced the following problem: My image is cropped inexplicably.
Can you help me? What am I doing wrong?
Before resizing
https://ibb.co/z4yYdJn
After resizing
https://ibb.co/6J60Sfc
<Window x:Class="ClientWPF.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:ClientWPF"
mc:Ignorable="d"
Title="Test WPF" Height="535" Width="567" Background="#FF1D1E20">
<Grid>
<Image x:Name="back_1" Source="/Resources/background_1.png" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="None"/>
<Image x:Name="back_2" Source="/Resources/background_2.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="None"/>
<Image Margin="192,75,188,236" Width="160" Height="160" Source="/Resources/logo.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</Window>

I found my mistake. Image cropped due to property: Margin="192,75,188,236"

Avoid blank window shown before MediaElement

I have created a WPF C# application.
I have put a MediaElement into it which plays a video. When i run the application, a blank window which is the parent window of MediaElement is shown for a second or 2 and then video starts playing.
I don't want to show this blank window. I just wanna show the video directly.
Do anyone know how to fix this, please help.
Thanks in advance.
<Window x:Class="MyWindow.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:MyWindow"
mc:Ignorable="d"
Title="" Height="2160" Width="3840"
WindowState="Maximized"
WindowStartupLocation="CenterScreen"
Loaded="Window_Loaded"
WindowStyle="None"
AllowsTransparency="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="320*"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<MediaElement x:Name="MediaPlayer" Grid.RowSpan="2" LoadedBehavior="Manual" Loaded="MediaPlayer_Loaded" MediaEnded="MediaPlayer_MediaEnded" Source="Video.mp4" Margin="0,0,0,0"/>
<Label Name="My_Content" Content="My Content" Width="500" Height="100" HorizontalAlignment="Center" VerticalAlignment="Bottom" Canvas.Top="1598" Foreground="White" FontSize="48" FontFamily="font_family" FontWeight="Regular" Margin="1666,0,1666,30"/>
<Label Name="My_Label" Content="My Label" Width="1000" Height="100" Canvas.Top="10" Foreground="White" FontSize="48" FontFamily="font_family" FontWeight="Regular" Margin="1376,46,1456,145" Grid.Row="1"/>
<Image Name="My_Image" Source="Photo.png" InkCanvas.Top="530" InkCanvas.Left="2330" Width="1400" Height="660"/>
</Grid>
</Window>

Positioning controls - WPF

I am in the process of teaching myself WPF and have an issue that is confusing me. In the XAML below when I open the app the label and image are in the top left part of the window, but when I maximize the window they shift towards the middle. What am I missing that will make the controls keep their relative position?
<Window x:Class="WafLuckyDog.Presentation.Views.ShellWindow"
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:vm="clr-namespace:WafLuckyDog.Applications.ViewModels"
mc:Ignorable="d" Title="{Binding Title}" Icon="{StaticResource ApplicationIcon}" Width="994.273" Height="840"
d:DataContext="{d:DesignInstance vm:ShellViewModel}">
<Window.Background>
<ImageBrush ImageSource="{StaticResource Background}"></ImageBrush>
</Window.Background>
<DockPanel Margin="0,0,-539,0">
<Grid>
<Image Name="Logo" HorizontalAlignment="Left" Margin="0,10,0,669" Width="129"
Source="{StaticResource Logo}" />
<Label Content="Label" HorizontalAlignment="Left" Margin="10,145,0,0" VerticalAlignment="Top" Foreground="AntiqueWhite"/>
</Grid>
</DockPanel>
</Window>

First, you have a DockPanel that has no close tag and is doing nothing, it will give a compile error, so remove it. Also, remove the bottom margin and add a Height and VerticalAlignment properties. The VerticalAlignment and HorizontalAlignment ensures a top right corner anchor.
<Window x:Class="WafLuckyDog.Presentation.Views.ShellWindow"
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:vm="clr-namespace:WafLuckyDog.Applications.ViewModels"
mc:Ignorable="d" Title="{Binding Title}" Icon="{StaticResource ApplicationIcon}" Width="994.273" Height="840"
d:DataContext="{d:DesignInstance vm:ShellViewModel}">
<Window.Background>
<ImageBrush ImageSource="{StaticResource Background}"></ImageBrush>
</Window.Background>
<Grid>
<Image Name="Logo" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Width="129" Height="129"
Source="{StaticResource Logo}" />
<Label Content="Label" HorizontalAlignment="Left" Margin="10,145,0,0" VerticalAlignment="Top" Foreground="AntiqueWhite"/>
</Grid>
</Window>

How can set absolute position on stackpanel or grid in xaml WPF

Is it possible to set my StackPanel or Grid to be position absolute like CSS.
In CSS is have property Position of the elements and can set to be relative, absolute and is working good.
In XAML can make Grid, StackPanel to use position absolute.

You have to use Canvas in order to set absolute position in WPF.
In case of buttons in a window, here is a sample :
<Window x:Class="tobedeleted.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"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Canvas>
<Button Canvas.Left="10" Canvas.Bottom="20">Bottom left</Button>
</Canvas>
</Window>
The output is :
Feel free to ask if help is needed.

Absolute positioning defeats the purpose of WPF, but I agree, sometimes there is no other way so you have two basic options.
Elements under the root grid
Elements in a canvas that is the same size as the window (as Vasilievski pointed out)
Code example:
<Window x:Class="WpfApplication1.Window3"
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="Window3" Height="300" Width="300">
<Grid>
<Rectangle Fill="Red" Width="100" Height="120"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Panel.ZIndex="13"
Margin="12,34"
/>
<Rectangle Fill="Green" Width="100" Height="120"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="24,54"
/>
<Canvas>
<Rectangle Canvas.Left="5" Canvas.Top="5" Panel.ZIndex="2" Fill="Yellow" Width="120" Height="30" />
<Rectangle Canvas.Left="25" Canvas.Top="17" Panel.ZIndex="0" Fill="Blue" Width="120" Height="30" />
</Canvas>
</Grid>
</Window>

try this.
<StackPanel>
<Canvas>
<TextBlock Canvas.Left="10" Canvas.Top="6" Text="Choose a value from combobox:" Width="180"/>
<ComboBox Canvas.Left="190" Canvas.Top="4" Width="180"></ComboBox>
</Canvas>
</StackPanel>
RESULT:

Xaml (Windows Phone 8 & Silverlight) usercontrol stacking issue

I have a usercontrol that I am placing in a grid. Inside the grid I am also drawing lines. These lines appear above the usercontrol like they should.
When the user clicks on my usercontrol, I am showing another part of the usercontrol, an xaml element (making it visible) and I need it to appear above the drawn lines.
I've tried Canvas.ZIndex. That seems to only work with elements inside my usercontrol. If I set the usercontrols ZIndex high, then it all appears above the lines.
Here is the Min working example:
I need the Blue square to stay below the black line and the yellow ellipse to be above the black line.
--Main Page--
<UserControl xmlns:SWE_UserControlOverlap="clr-namespace:SWE_UserControlOverlap" x:Class="SWE_UserControlOverlap.MainPage"
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"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<SWE_UserControlOverlap:SWE />
<Line Stroke="Black" StrokeThickness="10" Stretch="Fill" X1="0" Y1="0" X2="1" Y2="1"></Line>
</Grid>
</UserControl>
--UserControl--
<UserControl x:Class="SWE_UserControlOverlap.SWE"
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"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle Fill="Blue" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp_1"></Rectangle>
<Ellipse Margin="100" Fill="Yellow" ></Ellipse>
</Grid>
</UserControl>

Don't set a ZIndex on the control, just modify it for the sub controls.
<Line Canvas.ZIndex="1" />
<Rectangle Canvas.ZIndex="0" />
<Ellipse Canvas.ZIndex="2" />

As I found in various spots on the web - this is just not possible.