從頂部動態繪製按鈕

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