如何在WPF中将UIElement添加到网格中

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;

            }

当我运行我的应用程序时，我无法看到我的滑块。我哪里做错了？

Answer 1

由于保证金，你没有看到你的滑块，修正了保证金计算背后的逻辑。 或者您可以在该网格单元格中放置一个堆叠面板，并将这些滑块放在堆叠面板中，并将方向设置为水平，例如。

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