Hiding/Showing 一个用户控件 WPF

Question

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

我有：

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

它由两行组成：

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 可见性，您可以在属性.

上使用带有 BooleanToVisibilityConverter 的绑定

Hiding/Showing 一个用户控件 WPF

Hiding/Showing a UserControl WPF

c#

wpf

user-controls

mvvm