如何在WPF中将UIElement添加到Grid中

Question

我有一个网格，在网格中我放置了一个画布。这是我的网格：

我向网格添加了一个画布。这是我的XAML代码。

<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>

我的问题是：我无法看到我添加到网格中的UI元素。

以下是我的c#代码:

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;

            }

当我运行我的应用程序时，我看不到我的滑块。我做错了什么？

- Шыназ Алиш

---

为什么画布跨越了所有的行和列？你试过移除画布吗？ - bit

你应该将内容添加到 Canvas 而不是 grid1 吗？ - user585968

你把所有的椭圆放在第二行和第三列。这样做有意义吗？除此之外，你试图做什么完全不清楚。椭圆的目的是什么？“背景”画布是用来干什么的？请添加一些细节到你的问题中，以便让其他人理解。 - Clemens

或许有些离题，但是像 sliders.Add(new Ellipse()); 这样将一个元素添加到列表中，然后立即通过 sliders[i].Stroke = ...; 访问它，可以说是冗长且容易出错的。 - user585968

@SamTheDev 除此之外，边距肯定不应该设置。 - Clemens

Answer 1

由于边距计算逻辑的问题，您无法看到滑块。您可以修复边距计算逻辑或将一个StackPanel放置在网格单元格中，并将这些滑块放入StackPanel中，并将方向设置为水平。

        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;
        }

- NIME