Question

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

Picture from app

感谢您的帮助。

Answer 1

简单的解决方案

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

请考虑依赖项属性 - 至少绑定您的数据......

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

现在您可以绑定集合 - 就像ItemsControl一样。如果您不知道这意味着什么 - 请用WPF检查MVVM。教程链接here

简单的解决方案也有效，但它的丑陋！为什么不覆盖ListViewTemplate ......

从顶部动态绘制按钮

1 个答案: