Two Different Objects Are Overdraw In WPF C#, Solve It?

I use 10 Grid Objects where i take 5 Grid objects as parents and other 5 Grid objects as children. Look at the WPF C# simple program which is below.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Demo.Saatody
{
    public class OverdrawProblem : Window
    {
        private static Grid Container = new Grid();

        private static Grid Parent1 = new Grid();
        private static Grid Parent2 = new Grid();
        private static Grid Parent3 = new Grid();
        private static Grid Parent4 = new Grid();
        private static Grid Parent5 = new Grid();

        private static Grid Child1 = new Grid();
        private static Grid Child2 = new Grid();
        private static Grid Child3 = new Grid();
        private static Grid Child4 = new Grid();
        private static Grid Child5 = new Grid();

        public void Initialize()
        {
            try
            {
                this.Content = Container;

                Parent1.HorizontalAlignment = HorizontalAlignment.Left;
                Parent1.VerticalAlignment = VerticalAlignment.Top;
                Parent1.Margin = new Thickness(0, 0, 0, 0);
                Parent1.Width = 200;
                Parent1.Height = 800;

                Parent2.HorizontalAlignment = HorizontalAlignment.Left;
                Parent2.VerticalAlignment = VerticalAlignment.Top;
                Parent2.Margin = new Thickness(200, 0, 0, 0);
                Parent2.Width = 200;
                Parent2.Height = 800;

                Parent3.HorizontalAlignment = HorizontalAlignment.Left;
                Parent3.VerticalAlignment = VerticalAlignment.Top;
                Parent3.Margin = new Thickness(400, 0, 0, 0);
                Parent3.Width = 200;
                Parent3.Height = 800;

                Parent4.HorizontalAlignment = HorizontalAlignment.Left;
                Parent4.VerticalAlignment = VerticalAlignment.Top;
                Parent4.Margin = new Thickness(600, 0, 0, 0);
                Parent4.Width = 200;
                Parent4.Height = 800;

                Parent5.HorizontalAlignment = HorizontalAlignment.Left;
                Parent5.VerticalAlignment = VerticalAlignment.Top;
                Parent5.Margin = new Thickness(800, 0, 0, 0);
                Parent5.Width = 200;
                Parent5.Height = 800;

                Child1.HorizontalAlignment = HorizontalAlignment.Left;
                Child1.VerticalAlignment = VerticalAlignment.Top;
                Child1.Margin = new Thickness(0, 0, 0, 0);
                Child1.Width = 200;
                Child1.Height = 800;

                Child2.HorizontalAlignment = HorizontalAlignment.Left;
                Child2.VerticalAlignment = VerticalAlignment.Top;
                Child2.Margin = new Thickness(0, 0, 0, 0);
                Child2.Width = 200;
                Child2.Height = 800;

                Child3.HorizontalAlignment = HorizontalAlignment.Left;
                Child3.VerticalAlignment = VerticalAlignment.Top;
                Child3.Margin = new Thickness(0, 0, 0, 0);
                Child3.Width = 200;
                Child3.Height = 800;

                Child4.HorizontalAlignment = HorizontalAlignment.Left;
                Child4.VerticalAlignment = VerticalAlignment.Top;
                Child4.Margin = new Thickness(0, 0, 0, 0);
                Child4.Width = 200;
                Child4.Height = 800;

                Child5.HorizontalAlignment = HorizontalAlignment.Left;
                Child5.VerticalAlignment = VerticalAlignment.Top;
                Child5.Margin = new Thickness(0, 0, 0, 0);
                Child5.Width = 200;
                Child5.Height = 800;

                Parent1.Background = new SolidColorBrush(Color.FromRgb(40,40,40));
                Parent2.Background = new SolidColorBrush(Color.FromRgb(70,70,70));
                Parent3.Background = new SolidColorBrush(Color.FromRgb(40,40,40));
                Parent4.Background = new SolidColorBrush(Color.FromRgb(70,70,70));
                Parent5.Background = new SolidColorBrush(Color.FromRgb(40,40,40));

                Child1.Background = new SolidColorBrush(Color.FromRgb(100, 000, 000));
                Child2.Background = new SolidColorBrush(Color.FromRgb(000, 100, 000));
                Child3.Background = new SolidColorBrush(Color.FromRgb(000, 000, 100));
                Child4.Background = new SolidColorBrush(Color.FromRgb(100, 100, 000));
                Child5.Background = new SolidColorBrush(Color.FromRgb(000, 100, 100));

                Container.Children.Add(Parent1);
                Container.Children.Add(Parent2);
                Container.Children.Add(Parent3);
                Container.Children.Add(Parent4);
                Container.Children.Add(Parent5);

                Parent1.Children.Add(Child1);
                Parent2.Children.Add(Child2);
                Parent3.Children.Add(Child3);
                Parent4.Children.Add(Child4);
                Parent5.Children.Add(Child5);

                this.WindowState = WindowState.Maximized;
                this.Visibility = Visibility.Visible;

            }
            catch(Exception e) { }
        }
    }
}

The output is below image.

All Children With Same Size

Now, We change margin left and width of 4th child. What happen? See the below program and its output. I put Child4 margin left will be -100 and width will be 400.

Child4.HorizontalAlignment = HorizontalAlignment.Left;
Child4.VerticalAlignment = VerticalAlignment.Top;
Child4.Margin = new Thickness(-100, 0, 0, 0);
Child4.Width = 400;
Child4.Height = 800;

Output:

Child4 is overdraw on other objects

In this output, You can see that the child4 is overdraw on other children. You can see that the child4 is overdraw on child3 but child4 is not overdraw on child5. why?

The answer is very simple. We add() parent4 after parent3 and before parent5. Here we call zindex property. It means, For example parent3 zindex is 3 than parent4 zindex is 4 and parent5 zindex is 5. Look here zindex as 3ed dimension. So parent3 is behind parent4 and parent4 is behind parent5. So this type of problem we got.

So the solution is keep the parent4 zindex in minus value. Look the below simple WPF property.

Panel.SetZIndex(UIElement, Value);

For example, If you use parent4 as UIElement and its zindex value as -1 then this entire parent4 Grid will go behind all the other parents Grid.

Panel.SetZIndex(Parent4, -1);

Output:

Problem is solved

Note: Zindex property must set on parent not on child.

Or you have another choice which is ClipToBounds this property must set on parent. This can clip object when it's outside parent.