How to add UIElement to the Grid in WPF

Question

I have a Grid, in my Grid I put a canvas. Here is my grid:

I added a canvas to my grid. Here is my XAML code.

<Grid Name="grid1" ShowGridLines="True" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="4*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>        
        <Canvas Name="canvas1" Grid.Column="0" Grid.ColumnSpan="7" Grid.Row="0" Grid.RowSpan="7" Panel.ZIndex="0">
        </Canvas>
    </Grid>

My problem is: I can't see a UI Element I added to my grid.

Here is my c# code:

sliders = new List<Ellipse>();
            double leftMargin = 0;
            double rightMargin = 0;
            int diametrOfCircles = 50;
            double widthOfCanvas = System.Windows.SystemParameters.PrimaryScreenWidth;
            int placeBtwCircles = 30;
            double sum = 0;

            sum = widthOfCanvas - (GetNumberOfImages() * diametrOfCircles);
            sum -= (placeBtwCircles * (GetNumberOfImages() - 1));
            leftMargin = sum / 2;
            rightMargin = sum / 2;
            for (int i = 0; i < GetNumberOfImages(); i++)
            {
                sliders.Add(new Ellipse());
                sliders[i].Stroke = System.Windows.Media.Brushes.Black;
                sliders[i].Fill = System.Windows.Media.Brushes.White;
                //sliders[i].VerticalAlignment = VerticalAlignment.Center;
                //sliders[i].HorizontalAlignment = HorizontalAlignment.Center;
                sliders[i].Width = 20;
                sliders[i].Height = 20;
                sliders[i].Margin = new Thickness(leftMargin + i * (placeBtwCircles + diametrOfCircles), 350, rightMargin + (numberOfImages - i - 1) * (placeBtwCircles + diametrOfCircles)
                    , 20);
                sliders[i].Opacity = 0.3;                
                Grid.SetRow(sliders[i], 2);
                Grid.SetColumn(sliders[i], 3);                
                //canvas.Children.Add(sliders[i]);
                Grid.SetZIndex(sliders[i], 1);
                grid1.Children.Add(sliders[i]);
                sliders[0].Opacity = 0.9;

            }

When I run my application, I can't see my sliders. Where have I done wrong?

Answer 1

U don't see your sliders because of margin, fix logic behind the calculation of margin. Or u can put a stackpanel in that grid cell and put those sliders in stackpanel and set orientation to horizontal for example.

        var stackPanel = new StackPanel();
        stackPanel.Orientation = Orientation.Horizontal;
        stackPanel.HorizontalAlignment = HorizontalAlignment.Center;

        Grid.SetRow(stackPanel, 2);
        Grid.SetColumn(stackPanel, 3);
        this.grid1.Children.Add(stackPanel);

        var sliders = new List<Ellipse>();
        double leftMargin = 0;
        double rightMargin = 0;
        int diametrOfCircles = 50;
        double widthOfCanvas = System.Windows.SystemParameters.PrimaryScreenWidth;
        int placeBtwCircles = 30;
        double sum = 0;

        leftMargin = sum / 2;
        rightMargin = sum / 2;
        for (int i = 0; i < GetNumberOfImages(); i++)
        {
            sliders.Add(new Ellipse());

            sliders[i].Stroke = System.Windows.Media.Brushes.Black;
            sliders[i].Fill = System.Windows.Media.Brushes.White;
            sliders[i].Width = 20;
            sliders[i].Height = 20;
            sliders[i].Margin = new Thickness(5);

            stackPanel.Children.Add(sliders[i]);
            sliders[0].Opacity = 0.9;
        }