展開/摺疊包含DataGrid的面板

Question

我在StackPanel中使用DataGrid來顯示來自數據庫的客戶信息（例如：名字，姓氏，地址等）。我想要做的是讓StackPanel展開並摺疊DataGrid以在需要時顯示其他列。

因此，例如：

在啓動時我想的面板能夠摺疊只顯示所有客戶的名字。當按下按鈕時，我希望面板展開以顯示其餘列（姓，地址等）。這可能嗎？

可以擴展器設置崩潰時的最小寬度，不會摺疊整個面板？

更新： 這是我的更新代碼，任何有興趣的人。使用MVVM設計模式和Button Command實現。

查看：我希望在任何時候都顯示第一列，所以我忽略了可見性綁定。 我發現的BindingProxy資源here。

<DataGrid ItemsSource="{Binding Customers}" AutoGenerateColumns="False"> 
      <DataGrid.Resources> 
       <common:BindingProxy x:Key="Proxy" Data="{Binding}" /> 
      </DataGrid.Resources> 
      <DataGrid.Columns> 
       <DataGridTextColumn Header="Name" Binding="{Binding FullName}" /> 
       <DataGridTextColumn Header ="First Name" Binding="{Binding FirstName}" Visibility="{Binding Data.DataGridVisibility, Converter={StaticResource BoolToVis}, Source={StaticResource Proxy}}" /> 
       <DataGridTextColumn Header ="Last Name" Binding="{Binding LastName}" Visibility="{Binding Data.DataGridVisibility, Converter={StaticResource BoolToVis}, Source={StaticResource Proxy}}" /> 
       <DataGridTextColumn Header ="Birth Date" Binding="{Binding BirthDate}" Visibility="{Binding Data.DataGridVisibility, Converter={StaticResource BoolToVis}, Source={StaticResource Proxy}}" /> 
       <DataGridTextColumn Header ="Active" Binding="{Binding Active}" Visibility="{Binding Data.DataGridVisibility, Converter={StaticResource BoolToVis}, Source={StaticResource Proxy}}" /> 
      </DataGrid.Columns> 
     </DataGrid> 
<Button Content="Toggle Columns" x:Name="ToggleColumns" Command="{Binding Path=ToggleColumnsCommand}"/> 

MODEL：

private string _name; 

    public string Name 
    { 
     get 
     { 
      return _firstname + " " + _lastname; 
     } 
     set 
     { 
      if (_name != value) 
      { 
       _name = value; 
       OnPropertyChanged("Name"); 
      } 
     } 
    } 

    private string _firstname; 

    public string FirstName 
    { 
     get { return _firstname; } 
     set 
     { 
      if (_firstname != value) 
      { 
       _firstname = value; 
       OnPropertyChanged("FirstName"); 
      } 
     } 
    } 

    private string _lastname; 

    public string LastName 
    { 
     get { return _lastname; } 
     set 
     { 
      if (_lastname != value) 
      { 
       _lastname = value; 
       OnPropertyChanged("LastName"); 
      } 
     } 
    } 

    private DateTime _birthdate; 

    public DateTime BirthDate 
    { 
     get { return _birthdate; } 
     set 
     { 
      if (_birthdate != value) 
      { 
       _birthdate = value; 
       OnPropertyChanged("BirthDate"); 
      } 
     } 
    } 

    private int _addressid; 

    public int AddressId 
    { 
     get { return _addressid; } 
     set 
     { 
      if (_addressid != value) 
      { 
       _addressid = value; 
       OnPropertyChanged("AddressId"); 
      } 
     } 
    } 

    private bool _active; 

    public bool Active 
    { 
     get { return _active; } 
     set 
     { 
      if (_active != value) 
      { 
       _active = value; 
       OnPropertyChanged("Active"); 
      } 
     } 
    } 

    private DateTime _datecreated; 

    public DateTime DateCreated 
    { 
     get { return _datecreated; } 
     set 
     { 
      if (_datecreated != value) 
      { 
       _datecreated = value; 
       OnPropertyChanged("DateCreated"); 
      } 
     } 
    } 

    private DateTime _dateupdated; 

    public DateTime DateUpdated 
    { 
     get { return _dateupdated; } 
     set 
     { 
      if (_dateupdated != value) 
      { 
       _dateupdated = value; 
       OnPropertyChanged("DateUpdated"); 
      } 
     } 
    } 

    public static PhysicianModel Create(IDataRecord record) 
    { 
     return new PhysicianModel 
     { 
      FirstName = record["first_name"].ToString(), 
      LastName = record["last_name"].ToString(), 
      BirthDate = (DateTime) record["birth_date"], 
      AddressId = Convert.ToInt32(record["address_id"]), 
      Active = (bool) record["active"], 
      DateCreated = (DateTime) record["date_created"], 
      DateUpdated = (DateTime) record["date_updated"] 
     }; 
    } 

視圖模型：

private bool _dgVisibility; 

    public bool DataGridVisibility 
    { 
     get { return _dgVisibility; } 
     set 
     { 
      if (_dgVisibility != value) 
      { 
       _dgVisibility = value; 
       OnPropertyChanged("DataGridVisibility"); 
      } 
     } 
    } 
public ICommand ToggleColumnsCommand 
    { 
     get; 
     private set; 
    } 

    private bool CanExecuteToggleColumnsCommand(object obj) 
    { 
     return true; 
    } 

    private void CreateToggleColumnsCommand() 
    { 
     ToggleColumnsCommand = new RelayCommand(ToggleColumnsExecute, CanExecuteToggleColumnsCommand); 
    } 

    public void ToggleColumnsExecute(object obj) 
    { 
     if (!DataGridVisibility) 
      DataGridVisibility = true; 
     else 
      DataGridVisibility = false; 
    } 

希望這有助於任何人需要它。

Answer 1

如何不使用擴展控件？

的XAML：

​​

代碼：

切換

public partial class MainWindow : Window 
{ 
    public bool AreGridColumnsExpanded { get; set; } 

    public MainWindow() 
    { 
     InitializeComponent(); 

     AreGridColumnsExpanded = false; // Columns initially hidden 

     this.DataContext = new List<Person>() 
     { 
      new Person() 
      { 
       FirstName = "Laura", 
       LastName = "Smith", 
       Gender = "Female" 
      }, 
      new Person() 
      { 
       FirstName = "Mike", 
       LastName = "Smith", 
       Gender = "Male" 
      }, 
     }; 
    } 

    private void Button_Click(object sender, RoutedEventArgs e) 
    { 
     AreGridColumnsExpanded = !AreGridColumnsExpanded; 

     foreach(var column in MyDataGrid.Columns) 
     { 
      column.Visibility = AreGridColumnsExpanded ? Visibility.Visible : Visibility.Collapsed; 
     } 

     MyDataGrid.Columns.First().Visibility = Visibility.Visible; 
    } 
} 

結果之前：

切換後

結果：