C# 从顶部动态绘制按钮

我在WPF中使用动态绘图按钮时遇到问题。我想从上面画这个按钮，但它是从中间画的，我不知道为什么。有一个代码绘制这些按钮

public partial class UserView : UserControl {
    public UserView(IEnumerable<User> usersFromDb) {
        var spacer = 0;
        InitializeComponent();

        foreach (var user in usersFromDb) {
            var canvas = new Canvas {
                Width = 1080,
                Height = 70
            };

            var canavasThickness = canvas.Margin;
            canavasThickness.Top = spacer;
            canvas.Margin = canavasThickness;
            UserGrid.Children.Add(canvas);

            var button = new Button {
                Width = 1080,
                Height = 70,
                FontSize = 20,
                Content = $"{user.Name} {user.Surname}",
                Background = Brushes.Azure,
                Foreground = Brushes.Black
            };

            canvas.Children.Add(button);

            spacer += 150;
        }
    }
}

public部分类UserView:UserControl{
公共用户视图（IEnumerable usersFromDb）{
var间隔=0；
初始化组件（）；
foreach（usersFromDb中的var用户）{
var canvas=新画布{
宽度=1080，
高度=70
};
var canavashickness=画布边距；
Canavashickness.Top=垫片；
canvas.Margin=canavashickness；
UserGrid.Children.Add（画布）；
var按钮=新按钮{
宽度=1080，
高度=70，
FontSize=20，
Content=$“{user.Name}{user.姓氏}”，
背景=笔刷.Azure，
前景=画笔。黑色
};
canvas.Children.Add（按钮）；
垫片+=150；
}
}
}

感谢您的帮助。

简单解决方案

foreach (var user in usersFromDb)
            {
                var canvas = new Canvas
                {
                    Width = 1080,
                    Height = 70
                };

                var canavasThickness = canvas.Margin;
                canavasThickness.Top = spacer;
                canvas.Margin = canavasThickness;
                canvas.VerticalAlignment = VerticalAlignment.Top; // <------ THIS IS THE SOLUTION <-------- //
                UserGrid.Children.Add(canvas);

                var button = new Button
                {
                    Width = 1080,
                    Height = 70,
                    FontSize = 20,
                    Content = $"{user.Name} {user.Surname}",
                    Background = Brushes.Azure,
                    Foreground = Brushes.Black
                };

                canvas.Children.Add(button);

                spacer += 150;
            }

foreach（usersFromDb中的var用户）
{
var canvas=新画布
{
宽度=1080，
高度=70
};
var canavashickness=画布边距；
Canavashickness.Top=垫片；
canvas.Margin=canavashickness；
Copas.VistaCalange=垂直对齐.Tope///看起来你的用户控件是垂直居中的窗口。除此之外，按边距进行布局通常是个坏主意。不要把按钮放在画布中，而是把它放在一个堆叠面板中，它是为垂直或水平布局而设计的。ItemsControl而不是UserControl。ItemsControl是显示项目集合的基本控件。如果您还需要选择项目的功能，请使用ListBox或ListView。从这里开始阅读：。好的，谢谢您的提示，我会这样做谢谢您的教程链接！我不熟悉WPF、数据绑定和MVVM，所以您可以看到效果。
public partial class UserView : UserControl
    {



        public ObservableCollection<User> UserViewCollection
        {
            get { return (ObservableCollection<User>)GetValue(UserViewCollectionProperty); }
            set { SetValue(UserViewCollectionProperty, value); }
        }

        // Using a DependencyProperty as the backing store for UserViewCollection.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty UserViewCollectionProperty =
            DependencyProperty.Register("UserViewCollection", typeof(ObservableCollection<User>), typeof(UserView), new PropertyMetadata(null, OnCollectionChanged));



        private static void OnCollectionChanged(DependencyObject d,  DependencyPropertyChangedEventArgs args)
        {
            UserView self = d as UserView;

            if(self != null)
            {
                self.UpdateButtonsInCodeBehind(args.NewValue as ObservableCollection<User>);
            }
        }



        public UserView()
        {

            InitializeComponent();

        }


        private void UpdateButtonsInCodeBehind(ObservableCollection<User> collection)
        {
            if(collection != null)
            {
                UserGrid.Children.Clear();
                var spacer = 0;
                foreach (var user in collection)
                {
                    var canvas = new Canvas
                    {
                        Width = 1080,
                        Height = 70
                    };

                    var canavasThickness = canvas.Margin;
                    canavasThickness.Top = spacer;
                    canvas.Margin = canavasThickness;
                    canvas.VerticalAlignment = VerticalAlignment.Top; // <------ THIS IS THE SOLUTION <-------- //
                    UserGrid.Children.Add(canvas);

                    var button = new Button
                    {
                        Width = 1080,
                        Height = 70,
                        FontSize = 20,
                        Content = $"{user.Name} {user.Surname}",
                        Background = Brushes.Azure,
                        Foreground = Brushes.Black
                    };

                    canvas.Children.Add(button);

                    spacer += 150;
                }
            }
        }
    }