从顶部动态绘制按钮

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 ...