需要从GridSplitter列定义关闭面板的想法

Question

我要求在WPF和C＃中使用GridSplitter作为网格中的分隔符显示3个面板。还为每个面板关闭选项。

请注意图片以更好地理解设计：

当用户关闭左侧面板时，现在中间面板从左侧伸展，同样如右侧面板。在运行时我会再次停靠这些面板。

我试图隐藏/折叠封闭式面板和封闭式面板相关的分割，但没有运气。

欢迎任何建议或想法？

被修改 我需要5个列定义，包括分割器（3个面板和2个分割器）。设计代码是

  <Grid Margin="0,120,0,20" Name="panelGrid">
        <!--
            1)Browser
            2)Player
            3)Chat
        -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <DockPanel Name="webBrowserPanel" Grid.Column="0" 
                   Visibility="Visible" Background="Green" Height="auto">
            <Button HorizontalAlignment="Center" Width="20" 
                    Height="20"  Click="leftBut"></Button>
        </DockPanel>

        <GridSplitter Name="sp1" Grid.Column="1" HorizontalAlignment="Center"  
                      VerticalAlignment="Stretch" Background="Red" 
                      ShowsPreview="True" Width="5"/>

        <Grid x:Name="grid1" Grid.Column="2" AllowDrop="True" 
              Background="#FF807272"/>

        <GridSplitter Name="sp2" Grid.Column="3" HorizontalAlignment="Center" 
                      VerticalAlignment="Stretch" Background="Red" 
                      ShowsPreview="True" Width="5"/>

        <Grid x:Name="chatGrid" Grid.Column="4" Visibility="Visible"
              Background="DarkOrange" >
            <Button HorizontalAlignment="Center" Width="45" Height="20" 
                    Click="righCli">
            </Button>
        </Grid>
    </Grid>

Answer 1

这是你的意思吗？

<Grid x:Name="grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" x:Name="leftColumn"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*" x:Name="rightColumn"/>
    </Grid.ColumnDefinitions>
    <!-- u can also use DockPanel within a grid -->
    <DockPanel>
        <!-- this border is under the splitter and can't be seen-->
        <Border Background="Red" DockPanel.Dock="Right" Width="5"/>
        <Border Background="#AA0">
            <Button VerticalAlignment="Top" Click="Button_Click_1" Content="x"/>
        </Border>
    </DockPanel>
    <Border Background="#0AA" Grid.Column="1">
        <Button VerticalAlignment="Top" Click="Button_Click_2" Content="reset"/>
    </Border>
    <!-- u can also use grid within a grid -->
    <Grid Grid.Column="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!-- this is also an extra column for splitter -->
        <Border Background="Red" Grid.Column="0"/>
        <Border Background="#A0A" Grid.Column="1">
            <Button VerticalAlignment="Top" Click="Button_Click_3" Content="x"/>
        </Border>
    </Grid>
    <GridSplitter Grid.Column="0" Width="5" x:Name="leftSplitter"/>
    <!-- by setting the correct margin you hide the underlying red border -->
    <GridSplitter Grid.Column="1" Width="5" x:Name="rightSplitter" Margin="0,0,-5,0"/>
</Grid>

代码背后的代码：

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    leftColumn.Width = new GridLength(0);
    leftSplitter.Visibility = System.Windows.Visibility.Collapsed;
}

private void Button_Click_2(object sender, RoutedEventArgs e)
{
    leftColumn.Width = new GridLength(40);
    rightColumn.Width = new GridLength(40);
    leftSplitter.Visibility = System.Windows.Visibility.Visible;
    rightSplitter.Visibility = System.Windows.Visibility.Visible;
}

private void Button_Click_3(object sender, RoutedEventArgs e)
{
    rightColumn.Width = new GridLength(0);
    rightSplitter.Visibility = System.Windows.Visibility.Collapsed;
}

可以使用转换器将分割器的可见性和列定义宽度绑定到视图模型中的属性。