C＃WPF如何绘制一个圆圈以扩展以填充其父代并在后面的代码中保持一个圆圈

Question

I have to draw a circle in a grid. That grid has to adapt proportionally to height and width defined by the Column/Row definition of its parent grid. Now if I put stretch it will fill all the space and become an ellipsis while I want it to be a circle.

Ok in short the parent grid adapts proportionally like that

then in a routine I add the following code:

public void RadialPercentage(Grid grd )
{
    Ellipse elpExt = new Ellipse();
    elpExt.Stroke = Brushes.Green;
    elpExt.StrokeThickness = 4;
    //elpExt.Margin = new Thickness(0);
    //elpExt.HorizontalAlignment = HorizontalAlignment.Center;
    elpExt.VerticalAlignment = VerticalAlignment.Stretch;
    grd.Children.Add(elpExt);

    Ellipse elpInt = new Ellipse();
    elpInt.Stroke = Brushes.Blue;
    elpInt.StrokeThickness = 4;
    elpInt.Margin = new Thickness(20);
    //elpInt.Width = elpInt.Height = dim-20;
    //elpInt.HorizontalAlignment = HorizontalAlignment.Center;
    elpInt.VerticalAlignment = VerticalAlignment.Stretch;
    grd.Children.Add(elpInt);
    return;
}

but the effect is the following:

so it stretches both vertically and horizontally even if I only put the vertical and not the horizontal constraint. If I set it to center the ellipse collapses.

To solve the problem even I am not sure that this is the right thing to do I tried to take a look of the weight/heigth of the parent grid but obviously both those values and the actual values are set to zero.

thanks for helping Patrick

Answer 1

What about setting Width 's binding to ActualHeight of the ellipse and set HorizontalAlignment to Center ? Something like this:

var ellipse = new Ellipse();

var binding = new Binding(Ellipse.ActualHeightProperty.Name)
{
    RelativeSource = new RelativeSource(RelativeSourceMode.Self),
    Mode = BindingMode.OneWay
};

ellipse.VerticalAlignment = VerticalAlignment.Stretch;
ellipse.HorizontalAlignment = HorizontalAlignment.Center;

BindingOperations.SetBinding(ellipse, Ellipse.WidthProperty, binding);

Answer 2

You can update the size of your Ellipse each time the parent Grid is resized.

You should add to your Grid the SizeChanged Event . XAML example:

<Grid Name        = "MyGrid"
      SizeChanged = "MyGridSizeChanged">
  <!-- rows and columns definitions -->
  <Ellipse Name        = "MyEllipse"
           Grid.Row    = "i"
           Grid.Column = "j" />
</Grid>

Now, each time the Grid is resized the function MyGridSizeChanged will executed. You should add into it code, which set sizes of your Ellipse equal to smallest side of contained cell. C# example:

void MyGridSizeChanged(object sender, SizeChangedEventArgs e) {
    if (sender is Grid myGrid) {
        var cellHeight = myGrid.RowDefinitions[Grid.GetRow(MyEllipse)].ActualHeight;
        var cellWidth  = myGrid.ColumnDefinitions[Grid.GetColumn(MyEllipse)].ActualWidth;
        var newSize    = Math.Min(cellHeight, cellWidth);

        MyEllipse.Height = newSize;
        MyEllipse.Width  = newSize;
    }
}