包含 DataGrid 的展开/折叠面板

Question

我在 StackPanel 中使用 DataGrid 来显示来自数据库的客户信息（即：名字、姓氏、地址等）。我想要做的是让 StackPanel 展开和折叠 DataGrid 以在需要时显示其他列。

例如：

在启动时，我希望面板折叠起来，只显示所有客户的名字。按下按钮时，我希望面板展开以显示其余列（姓氏、地址等）。这可能吗？

展开器能否设置不折叠整个面板的最小折叠宽度？

更新： 这是我为任何感兴趣的人更新的代码。使用 MVVM 设计模式和按钮命令实现。

VIEW：我想一直显示的第一列，所以我省略了 Visibility 绑定。 我找到的 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}"/>

型号：

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：

<StackPanel>
        <DataGrid ItemsSource="{Binding}"
                  AutoGenerateColumns="False"
                  x:Name="MyDataGrid">
            <DataGrid.Columns>
                <DataGridTextColumn Header="First Name"
                                    Binding="{Binding FirstName}" />
                <DataGridTextColumn Header="Last Name"
                                    Binding="{Binding LastName}"
                                    Visibility="Collapsed"/>
                <DataGridTextColumn Header="Gender"
                                    Binding="{Binding Gender}"
                                    Visibility="Collapsed"/>
            </DataGrid.Columns>
        </DataGrid>
        <Button Content="Toggle Columns"
                HorizontalAlignment="Center"
            Click="Button_Click"></Button>
</StackPanel>

代码：

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

切换前的结果：

切换后的结果：