コントロールがプログラムによって正しく配置されていない

Question

グリッド内のランダムな場所にEllipse (named Dot)を配置しようとしています。
しかし、それは完全なグリッドの代わりにグリッドの1/4（右下）にのみ発生します。
例：ドットの余白をDot.Margin = new Thickness(0, 0, 0, 0);に設定すると、ドットが画面の中央にスポーンされます。
Dot.Margin = new Thickness(200, 0, 0, 0);に変更すると、右側には非常に小さなオフセットがありますが、200ピクセルにも近くなりません。
円を削除せずにたくさんの円を作成した結果： http://i.imgur.com/3XCMYyC.png
赤い四角形はスポーン領域です。

C＃の

//Gives Dot a position 
public void placeDot() 
{ 
    //Give Dot random position 
    // The farthest left the dot can be 
    double minLeft = 0; 
    // The farthest right the dot can be without it going off the screen 
    double maxLeft = spawnArea.ActualWidth - Dot.Width; 
    // The farthest up the dot can be 
    double minTop = 0; 
    // The farthest down the dot can be without it going off the screen 
    double maxTop = spawnArea.ActualHeight - Dot.Height; 


    double left = RandomBetween(minLeft, maxLeft); 
    double top = RandomBetween(minTop, maxTop); 
    Dot.Margin = new Thickness(left, top, 0, 0); 
} 

//createEllipse method, used for creating new Dots 
public void createEllipse() 
{ 
    spawnArea.Children.Remove(Dot); 

    //Create new Dot 
    DotImg.ImageSource = 
     new BitmapImage(new Uri(@"Images/hitcircle.png", UriKind.Relative)); 
    Dot = new Ellipse() { Width = hitcircleSettingPath, Height = hitcircleSettingPath, Fill = DotImg, }; 

    //Activates placeDot() method to give the Dot a random location 
    placeDot(); 

    //Add Dot to the game area 
    spawnArea.Children.Add(Dot); 
} 

XAMLは、これは私がXAMLに問題があるかもしれないと思う完全なXAMLですが、下記の私は他のものなしでそれをしたいどのように動作しない短いスニペットです。

<Window x:Name="Grid" x:Class="ReactieSnelheid_Game.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:ReactieSnelheid_Game" 
     mc:Ignorable="d" 
     Title="Dot Program" Height="768" Width="1366" WindowStartupLocation="CenterScreen" Cursor="Pen" Icon="Images/icon.ico" ResizeMode="NoResize" WindowState="Maximized" WindowStyle="None" Background="Black" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="{x:Null}" KeyDown="Grid_KeyDown"> 
    <Grid x:Name="backgroundImageGrid" Margin="0,0,0,0" MouseDown="LayoutRoot_MouseDown"> 
     <Grid.Background> 
      <ImageBrush x:Name="backgroundBrush" ImageSource="Images/background.png" Opacity="0.25"/> 
     </Grid.Background> 
     <Grid x:Name="gameWrapper"> 
      <Grid.Background> 
       <SolidColorBrush Color="Black" Opacity="0.25"/> 
      </Grid.Background> 
      <Label x:Name="reactionTime" Content="1000ms" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" FontSize="40" FontFamily="PMingLiU-ExtB" Foreground="White"/> 
      <Label x:Name="circleSize" Content="150x150" HorizontalAlignment="Left" Margin="10,73,0,0" VerticalAlignment="Top" FontSize="26.667" FontFamily="PMingLiU-ExtB" Foreground="White" Background="{x:Null}"/> 
      <Label x:Name="dotCount" Content="000000" HorizontalAlignment="Left" Margin="28,0,0,-1" Foreground="White" FontSize="80" RenderTransformOrigin="0.5,0.5" FontFamily="PMingLiU-ExtB" VerticalAlignment="Bottom" Background="{x:Null}"> 
       <Label.RenderTransform> 
        <TransformGroup> 
         <ScaleTransform/> 
         <SkewTransform AngleX="-11.056"/> 
         <RotateTransform/> 
         <TranslateTransform X="-8.305"/> 
        </TransformGroup> 
       </Label.RenderTransform> 
      </Label> 
      <Label x:Name="scoreCount" Content="9999999999999999" Margin="0,0,10,10" Foreground="White" FontSize="80" FontFamily="PMingLiU-ExtB" HorizontalAlignment="Right" Height="106" VerticalAlignment="Bottom"/> 
      <Rectangle x:Name="startTimerBtn" RenderTransformOrigin="0.39,-0.75" Margin="144,10,0,0" Width="128" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" MouseDown="startTimerBtn_MouseDown"> 
       <Rectangle.Fill> 
        <ImageBrush ImageSource="Images/starttimer.png"/> 
       </Rectangle.Fill> 
      </Rectangle> 
      <Grid x:Name="spawnArea" Margin="0,115,0,121" Background="Red"/> 
     </Grid> 
     <Grid x:Name="pauseScreen"> 
      <Grid.Background> 
       <SolidColorBrush Color="#FF81D650" Opacity="0.25"/> 
      </Grid.Background> 
      <Grid x:Name="pauseScreenBtns" Margin="389,153,389,152" HorizontalAlignment="Center" VerticalAlignment="Center"> 
       <Rectangle x:Name="Startbtn" Height="332" Width="332" MouseDown="Startbtn_MouseDown" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="129,0,127,76"> 
        <Rectangle.Fill> 
         <ImageBrush ImageSource="Images/Start.png"/> 
        </Rectangle.Fill> 
       </Rectangle> 
       <Rectangle x:Name="settingsBtn" MouseDown="settingsBtn_MouseDown" Margin="-5,189,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="129" Height="63"> 
        <Rectangle.Fill> 
         <ImageBrush ImageSource="Images/settings.png"/> 
        </Rectangle.Fill> 
       </Rectangle> 
       <Rectangle x:Name="resetBtn" MouseDown="resetBtn_MouseDown" Margin="0,190,-6,0" Width="128" Height="62" HorizontalAlignment="Right" VerticalAlignment="Top"> 
        <Rectangle.Fill> 
         <ImageBrush ImageSource="Images/reset.png"/> 
        </Rectangle.Fill> 
       </Rectangle> 
       <Rectangle x:Name="quitBtn" RenderTransformOrigin="0.39,-0.75" Margin="232,399,0,0" Width="129" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" MouseDown="quitBtn_MouseDown"> 
        <Rectangle.Fill> 
         <ImageBrush ImageSource="Images/quit.png"/> 
        </Rectangle.Fill> 
       </Rectangle> 
      </Grid> 
     </Grid> 
    </Grid> 
