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

【问题标题】：How to add UIElement to the Grid in WPF如何在 WPF 中将 UIElement 添加到 Grid
【发布时间】：2015-04-09 08:35:03
【问题描述】：

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

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

            }

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

【问题讨论】：

为什么画布跨越所有的行和列？您是否尝试移除画布？
您不应该添加到 Canvas 而不是 grid1？
你把所有的椭圆都放在第 2 行第 3 列。这有意义吗？除此之外，完全不清楚您要做什么。椭圆的目的是什么？什么是“背景”画布？请在您的问题中添加一些详细信息，以便其他人理解。
也许离题了，但是将一些内容添加到sliders.Add(new Ellipse()); 之类的列表中然后立即通过sliders[i].Stroke = ...; 访问它可以说是冗长且容易出错
@SamTheDev 除此之外，Margin 肯定根本不应该设置。

标签： c# wpf canvas grid wpf-controls

【解决方案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;
        }

【讨论】：