2010-01-15 120 views
2

我在我的网格布局如下WPF网格显示/隐藏列

<Grid> 
    <Grid.RowDefinitions > 
     <RowDefinition Height="50" /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Button Click="Button_Click" Grid.Row="0" Width="50" Grid.Column="2" Content="Test" /> 
    <Grid Grid.Row="1"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="120" /> 
     <ColumnDefinition /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <StackPanel Grid.Column="0" Grid.Row="1" Background="red" /> 
    <StackPanel Grid.Column="1" Grid.Row="1" Background="Blue" /> 
    <GridSplitter x:Name="gs" Grid.Column="1" Grid.Row="1" Width="10" /> 
    <StackPanel x:Name="green" MinWidth="100" Grid.Column="2" Grid.Row="1" Background="Green" /> 
    </Grid> 
</Grid> 

我基本上是希望在按钮按下此布局:

<StackPanel Grid.Column="0" Grid.Row="1" Background="red" /> 
    <StackPanel Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Background="Blue" /> 
    <!--<GridSplitter x:Name="gs" Grid.Column="1" Grid.Row="1" Width="10" /> 
    <StackPanel x:Name="green" MinWidth="100" Grid.Column="2" Grid.Row="1" Background="Green" />--> 

而这种布局按下按钮时再次:

<StackPanel Grid.Column="0" Grid.Row="1" Background="red" /> 
    <StackPanel Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Background="Blue" /> 
    <GridSplitter x:Name="gs" Grid.Column="1" Grid.Row="1" Width="10" /> 
    <StackPanel x:Name="green" MinWidth="100" Grid.Column="2" Grid.Row="1" Background="Green" /> 

如何使网格分离器和最后一个面板消失,并让中间列的面板填充它地点? (反之亦然)有没有办法在运行时更改列跨度?

谢谢!

回答

1

您可以使用触发器,也可以在单击按钮时使用故事板/动画触发。

你想要做这样的事情

.....

<Window.Resources> 

     <Storyboard x:Key="OnClick1"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="gs" Storyboard.TargetProperty="(FrameworkElement.Width)"> 
       <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="green" Storyboard.TargetProperty="(FrameworkElement.MinWidth)"> 
       <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 

    </Window.Resources> 
    <Window.Triggers> 
     <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button"> 
      <BeginStoryboard Storyboard="{StaticResource OnClick1}"/> 
     </EventTrigger> 
    </Window.Triggers> 

为了扭转这个动画,你应该用什么来保持状态,说用一个切换按钮,使用ToggleButton.Checked & & ToggleButton.Unchecked路由事件。或者,将一个依赖属性添加到维护状态的代码隐藏中。

我认为主要的问题是记住改变MinWidth属性。 MinWidth将覆盖实际宽度。