WPF Grille Afficher/Masquer la colonne

Question

J'ai la disposition suivante dans ma grille

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

Je veux essentiellement cette disposition lorsque le bouton est pressé:

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

Et cette disposition lorsque le bouton est enfoncé à nouveau:

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

Comment puis-je faire disparaître le gridsplitter et le dernier panneau et faire remplir le panneau dans la colonne du milieu endroit? (et vice-versa) Existe-t-il un moyen de modifier l'envergure des colonnes lors de l'exécution?

Merci!

Answer 1

Vous pouvez utiliser des déclencheurs ou vous pouvez utiliser un storyboard/animation les incendies lorsque vous cliquez sur le bouton.

que vous voulez faire quelque chose comme ça .....

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

afin d'inverser cette animation, vous devez utiliser quelque chose pour maintenir l'état, disent utiliser un ToggleButton et utiliser le ToggleButton.Checked & & ToggleButton.Unchecked les événements routés. Ou, ajoutez une propriété de dépendance à votre codebehind qui maintient l'état.

Je pense que le principal problème est de ne pas oublier de modifier l'attribut MinWidth. MinWidth remplacera la largeur réelle.