WPF MVVM模式下实现UserControl控制台折叠展开的最优方案

实现方案（符合MVVM规范） #

错误原因说明 #

你之前的操作错误点有两个：

• 直接隐藏整个LoggingGrid会把标题栏也一起隐藏，你需要控制显隐的只有下方的日志列表区域
• Visibility.Hidden是隐藏控件但保留原布局占位，要完全释放空间需要用Visibility.Collapsed

最优实现步骤 #

1. 视图模型添加状态属性和命令

在对应ShellWindow的ViewModel中添加如下属性（需要实现INotifyPropertyChanged接口，这里省略通知逻辑的样板代码）：

// 控制台展开状态，默认true为展开
private bool _isConsoleExpanded = true;
public bool IsConsoleExpanded
{
    get => _isConsoleExpanded;
    set 
    { 
        _isConsoleExpanded = value;
        OnPropertyChanged(); // 你的属性通知方法
    }
}

// 切换控制台展开状态的命令
public ICommand ToggleConsoleCommand { get; }

// 构造函数中初始化命令
public ShellViewModel()
{
    ToggleConsoleCommand = new RelayCommand(() => 
    {
        IsConsoleExpanded = !IsConsoleExpanded;
    });
}

注：RelayCommand是MVVM框架中常用的轻量级命令实现，如果你用了MVVM Light、Prism等框架可以直接使用，没有的话自行实现也非常简单。

2. 修改ShellWindow的布局绑定

将ShellWindow中控制台区域的行高绑定到状态属性，需要先添加一个布尔值转GridLength的转换器：

public class BoolToGridLengthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is bool isExpanded && isExpanded)
        {
            return new GridLength(100); // 展开时高度100
        }
        return GridLength.Auto; // 折叠时自适应标题栏高度
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

在ShellWindow的资源中注册转换器后，修改行定义：

<Window.Resources>
    <local:BoolToGridLengthConverter x:Key="BoolToGridLengthConverter"/>
    <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
</Window.Resources>

<Grid.RowDefinitions>
    <RowDefinition Height="*"/> <!-- 汉堡菜单区域 -->
    <RowDefinition Height="{Binding IsConsoleExpanded, Converter={StaticResource BoolToGridLengthConverter}}"/> <!-- 控制台区域 -->
</Grid.RowDefinitions>

3. 修改控制台UserControl的绑定

• 折叠按钮绑定命令，按钮内容用触发器根据状态切换箭头
• 日志列表的容器Border绑定显隐状态

<UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
</UserControl.Resources>
<Grid Name="LoggingGrid" Background="Black">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}">
        <Button
            Width="25"
            Height="25"
            Command="{Binding ToggleConsoleCommand}"
            Content="▲">
            <Button.Style>
                <Style TargetType="Button">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsConsoleExpanded}" Value="False">
                            <Setter Property="Content" Value="▼"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Ellipse Fill="White" />
                        <ContentPresenter
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Content="{TemplateBinding Content}" />
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>
        <!-- 标题栏其余代码保持不变 -->
    </TextBlock>
    <Border Grid.Row="1" Visibility="{Binding IsConsoleExpanded, Converter={StaticResource BoolToVisibilityConverter}}">
        <ListView
            x:Name="LoggingList"
            Margin="5"
            Background="Black"
            BorderThickness="0"
            Foreground="White"
            ItemsSource="{Binding Logs, UpdateSourceTrigger=PropertyChanged}"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Auto" />
    </Border>
</Grid>

轻量实现方案（纯视图逻辑，无需修改ViewModel） #

如果控制台的展开/折叠属于纯视图行为，不想污染业务ViewModel，可以在控制台UserControl的后台添加依赖属性来存储状态，逻辑和上面一致，只是状态存放在视图层，同样符合MVVM规范。

内容的提问来源于stack exchange，提问作者Raya