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>

StackPanel not showing up when running UWP app (C#)

I am taking my first steps into UWP app development as I'm tired of any non-web development I do (e.g. WinForms) looking like something from 1995 no matter how I try to pretty it up.
I have been mucking around and produced using the designer, a page with an image, and a stackpanel filled with buttons. The designer view shows the stackpanel fine
And this is my XAML
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
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 Margin="48,10,0,0">
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" Margin="200,86,1113,247" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
</Page>
However, when I run the app, the stackpanel doesn't show up (nor do any of the buttons inside it). I'm stumped. I tried setting the stackpanel "To Front" in terms of order, but no dice. Clearly my novice skills are showing.
Help?

It may be because you are setting the position of your controls with the margin attribute.
Try to read a bit into the different layout types like Grid StackPanel or RelativePanel.
A good introduction can be found here.
Just a basic thing you can do is something like this:
<Grid>
<Grid.RowDefinitions>
<Rowdefinition Height="*"> //The * just fills in the remaining Screen space.
<Rowdefinition Height="500"> //This Row is 500px high
<Rowdefinition Height="*"> //Fills the rest of the screen (same as first row)
<Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Height="*">
<ColumnDefinition Height="500">
<ColumnDefinition Height="2*"> //Using 2* fills double the screen as *
<Grid.ColumnDefinitions>
<StackPanel Grid.Row="1"
Grid.Column="1"> //Row and Column are 0-indexed
//Elements to stack go in here
</StackPanel>
If you need more info or a bit more detailed example just tell me. I just have to wait until I'm home to have acces to UWP code.

Your problem is here:
Margin="200,86,1113,247"
The designer things the target device has far more pixels than the actual device its running on. Dont forget these are 'effective pixels' so just because your screen may be 4k doesnt mean its 4000 pixels wide in UWP terminology.
Try here for more info
https://learn.microsoft.com/en-us/windows/uwp/design/basics/design-and-ui-intro#effective-pixels-and-scaling
To fix this in your page XAML you need to specify the width and height of the design surface (d:DesignHeight="..." d:DesignWidth="...") - like this:
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
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"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

there are some editable code I'm splitting with "<--((**))-->" :
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" <--((Margin="200,86,1113,247"))--> HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
YOUR PROBLEM
you are designing (developing) resolution is bigger than target device (window)
try this:
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>

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:

Making window size the same as background image size in WPF

I am new to WPF so bear with me. I have set the background image of my window using an ImageBrush and now I want my window's size to be exactly the size of the background image. The obvious solution to this is to simply set the width/height property manually with the pixel measurements of my background image, but this seems too naive. What is the best way to do this? Here is my XAML so far:
<Window x:Class="FruitFactory.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Fruit Factory" Height="576" WindowStyle="None" DataContext="{Binding}" ResizeMode="NoResize" Width="834">
<Window.Background>
<ImageBrush ImageSource="/FruitFactory;component/Graphics/FruitFactoryBackground.png"></ImageBrush>
</Window.Background>
<Window.Resources>
</Window.Resources>
<Grid>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="52,27,0,0" Name="comboBox1" VerticalAlignment="Top" Width="120" />
</Grid>
</Window>
I'm using Visual Studio 2010 and .NET 4.0

You can bind Width and Height to PixelWidth and PixelHeight of the ImageSource for ImageBrush like this
Update
Realized my previous solution didn't work because ImageSource didn't have PixelWidth/PixelHeight since it wasn't a BitmapImage. I had to use a BitmapImage resource instead but then the bindings didn't work if I didn't declare the Resource before the bindings (bug anyone?)
<Window x:Class="WindowSameSizeAsBackground.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Fruit Factory"
WindowStyle="None"
DataContext="{Binding}"
ResizeMode="NoResize">
<Window.Resources>
<BitmapImage x:Key="backgroundBrush"
UriSource="/FruitFactory;component/Graphics/FruitFactoryBackground.png"/>
</Window.Resources>
<Window.Width>
<Binding Source="{StaticResource backgroundBrush}" Path="PixelWidth"/>
</Window.Width>
<Window.Height>
<Binding Source="{StaticResource backgroundBrush}" Path="PixelHeight"/>
</Window.Height>
<Window.Background>
<ImageBrush x:Name="imageBrush"
ImageSource="{StaticResource backgroundBrush}"></ImageBrush>
</Window.Background>
<Grid>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="52,27,0,0" Name="comboBox1" VerticalAlignment="Top" Width="120" />
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="258,179,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
</Window>

ImageBrush isn't best solution for such requirements, because it hasn't Width/Height properties and does not present in VisualTree (it's just a tool for rendering).
Layers will help you:
<Window>
<Grid >
<Image Stretch="Fill"
Source="***some uri***"/>
<StackPanel>
<Button Height="40"
Margin="20"
Content="Ololo"/>
</StackPanel>
</Grid>
<Window>