Discussion :

[Finality]

Bonjour tout le monde,

voilà je viens vers vous car je rencontre quelques problèmes en wpf.

Je suis en train d'essayer de créer un système de transition (une sorte de slide sur les diaporamas powerpoint), afin de présenter le contenu de mon application.

Pour que cela soit plus clair, voilà un petit schéma :



Pour faire ceci, voilà mon code XAML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 <Grid>
        <Grid Background="Red" Width="200" Height="200">
            <Grid Background="Beige" Name="pnl1">
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <ThicknessAnimation Storyboard.TargetName="pnl1" Storyboard.TargetProperty="Margin" From="0,200,0,0" To="0,00,0,0" ></ThicknessAnimation> 
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>
                <Button>Test</Button>
            </Grid>
        </Grid>
 
    </Grid>

Le problème que je rencontre, c'est que le panel en mouvement ne garde pas une taille fixe. En effet, ça taille est celle qui est affichée. Si vous testez le code que je vous ai donné, vous verrez que le bouton se redimensionne.

D'où ma question : connaitriez-vous un moyen afin de régler ce problème ?

Je vous remercie d'avance pour votre aide
Cordialement

Finality

[tomlev]

Il faut définir une TranslateTransform sur le contrôle et animer cette transformation dans ton storyboard.

[Finality]

Salut Tomlev

Tout d'abord, merci pour ta réponse

alors j'ai testé ce que tu m'as dit, mais j'ai toujours un problème.... Tout d'abord voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
    <Grid>
        <Grid Background="Red" Width="200" Height="200">
            <Grid Background="Beige" Name="pnl1">
 
                <Button>Test</Button>
            </Grid>
        </Grid>
 
    </Grid>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
public test()
        {
            InitializeComponent();
            TranslateTransform tt = new TranslateTransform();
 
            //pnl1.Margin = new Thickness (0, 150, 0, 0);
            //DoubleAnimation datt1 = new DoubleAnimation(-200, new Duration(new TimeSpan(0, 0, 1)));
            DoubleAnimation datt1 = new DoubleAnimation(200, new Duration(new TimeSpan(0, 0, 1)));
 
            tt.BeginAnimation(TranslateTransform.YProperty, datt1);
            pnl1.RenderTransform = tt;
        }

1er problème : si tu lances le code tel quel, tu vois bien que la translation à lieu, mais mon panel dépasse de la grid qui le contient...

2eme problème : si tu utilises les 2 lignes commentées (slide vers le haut), tu vois bien que rien ne se passe. J'en ai conclu que wpf utilise la partie affichée du contrôle pour la translation. hors, dans ce cas précis, aucune partie de mon contrôle n'est affichée...

Aurais-tu une idée pour résoudre ces problèmes ?

Une fois de plus merci
Cordialement

Finality

[tomlev]

D'abord, il faut mettre la transformation sur la Grid dès le départ, et en aucun cas l'affecter à la Grid après avoir lancé l'animation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
    <Grid>
        <Grid Background="Red" Width="200" Height="200">
            <Grid Background="Beige" Name="pnl1">
                <Grid.RenderTransform>
                    <TranslateTransform />
                </Grid.RenderTransform>
                <Button>Test</Button>
            </Grid>
        </Grid>
 
    </Grid>

Ensuite, plutôt que de créer une nouvelle TranslateTransform, récupère celle de la Grid :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
        public test()
        {
            InitializeComponent();
            TranslateTransform tt = pnl1.RenderTransform as TranslateTransform;
 
            //pnl1.Margin = new Thickness (0, 150, 0, 0);
            //DoubleAnimation datt1 = new DoubleAnimation(-200, new Duration(new TimeSpan(0, 0, 1)));
            DoubleAnimation datt1 = new DoubleAnimation(200, new Duration(new TimeSpan(0, 0, 1)));
 
            tt.BeginAnimation(TranslateTransform.YProperty, datt1);
        }

J'ai pas testé tout ça, pas le temps... mais ça devrait peut-être aller un peu mieux

[Finality]

Re Salut tomlev

oui c'est vrai que as raison, mon code était pas très logique

Sinon, ta solution a exactement le même comportement que celle que j'ai donné, donc toujours les mêmes problèmes...

T'es pas obligé de me répondre dans la minute tu sais si tu as pas le temps, tu peux le faire après, c'est déjà sympa de ta part de m'aider

Encore merci, en espérant que tu ne sois pas à court d'idée

[binoo]

Salut,

Est-ce que cela ne viendrait pas de la propriété RenderTransformOrigin de la Grid :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    <Grid>
        <Grid Background="Red" Width="200" Height="200">
            <Grid Background="Beige" Name="pnl1" RenderTransformOrigin="0.5, 0.5" >
                <Grid.RenderTransform>
                    <TranslateTransform />
                </Grid.RenderTransform>
                <Button>Test</Button>
            </Grid>
        </Grid>
        
    </Grid>

Essaie de jouer avec.