Question

我是WPF的新手，我无法理解所有面板和网格以及它们如何协同工作以构建所需的布局。我正在尝试构建一个窗口，其中顶部（面板）有一堆控件，面板有一个隐藏按钮。当用户点击＆＃34;隐藏＆＃34;顶部向上滑动，底部伸展以取代其位置。我可以使用哪种面板组合来生成这种类型的布局？有没有一个我尚未找到的地方的例子？

Sample Layout

Answer 1

嗨如果您想使用MVVM解决此问题，请尝试使用

XAML。这里我有一个有三行的网格。

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Visibility="{Binding GridVisibility}">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
<TextBlock Text="here will be some controls" FontSize="20"/>
    </Grid>
    <Button Content="{Binding ButtonText}" Command="{Binding ShowHidecommand}" Grid.Row="1"/>
    <DataGrid Grid.Row="2"></DataGrid>
</Grid>

xaml.cs

    public partial class MainWindow : Window
{
    public MainWindow()
    {

        InitializeComponent();
        DataContext = new ViewModel();
    }
}

视图模型

    public class ViewModel:INotifyPropertyChanged
{
    public ViewModel()
    {
        SetInitialState();
    }
    void SetInitialState()
    {
        buttonState = ButtonState.Shown;
        GridVisibility = Visibility.Visible;
        ButtonText = "Hide";
    }

    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this,
                new System.ComponentModel.PropertyChangedEventArgs(propertyName));
    }

    private string buttonText;
    public  string ButtonText
    {
        get
        {
            return buttonText;
        }
        set
        {
            buttonText = value;
            OnPropertyChanged("ButtonText");
        }
    }

    private Visibility gridVisibility;
    public  Visibility GridVisibility
    {
        get
        {
            return gridVisibility;
        }
        set
        {
            gridVisibility = value;
            OnPropertyChanged("GridVisibility");
        }
    }

    private MyCommand showHideCommand;
    public MyCommand ShowHidecommand
    {
        get { return showHideCommand ?? (showHideCommand = new MyCommand((o) => OnShowHideCommand(o), () => true)); }
    }

    public void OnShowHideCommand(object obj)
    {
        if (buttonState == ButtonState.Shown)
        {
            buttonState = ButtonState.Hidden;
            GridVisibility = Visibility.Collapsed;
            ButtonText = "Show";
        }
        else
        {
            buttonState = ButtonState.Shown;
            GridVisibility = Visibility.Visible;
            ButtonText = "Hide";
        }

    }

    ButtonState buttonState;
    enum ButtonState
    { 
        Shown,
        Hidden
    }
}

MyCommand.cs

    public class MyCommand : ICommand
{
    Action<object> executeAction;
    Func<bool> canExecute;

    public MyCommand(Action<object> executeAction, Func<bool> canExecute)
    {
        this.executeAction = executeAction;
        this.canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        if (canExecute != null)
            return canExecute();
        else
            return true;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        if (executeAction != null)
            executeAction(parameter);
    }
}

我们正在做的是我们已经绑定了网格的可见性，它需要在Button状态的低音上可见或折叠。接下来，我们将按钮的内容绑定为根据按钮状态设置其文本。最后，我们将按钮的命令绑定，该按钮将切换可见性和按钮内容。这里的关键是最后一个Grid Row的*高度，以便它向上移动以覆盖已折叠的区域。我希望我有任何意义

输出

Show

或者，如果您想使用后面的代码解决它，那么只需订阅click事件并设置grid的可见性

    <Grid x:Name="myGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid x:Name="showHideGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
        <TextBlock Text="here will be some controls" FontSize="20"/>
    </Grid>
    <Button Content="Show" Grid.Row="1" Click="Button_Click_1"/>
    <DataGrid Grid.Row="2"></DataGrid>
</Grid>

点击活动

        private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        var button = sender as Button;
        if (button != null)
        {
            if (button.Content == "Show")
            {
                button.Content = "Hide";
                showHideGrid.Visibility = Visibility.Visible;
            }
            else
            {
                button.Content = "Show";
                showHideGrid.Visibility = Visibility.Collapsed;
            }
        }
    }

WPF隐藏顶部面板布局

1 个答案: