WPF - Button on Image Moves at Run Time - wpf

Question

I have a program that displays a grid that contains an image and 3 buttons. The buttons have been sized in the Visual Studio designer to fit inside separate circles (each approx 1/4" in diameter). When I run the program each of the buttons all move down and to the right about 1/2 the width of the button. If I add an explicit width and height to each button I can keep the size the same but the buttons still moves slightly to the right and maybe even down slightly.
My guess is that it has to do with how Windows has displayed the image to fit on the screen and that this scaling/positioning has not been applied to the buttons. If so, I have no idea how to correct the issue.
Any ideas on how to correct this problem would be greatly appreciated.
Chris
My XAML code:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height}"
Width="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Width}"
WindowStartupLocation="CenterScreen"
Background="CornflowerBlue"
ResizeMode="CanMinimize"
>
<Window.Resources>
<Style x:Key="{x:Type Button}" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Black"/>
<Setter Property="Opacity" Value="1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Name="grid1">
<Image Name="image" Source="D:\CEP\Image1.jpg" Stretch="Uniform">
</Image>
<Button Margin="494,0,1155,801" Click="button_407_Click"></Button>
<Button Margin="339,107,1310,856" />
<Button Margin="401,102,1248,860" />
</Grid>

Answer 1

Set the Stretch property of the Image to None to prevent the image from sizing.
You have positioned the buttons by setting their margins. As soon as the window is resized their positions and sizes will change.
Add a Canvas to the grid and put the image and the buttons on the canvas using absolute positioning (Canvas.Left="..." Canvas.Top="..."
If, after doing this, you do not like the results because you still want to resize the the images and move the buttons in sync you could wrap the Canvas in a ViewBox to make it scale.
EDIT
<Grid>
<Viewbox>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Images\wp_1680.jpg" Width="300" Height="200"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Canvas Width="300" Height="200"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Canvas.Top="25" Canvas.Left="50" Content="OK"/>
<Button Canvas.Top="125" Canvas.Left="150" Content="Cancel"/>
</Canvas>
</Grid>
</Viewbox>
</Grid>
This solution includes nice scaling through the Viewbox, but it can be removed as well.
Please organize all your posts. If you want to say something about my answer add it as a comment to my answer if you want add to your question, edit the question.