c# - 如何在 WPF 中将 UIElement 添加到 Grid

Question

我有一个网格，我在我的网格中放了一个 Canvas 。这是我的网格:

我在网格中添加了 Canvas 。这是我的 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;

            }

当我运行我的应用程序时，我看不到我的 slider 。我哪里做错了？

Answer 1

由于边距，您看不到 slider ，请修复边距计算背后的逻辑。或者你可以在那个网格单元格中放置一个堆栈面板，并将这些 slider 放在堆栈面板中，并将方向设置为水平。

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