WPF сетки Показать/скрыть колонки

Question

Я следующий макет в моей сетке

<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" /> 

Как я могу сделать сетку решетки и последнюю панель исчезнуть, а панель в среднем столбце заполнить ее место? (и наоборот) Есть ли способ изменить диапазон столбцов во время выполнения?

Спасибо!

Answer 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 и использовать ToggleButton.Checked & & ToggleButton.Unchecked маршрутизированные события. Или добавьте свойство зависимостей в ваш код, который поддерживает состояние.

Я думаю, что основная проблема заключается в том, чтобы изменить атрибут MinWidth. MinWidth переопределяет фактическую ширину.