如何根據切換按鈕顯示/隱藏網格行和網格分割器？

目前我有一個切換按鈕，在我的代碼後面綁定到一個布爾屬性（DualLayout）。當布爾值設置爲True時，我希望我的網格（和網格分割器）中的第二行隱藏，並使第一行佔據網格的整個空間。一旦布爾值設置爲False，我想要顯示網格分隔符和最下面一行。如何根據切換按鈕顯示/隱藏網格行和網格分割器？

這是我的XAML

<ToggleButton Name="toggleLayout" Margin="66,1,0,1" Width="25" HorizontalAlignment="Left" IsChecked="{Binding DualLayout}" Checked="toggleLayout_Clicked" Unchecked="toggleLayout_Clicked"> 
      <ToggleButton.Style> 
       <Style TargetType="{x:Type ToggleButton}"> 
        <Style.Triggers> 
         <Trigger Property="IsChecked" Value="true"> 
          <Setter Property="ContentTemplate"> 
           <Setter.Value> 
            <DataTemplate DataType="{x:Type ToggleButton}"> 
             <Image Source="Images/PlayHS.png"/> 
            </DataTemplate> 
           </Setter.Value> 
          </Setter> 
          <Setter Property="ToolTip" Value="Receive and Transmit Windows Split."/> 
         </Trigger> 
         <Trigger Property="IsChecked" Value="false"> 
          <Setter Property="ContentTemplate"> 
           <Setter.Value> 
            <DataTemplate DataType="{x:Type ToggleButton}"> 
             <Image Source="Images/PauseHS.png"/> 
            </DataTemplate> 
           </Setter.Value> 
          </Setter> 
          <Setter Property="ToolTip" Value="Receive and Transmit Windows Combined."/> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </ToggleButton.Style> 
     </ToggleButton> 
    <Grid x:Name="transmissionsGrid" Margin="0,28,0,0"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*" MinHeight="100" /> 
     </Grid.RowDefinitions> 
     <transmission:TransmissionsControl x:Name="transmissionsReceive" TransmissionType="Receive" Margin="0,0,0,5" /> 
     <GridSplitter Name="gridSplitter1" Grid.Row="0" Background="White" Cursor="SizeNS" Height="4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Foreground="Firebrick" /> 
     <transmission:TransmissionsControl x:Name="transmissionsTransmit" TransmissionType="Transmit" Grid.Row="1" /> 
    </Grid>

來源

2010-04-22 Travyguy9

這是未經測試的一個片段，但我相信它應該工作。

首先，如果你希望你的第一行佔據整個空間，你要定義你RowDefinitions爲

<Grid.RowDefinitions> 
    <RowDefinition Height="*"/> 
    <RowDefinition Height="Auto" /> <!-- Edit: Removed MinHeight="100" --> 
</Grid.RowDefinitions>

對於顯示/隱藏控件，你需要結合自己的知名度屬性或者你的DualLayout屬性（如果這個類正確地實現了INotifyPropertyChanged），或者（可能更簡單）屬性到ToggleButton的IsChecked屬性。

例如（同樣適用於GridSplitter）：

<!-- EDIT: Added MinHeight="100" here instead --> 
<transmission:TransmissionsControl x:Name="transmissionsTransmit" 
       TransmissionType="Transmit" 
       Grid.Row="1" 
       MinHeight="100" 
       Visibility={Binding ElementName=toggleLayout, 
            Path=IsChecked, 
            Converter={StaticResource boolToVis}}" />

在有問題的控制（在這裏，我在窗位做）以上一定程度上，你需要添加內置BooleanToVisibilityConverter資源：

<Window.Resources> 
    <BooleanToVisibilityConverter x:Key="boolToVis" /> 
</Window.Resources>

來源

2010-04-22 15:38:11

它隱藏了控件（GridSplitter和Bottom Control），但是頂部的控件並沒有填滿整個空間。它僅保持相同高度 – Travyguy9 2010-04-22 21:01:25

您需要將網格的VerticalAlignment設置爲Stretch。目前，Grid並不知道要填充所有可用空間。請注意，如果您想要填充水平空間，您可能還想將HorizontalAlignment設置爲「拉伸」。我假設你也對上面指定的RowDefinitions進行了更改。希望這有助於！ – 2010-04-23 14:22:35

對不起，這沒有幫助。它仍然採用相同的方式。我錯過了什麼？這是我得到的（減去切換按鈕）。這可能很難通過閱讀，雖然...對不起我也需要分解它，所以我可以粘貼它.. – Travyguy9 2010-04-26 16:45:43

如何根據切換按鈕顯示/隱藏網格行和網格分割器？

回答

相關問題