如何切换 WPF 网格列可见性

Question

我在让它在我正在开发的 WPF 应用程序中工作时遇到一些困难。 基本上，我想要的类似于 MMC 中的任务窗格：

• 该应用程序在显示屏的主要部分有三列。 我需要右侧有一列可调整大小。 我认为这意味着使用带有 GridSplitter 的 Grid，但任何有效的方法都可以。
• 我希望能够在应用程序关闭时保存右侧列的宽度，并在应用程序打开时加载它，但这应该是初始大小：用户应该能够调整它的大小。
• 当我调整窗口大小时，我希望左侧和右侧列保持相同大小，中间列随窗口宽度调整大小。
• 左侧和右侧的列需要有最小宽度。 当我调整右侧列的大小时，我希望中心列变小，但左侧列不变。
• 我还希望能够使用列外部的切换按钮切换右侧列的可见性，当它返回可见性时，我希望它的宽度与之前相同。

我尝试在 XAML 和绑定中尽可能多地进行操作。

我可以在上面加奶油、冰淇淋和巧克力片吗？ :-)

Answer 1

当我阅读您的需求时，我想到的不是 Grid，而是 DockPanel。

<DockPanel>
    <Grid Name="right"
        DockPanel.Dock="Right" MinWidth="100" />
    <Grid Name="Left"
        DockPanel.Dock="Left" MinWidth="100" />
    <Grid Name="middle" />
</DockPanel>

如果您想办法调整 right 的大小，那么 middle 将随着 right 大小的调整而改变。 如果调整窗口大小，则只有 middle 会发生变化。 存储和设置 right 的 Width 由您决定，但应该不难。

至于允许用户向右调整大小，这会有点棘手，但我发现这篇文章应该会有所帮助。 另一篇文章可能会有所帮助。

对于right的可见性，可以将其Visibility设置为Collapsed来隐藏它，设置为Visible即可恢复它代码>.

注意：里面的面板不必是Grid，但您需要为每个面板使用某种Panel。 当前 Grid 列中的任何内容都应该可以正常工作。

Answer 2

我使用了带有 GridSplitters 的网格，因为这使得在保持左右列宽度的同时调整中间列的大小变得非常容易。

XAML：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="MainWindow"
    Title="Main Window"
    Width="640" Height="480">

    <Grid>
        <Grid.ColumnDefinitions>
            <!-- Left column -->
                <ColumnDefinition Width="200" MinWidth="100"/>
                <!-- Left GridSplitter column -->
                <ColumnDefinition Width="5"/>
                <!-- Center column. A width of * means the column will fill
                     any remaining space. -->
                <ColumnDefinition Width="*"/>
                <!-- Right GridSplitter column -->
                <ColumnDefinition x:Name="RightSplitterColumn" Width="5"/>
                <!-- Right column -->
                <ColumnDefinition x:Name="RightColumn" Width="200"
                                  MinWidth="100"/>
                </Grid.ColumnDefinitions>
                <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />
                <GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" />
                <Button x:Name="ToggleButton" Grid.Column="2"
                        Content="Toggle Right Column" Width="150" Height="25"
                        Click="ToggleButton_Click" />
    </Grid>
</Window>

代码隐藏

当隐藏右列时，我只是将列宽设置为 0，因为网格列没有可见性属性。

public partial class MainWindow : Window
{
    private double rightColumnWidth;
    private double rightColumnMinWidth;
    private bool rightColumnHidden;

    public MainWindow()
    {
        this.InitializeComponent();
    }

    private void ToggleButton_Click(object sender, RoutedEventArgs e)
    {
        if (rightColumnHidden)
        {
            // Restore the widths.
            RightColumn.MinWidth = rightColumnMinWidth;
            RightColumn.Width = new GridLength(rightColumnWidth);
            RightSplitterColumn.Width = new GridLength(5);
        }
        else
        {
            // Remember the user-set widths for the columns.
            rightColumnWidth = RightColumn.Width.Value;
            rightColumnMinWidth = RightColumn.MinWidth;

            // Remember to set the minimum width to 0 before changing the actual
            // width.
            RightColumn.MinWidth = 0;
            RightColumn.Width = new GridLength(0);
            RightSplitterColumn.Width = new GridLength(0);
        }

        rightColumnHidden = !rightColumnHidden;
    }
}

至于在启动时保存和恢复列宽度，我只需将宽度变量存储到设置文件中，然后在重新打开应用程序时应用它们。

Answer 3

将列定义宽度设置为自动，并在该列中放置一个控件，并为其他列提供星号。 每当您想要隐藏包含内容的列时，请设置 control.Visibility=Collapsed ，并且由于列宽为“自动”，您将看不到该列，其余列将占用空间。

Answer 4

3 年后，您可以在 CodeProject 上找到另一种方法。

http://www.codeproject.com/Articles/437237 /WPF-Grid-Column-and-Row-Hiding

它向自定义列定义添加了“可见”属性。