隐藏/显示 UserControl WPF

Question

我正在构建一个 WPF MVVM 应用程序。

我有什么：

我有一个ShellWindow，看起来像这样：

由2行组成：

1：带有Height="*"的汉堡菜单（不重要）

2：带有Height="100"的控制台

控制台是UserControl：

<UserControl
    //namespaces>
    <Grid Name="LoggingGrid" Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}">
            <Button
                x:Name="CollapseBtn"
                Width="25"
                Height="25"
                Click="CollapseBtn_Click"
                Content="▲">
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Ellipse Fill="White" />
                            <ContentPresenter
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Content="{TemplateBinding Content}" />
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <StackPanel Margin="5,0,0,0" Orientation="Horizontal">
                <Image
                    Height="25"
                    Source="/Images/console-icon.png"
                    Visibility="Visible" />
                <Label
                    Content="Console"
                    FontSize="16"
                    Foreground="White" />
            </StackPanel>
        </TextBlock>
        <Border Grid.Row="1">
            <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>
</UserControl>

我省略了不重要的事情。

我想做的事：

每当用户点击按钮时，控制台应该会折叠起来，看起来像这样：

箭头也变了。

我该如何实现呢？使用 MVVM 的最佳方法是什么？

我尝试过的：

我尝试在后面的代码中使用按钮单击事件处理程序 - CollapseBtn_Click，只是想看看会发生什么：

private void CollapseBtn_Click(object sender, System.Windows.RoutedEventArgs e)
{
      LoggingGrid.Visibility = System.Windows.Visibility.Hidden;
}

显然它会移除用户控件并在原来的位置留下白色背景。

Answer 1

不应将整个 LoggingGrid 的 Visibility 设置为 Hidden，而应将 LoggingList 的 Visibility 设置为 Collapsed。 （关于隐藏和折叠的区别，请看这里：Difference between Visibility.Collapsed and Visibility.Hidden）。

根据您在 ShellWindow 中的布局，您可能必须调整 UserControl 中的行高配置，以便折叠的 LoggingGrid 导致行高度为零。

关于 MVVM，最好的方法是将 Button 绑定到 ViewModel 上的 bool 属性 ConsoleVisible，以便单击按钮在 true 和 false 之间切换属性。按钮的样式可以绑定到相同的属性。对于 LoggingList Visibility，您可以在同一属性上使用带有 BooleanToVisibilityConverter 的 Binding。