animation sur la visibilité d'un Grid

Question

Bonjour,

j'ai un Grid dont j'ai defini 2 lignes nommées respectivement "HauteurGrilleListe" et "HauteurGrilleDetail".

Dans la 1ere ligne placé un ListView et la 2ème un autre Grid dont au depart caché.Ce que je veux faire et de cacher la premiere ligne lorsque l'on double-clique sur le ListView et de faire apparaitre la 2ème cest-à dire le Grid caché  mais de façon animée.

Voici mon code

   <Grid x:Name="GrilleListeDetail">
            <Grid.RowDefinitions>
                <RowDefinition x:Name="HauteurGrilleListe"/>
                <RowDefinition x:Name="HauteurGrilleDetail"/>
            </Grid.RowDefinitions>
       
            <Grid.Triggers>
                <EventTrigger RoutedEvent="ListView.MouseDoubleClick" SourceName="ListeView">
                    <BeginStoryboard>
                        <BeginStoryboard.Storyboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="HauteurGrilleListe" Storyboard.TargetProperty="Visibility" To="0" Duration="0"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard.Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
            
            
            <ListView  x:Name="ListeView" ScrollViewer.VerticalScrollBarVisibility="Auto">
                <ListView.View>
                    <GridView ColumnHeaderContainerStyle="{StaticResource CustumHeaderStyle}">
                        <GridView.Columns>

                            <GridViewColumn Header="Nom" Width="100">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding }" />
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>

                            <GridViewColumn Header="Age" Width="100">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding }" Margin="0"/>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>

                        </GridView.Columns>




                    </GridView>
                </ListView.View>
            </ListView>
            
            <!--vue detail-->

            <Grid Grid.Row="1" Margin="0" VerticalAlignment="Stretch" TextBlock.FontSize="16" Visibility="Hidden">
                

                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                   
                </Grid.RowDefinitions>
                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="Nom" Foreground="Black" Margin="3" Grid.Row="1" />
                <TextBox Text="{Binding }" Grid.Column="2" Grid.Row="1" Margin="3"/>

                <TextBlock Text="Age" Foreground="Black" Margin="3" Grid.Row="2"/>
                <TextBox Text="{Binding}" Grid.Column="2" Grid.Row="2" Margin="3"/>


            </Grid>
            
        </Grid>

j'aimerais utiliser une animation svp!

---

forum ms89

Answer 1

Bonjour

On a déplacé votre thread vers le forum dédiée WPF.

Cordialement,

---

Aurel BERA, MSFT
MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

Answer 2

Le plus simple est d'utiliser les VisualState et le VisualStateManager. Par exemple, vous définissez un State "Ligne1Visible" et un autre State "Ligne2Visible". Dans le state 1, vous mettez Opacity de la grille de la ligne 2 à 0 et Height à 0 et l'inverse pour la grille de la ligne 1. Dans le state 2, vous mettez Opacity de la grille de la ligne 1 à 0 et Height à 0 et l'inverse pour la grille de la ligne 2. Vous définissez une Duration pour le passage du State 1 au State 2 (et aussi du State 2 au State 1). Enfin, quand vous voulez déclenchez l'animation, vous utilisez le VisualStateManager : VisualStateManger.GotToState("Ligne2Visible") Et vous aurez une belle animation (je suis pas graphiste ;-))) Le plus simple pour créer tout cela, c'est d'utiliser Blend.

---

Richard Clark
Consultant - Formateur .NET
http://www.c2i.fr
Depuis 1996: le 1er site .NET francophone

Answer 3

Bonjour,

j'avait remarqué que pour ces genre d'animation Expression Blend est la solution mais j'ai n'ai pas assez de ressources pour l'utiliser efficacement. Sauriez-vous où je peux trouver un bon tuto car j'ai fais beaucoup de recherche mais bon qui m'a plus ou pas assez riche.

Merci!

---

forum ms89

Answer 4

http://weblogs.asp.net/scottgu/archive/2008/06/06/silverlight-2-beta2-released.aspx

C'est pour Silverlight 2 (beta) mais ca marche aussi pour WPF 4 ;-)

---

Richard Clark
Consultant - Formateur .NET
http://www.c2i.fr
Depuis 1996: le 1er site .NET francophone

Answer 5

Bonjour,

Est-ce que vous avez testé les solutions proposées ? Merci de partager avec nous les résultats, afin que d'autres personnes avec le même problème puissent profiter de cette solution.

Cordialement,

---

Aurel BERA, MSFT
MSDN Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE.
S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

Answer 6

Bonjour,

j'avais eu souci de connexion en réalité j'ai agis sur la hauteur

voici le xaml.

 <Grid x:Name="GrilleListeDetail" Margin="0" Grid.Row="1" 
              Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window},Path=ActualHeight}">
            
         <Grid.Triggers>
                <EventTrigger RoutedEvent="ListView.MouseDoubleClick" SourceName="ListeView">
                    <BeginStoryboard>
                        <BeginStoryboard.Storyboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="detailGridVue" Storyboard.TargetProperty="Height"
                                                To="0.0" Duration="00:00:00" >
                                    
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard.Storyboard>
                    </BeginStoryboard>
                    
                    <BeginStoryboard>
                        <BeginStoryboard.Storyboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="detailGridVue" Storyboard.TargetProperty="Height"
                                                 To="400.0"
                                                 Duration="00:00:0.9">
                                    
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard.Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
<-------------------------->

ce que j'ai fait ici est de mettre au départ  la hauteur de mon detailGridVue à 0 ensuite déclencher l'animation au double-clique de ma ListView en partant de 0 c'est-à dire la propriété To de la Classe DoubleAnimation d'où To="0" et à l'instant  de 0.9 second la hauteur pas de 0 à 400.

voilà, c'étais pas vraiment ce que je voulais mais cette façon aussi me convient bien.

Merci à tous ceux qui ont tenter de m'aider.

---

forum ms89