隐藏/显示 UserControl WPF

Posted 2023-02-19

【中文标题】隐藏/显示 UserControl WPF

【英文标题】：Hiding/Showing a UserControl WPF

【发布时间】：2021-12-01 00:12:16

【问题描述】：

我正在构建一个 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;

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

【参考方案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。

【讨论】：

感谢您的回答。我已经用 ShellWindow 中的行的高度更新了这个问题。显然，由于控制台的高度是固定的（我不希望它是 Auto 或 *，因为我不希望它超出应有的范围并占用更多空间），当 Visibility 折叠时，它的行为与隐藏时的方式相同 - 它用白色背景填充它。你知道有什么解决办法吗？

不客气。在这种情况下，我认为您应该直接在 LoggingList 上的 UserControl 中设置控制台的高度。并将 ShellWindow 中第二行的高度设置为 Auto。

谢谢，现在完美运行！