为什么我的多边形绘制在错误的位置？

Question

I am practicing C# basic WPF/XAML drawing for an assignment and right off the bat I cannot figure out why my polygons are being drawn in the wrong place.

My window is of 1280x720 fixed, non-resizeable. I am trying to programmatically create my polygons by:

1. Creating points in the coordinates I want them to be: `

   • [0,0]
   • [max height, 0],
   • [max height, max width],
   • [0, max width],
   • [max height/2, max width/2]

`

2. Creating polygons that consists of three points each, [0,0] and two edges. My screen is supposed to be split into four triangles.

I tried breaking down the code to something really explicit to see if I could figure out where the issue is, so this is what I have:

private void CreatePolygons()
{ 
    List<Point> PointList = new List<Point>
    {
        new Point(MainUI.Height / 2, MainUI.Width / 2),
        new Point(0, 0),
        new Point(0, MainUI.Height),
        new Point(MainUI.Width, MainUI.Height),
        new Point(MainUI.Width, 0)                
    };

    Polygon p1 = new Polygon();
    Polygon p2 = new Polygon();
    Polygon p3 = new Polygon();
    Polygon p4 = new Polygon();

    p1.Points.Add(PointList[0]);
    p1.Points.Add(PointList[1]);
    p1.Points.Add(PointList[2]);

    p2.Points.Add(PointList[0]);
    p2.Points.Add(PointList[2]);
    p2.Points.Add(PointList[3]);

    p3.Points.Add(PointList[0]);
    p3.Points.Add(PointList[3]);
    p3.Points.Add(PointList[4]);

    p4.Points.Add(PointList[0]);
    p4.Points.Add(PointList[4]);
    p4.Points.Add(PointList[1]);

    p1.Stroke = System.Windows.Media.Brushes.LightSkyBlue;
    p2.Stroke = System.Windows.Media.Brushes.LightSkyBlue;
    p3.Stroke = System.Windows.Media.Brushes.LightSkyBlue;
    p4.Stroke = System.Windows.Media.Brushes.LightSkyBlue;

    p1.StrokeThickness = 1;
    p2.StrokeThickness = 1;
    p3.StrokeThickness = 1;
    p4.StrokeThickness = 1;

    MainGrid.Children.Add(p1);
    MainGrid.Children.Add(p2);
    MainGrid.Children.Add(p3);
    MainGrid.Children.Add(p4);
}

The end result is a completely misplaced grid and I can't understand what the coordinates it ended up creating refer to:

What am I missing?

Answer 1

You have accidentally swapped the Width and Height in the first point:

new Point(MainUI.Height / 2, MainUI.Width / 2),

Should be:

new Point(MainUI.Width / 2, MainUI.Height / 2),

Further, assuming MainUI is the app window itself, the points will still be a bit off, because the Height of the window includes its title bar height . You should better use MainGrid.ActualWidth and MainGrid.ActualHeight :

List<Point> PointList = new List<Point>
{
    new Point(MainGrid.ActualWidth / 2, MainGrid.ActualHeight / 2),
    new Point(0, 0),
    new Point(0, MainGrid.ActualHeight),
    new Point(MainGrid.ActualWidth, MainGrid.ActualHeight),
    new Point(MainGrid.ActualWidth, 0)
};

Answer 2

Besides that you have confused Width and Height of the first point, I'd suggest not to create UI elements like Polygons in code behind. Better use an ItemsControl like this:

<Grid SizeChanged="MainUISizeChanged">
    <ItemsControl x:Name="polygons">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Polygon Stroke="LightSkyBlue" StrokeThickness="1"
                         Points="{Binding}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

and assign its ItemsSource property to a collection of PointCollections, eg whenever the size of your MainUI element changes:

private void MainUISizeChanged(object sender, SizeChangedEventArgs e)
{
    var points = new List<Point>
    {
        new Point(e.NewSize.Width / 2, e.NewSize.Height / 2),
        new Point(0, 0),
        new Point(0, e.NewSize.Height),
        new Point(e.NewSize.Width, e.NewSize.Height),
        new Point(e.NewSize.Width, 0)
    };

    polygons.ItemsSource = new List<PointCollection>
    {
        new PointCollection(new Point[] { points[0], points[1], points[2] }),
        new PointCollection(new Point[] { points[0], points[2], points[3] }),
        new PointCollection(new Point[] { points[0], points[3], points[4] }),
        new PointCollection(new Point[] { points[0], points[4], points[1] }),
    };
}

Answer 3

As an alternative to all the Polygon point calcuations, you may use this simple Path element, which produces the same output and stretches automatically:

<Grid>
    <Path Stretch="Fill" Stroke="LightSkyBlue" StrokeThickness="1"
          Data="M0,0 L1,0 1,1 0,1Z M0,0 L1,1 M0,1 L1,0"/>
</Grid>