需要從GridSplitter關閉面板的想法列定義

Question

我有一個要求顯示GridSplitter作爲分隔符在WPF和C＃中的網格3面板。還爲每個面板關閉選項。

普萊舍看到的圖像，以便更好地理解設計：

當用戶關閉左側面板，從現在像右側面板也留下，相同的事情，中間面板拉伸。在運行時我會再次停靠這些面板。

我試圖隱藏/摺疊關閉面板和關閉面板相關splitterm但沒有運氣。

任何建議或想法將是最受歡迎的？

編輯 我需要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; 
} 

它可以使用轉換器分路器能見度和columndefinitions寬度綁定到視圖模型的屬性的改善。