如何在窗口大小變化時動態測量wpf中的網格寬度/高度

Question

我想要做的總體是在畫布上添加一個橢圓來表示高爾夫球從圓圈中心以高爾夫推桿撞擊一定角度時圓周上的位置。 為了做到這一點，我使用了兩個圖像，一個是一個圓圈，分成幾個部分來表示球被擊中的角度。 另一個圖像只是一個推桿頭，它被旋轉以表示球桿擊球時的角度。 此圖像位於圓形圖像的頂部。 藍色橢圓表示球的位置。在下面的鏈接中查看從我的應用程序獲得的圖像輸出：

所需的應用輸出

為此，我基本上使用以下代碼計算網格的寬度和高度：

public FacePage()
{
    InitializeComponent();
    GridGraphs.SizeChanged += GridGraphs_SizeChanged;
}

void GridGraphs_SizeChanged(object sender, SizeChangedEventArgs e)
{
    GetMeasurements();
}

private void GetMeasurements()
{
    GridGraphs.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));

    double width = GridGraphs.DesiredSize.Width;
    double height = GridGraphs.DesiredSize.Height;

    RotatePutter(width, height);
}

然后將寬度和高度傳遞到RotatePutter（），其中寬度和高度除以2得到網格的中心點，如下所示：

public void RotatePutter(double width, double height)
{

    double radius = width * 0.5;
    double centerX = width * 0.5;
    double centerY = height * 0.5;

    Random ran = new Random();
    double angle = ran.Next(-15, 15);

    if (angle >= 0)
    {
        if (angle <= 5)
        {
            lblShotStaus.Content = "Square";
        }
        else
        {
            lblShotStaus.Content = "Open";
        }
    }
    else
    {
        lblShotStaus.Content = "Closed";
    }

    double angleradians = (angle * (Math.PI / 180));

    Point putterCentre = new Point(0.5, 0.5);

    imgPutter.RenderTransformOrigin = putterCentre;

    RotateTransform rt = new RotateTransform(angle, 0.5, 0.5);
    imgPutter.RenderTransform = rt;

    BallLocation(radius, angleradians, centerX, centerY);
}

中心點，半徑，角度和推桿圖像在此處旋轉，半徑，angleradians，centerX和centerY傳遞到BallLocation以計算球的位置，如下所示：

public void BallLocation(double rad, double anglerad, double centerX, double centerY)
{
    Ellipse ellipse = new Ellipse();

    double xBallPoint = (centerX - (rad * Math.Cos(anglerad)));
    double yBallPoint = (centerY - (rad * Math.Sin(anglerad)));

    ellipse.Height = 10;
    ellipse.Width = 10;
    ellipse.Fill = new SolidColorBrush(Colors.Aqua);

    Canvas.SetLeft(ellipse, xBallPoint);
    Canvas.SetTop(ellipse, yBallPoint);
    canvasFaceAngle.Children.Add(ellipse);
}

一旦我改變了窗口的大小，這個工作就可以在全屏顯示了，它所擊中的角度的球的位置都是錯誤的。

任何人都知道如何在窗口大小改變時動態獲取網格寬度和高度，以便計算橢圓（球）的正確位置。 或者也歡迎任何其他替代方法。 提前致謝。

這是我的xaml：

<UserControl x:Class="HoleMorePuttsApplication.Pages.FacePage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="40*"/>
        <ColumnDefinition Width="60*"/>
    </Grid.ColumnDefinitions>
    <Viewbox Grid.ColumnSpan="1">
        <Label Content="Face Angle Page" FontWeight="Bold" />
    </Viewbox>
    <Grid Name="GridGraphs" Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Name="columnLeft" Width="50*"/>
            <ColumnDefinition Name="columnRight" Width="50*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Name="rowTop" Height="70*"/>
            <RowDefinition Name="rowBottom" Height="30*"/>
        </Grid.RowDefinitions>

        <Image x:Name="imgAngles"  Source="C:\Users\BernardWork\Documents\Work\Net\PuttingApp\Images\360Angles.jpg" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Image x:Name="imgPutter"   Source="C:\Users\BernardWork\Documents\Work\Net\PuttingApp\Images\Putter.jpg" Opacity="0.5" Margin="130,105,70,105" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
        <Label x:Name="lblShotStaus" Content="Label" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
        <Canvas Name="canvasFaceAngle" Grid.ColumnSpan="2" Grid.Row="0" RenderTransformOrigin="0.543,0.511"></Canvas>


    </Grid>

</Grid>

Answer 1

如果我理解正確，我相信問題可能是：

double width = GridGraphs.DesiredSize.Width;
double height = GridGraphs.DesiredSize.Height;

您調用的是沒有提供邊界的Measure，這意味着它將告訴您Grid的大小沒有限制（因此， DesiredSize ）。 DesiredSize和ActualSize可能是兩個非常不同的值。

在上面的例子中， SizeChanged方法的args將為您提供所需的內容。

void GridGraphs_SizeChanged(object sender, SizeChangedEventArgs e)
{
    RotatePutter(e.NewSize.Width, e.NewSize.Height);
}

Answer 2

因此，如果目標只是獲取網格寬度/高度，則ActualWidth和ActualHeight屬性應該為您提供該信息。 但要注意的一件事是：當Grid控件隨窗口一起改變大小時， Canvas控件不會。 換句話說，如果你讀取網格的實際寬度/高度，它應該對應於窗口的一側，但如果你讀取畫布的實際/高度，它可能會給你不正確的信息。