how to check if an element is going out of its parent in c# wpf

Question

I am creating shapes at run time on canvas in my app and except all the shapes, ellipse is going out of canvas. How do I restrict it to canvas? All other shapes are contained in canvas because of the control points at their vertices. How do I keep a check as to not let ellipse go out of canvas without clipping. I have used ClipToBounds and it doesn't meet my needs.

Also, an alternate solution is if I can add a controlpoint at the left side of ellipse of radiusX property. I can't add a controlpoint to left side of radiusX on ellipse. If you could help me with either of that?

   radiusXcp = new ControlPoint(this, EllipseGeom, EllipseGeometry.RadiusYProperty, 1, true, false);
        radiusXcp.RelativeTo = EllipseGeometry.CenterProperty;
        shape_ControlPoints.Add(radiusXcp);

        radiusXcp = new ControlPoint(this, EllipseGeom, EllipseGeometry.RadiusXProperty, 0, true, false);
        radiusXcp.RelativeTo = EllipseGeometry.CenterProperty;
        shape_ControlPoints.Add(radiusXcp);

        //EllipseGeom.RadiusX = -EllipseGeom.RadiusX;

        //radiusXcp = new ControlPoint(this, EllipseGeom, EllipseGeometry.RadiusXProperty, 0, true, false);
        //radiusXcp.RelativeTo =  EllipseGeometry.CenterProperty;
        //shape_ControlPoints.Add(radiusXcp);

        //EllipseGeom.RadiusX = -EllipseGeom.RadiusX;

You can put your canvas in a `Grid` and set `ClipToBounds` property of the grid control. Make sure to set grid's width and height propperly. — rashmatash, Jul 29 '19 at 11:49
Could you set a Max Radius of the ellipse? Based on the distance of the center point to the edges of the Canvas? and restrict the center to only be within the Canvas. I would have some sort of "Check" method to test bounds. From my knowledge of doing this, i havent come across a built in solution without a work around. — Ginger Ninja, Jul 29 '19 at 16:34
@rashmatash Is there some way I could check if path of my geometry is going out of visual bounds or to limit it in visual bounds? — Aarushi Bhatia, Jul 30 '19 at 10:04
@GingerNinja Is there some way I could check if path of my geometry is going out of visual bounds or to limit it in visual bounds? — Aarushi Bhatia, Jul 30 '19 at 10:05

score 0 · Answer 1 · answered Jul 30 '19 at 15:24

Here is a quick example of what i would do. It could be improved on and the code is mainly written to be easy to read and follow. It also does not handle the possibility to if the shape's size is bigger than the Canvas (not sure if that is a use case in your project). For the example I used the "Loaded" event on the Canvas, to reset the position before drawing. You would want this check before you draw the Ellipse object.

private void TestCanvas_Loaded(object sender, RoutedEventArgs e)
{
    //canvas = 450 x 800
    Ellipse test_ellipse = new Ellipse();
    test_ellipse.Width = 100;
    test_ellipse.Height = 100;
    test_ellipse.Fill = Brushes.Red;
    Canvas.SetLeft(test_ellipse, 700);
    Canvas.SetTop(test_ellipse, -500);
    Reset_Ellipse_Bounds(TestCanvas, ref test_ellipse);
    TestCanvas.Children.Add(test_ellipse);
}

private void Reset_Ellipse_Bounds(Canvas myCanvas, ref Ellipse myEllipse)
{
    var left = Canvas.GetLeft(myEllipse);
    var top = Canvas.GetTop(myEllipse);

    //handle too far right
    if (left + myEllipse.Width > myCanvas.ActualWidth)
        Canvas.SetLeft(myEllipse, myCanvas.ActualWidth - myEllipse.Width);
    //handle too far left
    if(left < 0)
        Canvas.SetLeft(myEllipse, 0);
    //handle too far up
    if (top < 0)
        Canvas.SetTop(myEllipse, 0);
    //handle too far down
    if (top + myEllipse.Height > myCanvas.ActualHeight)
        Canvas.SetTop(myEllipse, myCanvas.ActualHeight - myEllipse.Height);
}

For Completeness the XAML:

 <Grid>
    <Canvas x:Name="TestCanvas" Loaded="TestCanvas_Loaded" />
 </Grid>

The idea is to check the bounding box against the Canvas edges. There are ways to improve this, but i figured the simplest solution is easier to follow.

Within each if statement you could add more logic or a method to do further processing, but this should answer the general question of knowing if it is outside the parent.

score 0 · Answer 2 · answered Sep 11 '19 at 16:25

Just set ClipToBounds="true" to its father control, it avoids the canvas to be drawn outside of it.

In my case I set it to Grid as followed :

<Grid x:Name="MainGrid" Background="WhiteSmoke" ClipToBounds="true">
    <Canvas Margin="10" Background="Transparent"
    SizeChanged="ViewportSizeChanged"
    MouseLeftButtonDown="ViewportMouseLeftButtonDown"
    MouseLeftButtonUp="ViewportMouseLeftButtonUp"
    MouseMove="ViewportMouseMove"
    MouseWheel="ViewportMouseWheel">

        <Canvas x:Name="canvas" Width="1000" Height="600"
        HorizontalAlignment="Left" VerticalAlignment="Top">
            <Canvas.RenderTransform>
                <MatrixTransform x:Name="transform"/>
            </Canvas.RenderTransform>
        </Canvas>

        <Canvas x:Name="canvas2" Width="1000" Height="600"
        HorizontalAlignment="Left" VerticalAlignment="Top">
            <Canvas.RenderTransform>
                <MatrixTransform x:Name="transform2"/>
            </Canvas.RenderTransform>
        </Canvas>
    </Canvas>
</Grid>

how to check if an element is going out of its parent in c# wpf

2 Answers2