Discussion :

[I_Pnose]

Bonjour,

J’ai un petit souci visuel (que je vais tenter d’expliquer -_- ).
J’ai un contrôle de 500 pixels de haut que j’anime sur l’axe vertical (pour le faire apparaitre à l’écran -en gros il passe d’une position de -500 à 0). Bref rien de sorcier.
Si je laisse mon navigateur préféré en taille normal d’utilisation, tout va bien, par contre si je redimensionne la fenêtre de façon à ce que la zone de rendu soit plus petite que 500 pixels, mon contrôle se retrouve tronqué à sa base pendant la phase d’animation.
Je pense que le comportement est logique, le moteur de rendu de Silverlight va prendre pour taille de buffer la taille de la fenêtre du navigateur. Mais lors d’animations de ce genre, on se retrouve avec des contrôles coupés à la serpe et ce n’est pas franchement sexy.
Du coup, je voulais savoir s’il y avait une solution à ce "souci"... en espérant avoir été clair.

Si personne ne comprend mon problème, je mettrai en ligne mon application pour que vous voyiez de vos yeux le phénomène.

[Samuel Blanchard]

Il suffit de placer ton élement à animer sans margin en le déplaçant préalablement via un translatetransform comme ça :

Code XAML :

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

1
2
3
4
5
<Button Content="Hello">
  <Button.RenderTransform>
        <TranslateTransform X="-500" />
  </Button.RenderTransform>
</Button>

ainsi ton élément ne sera pas clippé.

[I_Pnose]

Je ne suis pas sûr de comprendre ce que tu entends par "sans margin".

Dans le code ci-dessous, je n'ai pas de margin sur mon "host" (c'est lui qui est animé, donc), mais mon SubscriptionUI en possède (et je suis bien obligé).

Code xaml :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<Grid
    Name="_hostSubscriptionUI"
    VerticalAlignment="Top">
 
    <Grid.RenderTransform>
        <TranslateTransform Y="-500"/>
    </Grid.RenderTransform>
 
    <src:SubscriptionUI x:Name="_subscriptionUI"/>
 
    <Grid.Resources>
        <Storyboard 
            x:Name="_subscriptionUIStoryboardIn">
 
            <DoubleAnimation 
                Duration="00:00:1.0" 
                Storyboard.TargetName="_hostSubscriptionUI" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" 
                To="0">
 
                <DoubleAnimation.EasingFunction>
                    <QuinticEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
 
        <Storyboard 
            x:Name="_subscriptionUIStoryboardOut">
 
            <DoubleAnimation 
                Duration="00:00:0.5" 
                Storyboard.TargetName="_hostSubscriptionUI" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" 
                To="-500">
 
                <DoubleAnimation.EasingFunction>
                    <PowerEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>
</Grid>

[Samuel Blanchard]

Excuse moi à la fois du retard et de ma réponse qui était fausse
En fait c'est le contraire qu'il faut faire (je confonds toujours les deux).

Comme tu l'a bien compris, ton problème vient du fait que ton animation commence en dehors de l'écran et que les les transformations n'agissent que sur des images (copie de l'ecran).

Pour ne pas avoir cette effets de coupe il faut forcer le XAML a se dessiner en dehors du cadre. Pour se faire tu peux utiliser un Margin négatif (ici -500 sur le top).

Code XAML :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<Grid
    Name="_hostSubscriptionUI"
    VerticalAlignment="Top" Margin="0,-500,0,0">
 
    <Grid.RenderTransform>
        <TranslateTransform Y="0"/>
    </Grid.RenderTransform>
 
    <src:SubscriptionUI x:Name="_subscriptionUI"/>
 
    <Grid.Resources>
        <Storyboard 
            x:Name="_subscriptionUIStoryboardIn">
 
            <DoubleAnimation 
                Duration="00:00:1.0" 
                Storyboard.TargetName="_hostSubscriptionUI" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" 
                To="500">
 
                <DoubleAnimation.EasingFunction>
                    <QuinticEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
 
        <Storyboard 
            x:Name="_subscriptionUIStoryboardOut">
 
            <DoubleAnimation 
                Duration="00:00:0.5" 
                Storyboard.TargetName="_hostSubscriptionUI" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" 
                To="0">
 
                <DoubleAnimation.EasingFunction>
                    <PowerEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>
</Grid>

Dans le code on voit aussi que j'ai modifié les valeurs de tes animations puisque le Margin début à -500, l'animation doit débuter à 0 (et plus - 500). En gros on rajoute +500 a toutes les valeurs de l'animations.

J'ai pas testé mais ça doit marcher

[I_Pnose]

Merci, c'est pas bête, je testerai ça ce soir !
^^

Dans le pire des cas, si ça ne marche pas, j'ai rusé en modifiant le MaxHeight du conteneur parent et ça résout le souci (mais c'est peut être moins propre).