</Window> 

短いXAML

<Window x:Class="TESTPROJECTEN.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:TESTPROJECTEN" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="768" Width="1366"> 
    <Grid x:Name="gameWrapper"> 
     <Grid x:Name="spawnArea"/> 
    </Grid> 
</Window> 

Answer 1

楕円には、デフォルトで[整列=伸縮]があります。しかし、固定幅と高さを設定すると、楕円が中央に配置されているように見えます。

Dot = new Ellipse() { Width = hitcircleSettingPath, Height = hitcircleSettingPath, Fill = DotImg, }; 

Dot.HorizontalAlignment = HorizontalAlignment.Left; 
Dot.VerticalAlignment = VerticalAlignment.Top; 

Answer 2

それが右にオフセットが、 200ピクセルにしても近接していない非常に小さなを持つことになります。

まず、私が覚えている限り、WPFはこれらの数値をピクセルとして使用せず、内部的な値として使用します。私はそれらのユニットの名前を覚えていませんが、ボトムライン、彼らはピクセルではありません。あなたの実際の問題のために今

：

WPFグリッドは、グリッド内の楕円を入れてマージン200に設定されているときに、それはからマージンを設定し、中央には、デフォルトではすべての彼の子コントロールを配置しますセンター。念頭に置いて

、あなたは気泡がすべてのグリッドの上に表示させるためにあなたのランダムアルゴリズムを変更することができます。

//Gives Dot a position 
public void placeDot() 
{ 
    //Give Dot random position 
    double halfSide = (spawnArea.ActualWidth - Dot.Width)/2; 

    // The farthest left the dot can be 
    double minLeft = -(halfSide - (Dot.ActualWidth/2)); 
    // The farthest right the dot can be without it going off the screen 
    double maxLeft = halfSide - (Dot.ActualWidth/2); 
    // The farthest up the dot can be 
    double minTop = -(halfSide - (Dot.ActualHeight/2)); 
    // The farthest down the dot can be without it going off the screen 
    double maxTop = halfSide - (Dot.ActualHeight/2); 

    double left = RandomBetween(minLeft, maxLeft); 
    double top = RandomBetween(minTop, maxTop); 
    Dot.Margin = new Thickness(left, top, 0, 0); 
} 

私は私が何かを逃さなかった願っています。私はこのコードを実行しなかったので、調整が必要な場合がありますが、これはメインラインです。

ハッピーコーディング！ :)