Problème de double animation

**Tod_sd** · 03/04/2009, 10h32

Bonjour à tous, j'essaie de faire une fenêtre que l'on peut cacher genre les panneaux de Visual Studio. J'ai donc créé un UserControl comme celui ci

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<UserControl x:Class="SDK.HiddenPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
    <UserControl.Resources>
        <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ButtonBase}">
            <Setter Property="Width" Value="20" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Grid.Column" Value="2" />
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="VerticalAlignment" Value="Top" />
        </Style>
        <Style x:Key="RectangleDividerStyle" TargetType="{x:Type Rectangle}">
            <Setter Property="Margin" Value="0,2,5,2" />
            <Setter Property="Width" Value="1" />
            <Setter Property="Stroke" Value="#BBFFFFFF" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="Grid.Column" Value="1" />
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>
    </UserControl.Resources>
    <Border Name="mainBorder">
        <Border.Triggers>
            <EventTrigger SourceName="togglePrefs"  RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width" To="250" />
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.3" Storyboard.TargetProperty="Height">
                            <LinearDoubleKeyFrame Value="400" KeyTime="0:0:0.2" />
                            <LinearDoubleKeyFrame Value="420" KeyTime="0:0:0.24" />
                            <LinearDoubleKeyFrame Value="400" KeyTime="0:0:0.3" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger SourceName="togglePrefs" RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="Height">
                            <LinearDoubleKeyFrame Value="100" KeyTime="0:0:0.2" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetProperty="Width">
                            <LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.2" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <Grid Margin="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>
            <ToggleButton Style="{StaticResource ToggleButtonStyle}" Name="togglePrefs">
                <ToggleButton.ToolTip>
                    <ToolTip>
                        <TextBlock Padding="10" Background="White" Foreground="Black" Text="Show/Hide" />
                        </ToolTip>
                </ToggleButton.ToolTip>
            </ToggleButton>
            <Rectangle Style="{StaticResource RectangleDividerStyle}" />
            <DockPanel Grid.Column="0" Margin="10,2,0,2" Background="#33FFFFFF">
                <TextBlock Text="toto" />
                    <StackPanel DockPanel.Dock="Top" Margin="0,10,0,0">
                        <TextBlock >tata</TextBlock>
                        <TextBox Name="tata" />
                        <TextBlock>tutu</TextBlock>
                        <PasswordBox Name="tutu" />
                    </StackPanel>
                </DockPanel>
        </Grid>
    </Border>
</UserControl>

Je le place donc dans ma fenêtre, j'exécute, jusque là tout va bien. Mais quand je clique sur mon bouton j'ai cette erreur

Code :

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

1
2
 
Cannot animate the 'Width' property on a 'System.Windows.Controls.Border' using a 'System.Windows.Media.Animation.DoubleAnimation'. For details see the inner exception.

Et voici l'inner

Code :

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

1
2
 
{"'System.Windows.Media.Animation.DoubleAnimation' cannot use default origin value of 'NaN'."}

Je ne vois pas qu'est ce qui n'est pas un nombre dans mon code ???

Auriez vous une idée??
Merci

Edit: EN fait truc bete, j'avais oublié un From dans le début de l'animation

.

Maintenant, j'ai un autre problème

lorsque je lance l'animation, mon bouton bouge aussi au cours de celle-ci et je ne voudrais qu'ele ne s'applique qu'au panel. Comment faire ?

**Thomas Lebrun** · 03/04/2009, 14h30

Essaye de modifier les propriétés ActualWidth et ActualHeight plutot que Width/Height

**seiryujay** · 03/04/2009, 14h38

Ca ne résoudra pas ton problème, mais y'a la librairie gratuite AvalonDock qui fournit (entre-autre) des panels qui se cachent automatiquement.

La version 1.2 doit sortir dans les jours qui viennent d'ailleurs.

**Tod_sd** · 03/04/2009, 14h39

Il me dit qu'il n'y a pas de propriété ActualWidth ou ActualHeight

Invité · 03/04/2009, 15h04

Ton erreur provient du fait que ton width et ton height sont à Nan (Valeur indéfinie) quand tu déclenche l'animation. Donne les une valeur initiale et essaye de voir si ça marche.

**Tod_sd** · 03/04/2009, 15h22

Merci seiryujay, j'ai regardé un peu la lib et c'est exactement ce qu'il me fallait

.

**seiryujay** · 03/04/2009, 15h29

Envoyé par Tod_sd

Merci seiryujay, j'ai regardé un peu la lib et c'est exactement ce qu'il me fallait

.

De rien, en plus elle est vraiment facile à utiliser.
Et puis, entre les auto-hide panels, les onglets déplaçables et les fenêtres flottantes, ça permet de faire des IHM super sympa.

**Tod_sd** · 03/04/2009, 16h47

Sinon, après quelques corrections, j'ai réussi à faire marcher mon composant.

Voici ce que j'ai fait

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
UserControl x:Class="SDK.HiddenPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="Auto" Width="Auto">
    <UserControl.Resources>
        <ResourceDictionary>
            <Style x:Key="PrefsWindowStyle" TargetType="{x:Type Border}">
                <Setter Property="Grid.Row" Value="1" />
                <Setter Property="Width" Value="40" />
                <Setter Property="Height" Value="Auto" />
                <Setter Property="CornerRadius" Value="10" />
                <Setter Property="HorizontalAlignment" Value="Left" />
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="0,1">
                            <GradientStop Offset="-0.3" Color="#EE577913" />
                            <GradientStop Offset=".6" Color="#EE87ac3d" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Background" Value="#EE679a00" />
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <TranslateTransform X="-10" />
                    </Setter.Value>
                </Setter>
            </Style>
            <Style x:Key="RectangleDividerStyle" TargetType="{x:Type Rectangle}">
                <Setter Property="Margin" Value="0,2,5,2" />
                <Setter Property="Width" Value="1" />
                <Setter Property="Stroke" Value="#BBFFFFFF" />
                <Setter Property="StrokeThickness" Value="1" />
                <Setter Property="Grid.Column" Value="1" />
                <Setter Property="HorizontalAlignment" Value="Center" />
            </Style>
            <Style x:Key="PrefsHeadingStyle" TargetType="{x:Type TextBlock}">
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="Padding" Value="2" />
                <Setter Property="FontSize" Value="16" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="DockPanel.Dock" Value="Top" />
                <Setter Property="Text" Value="PREFERENCES" />
            </Style>
            <Style x:Key="PrefsTextBlockStyle" TargetType="{x:Type TextBlock}">
                <Setter Property="Margin" Value="10,10,10,4" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="FontFamily" Value="Georgia" />
                <Setter Property="FontSize" Value="14" />
            </Style>
            <Style x:Key="PrefsTextBoxStyle" TargetType="{x:Type TextBox}">
                <Setter Property="Margin" Value="4" />
                <Setter Property="Foreground" Value="#666" />
                <Setter Property="FontFamily" Value="Georgia" />
                <Setter Property="FontSize" Value="14" />
            </Style>
            <Style x:Key="PrefsButtonStyle" TargetType="{x:Type Button}">
                <Setter Property="Margin" Value="4,10,4,4" />
                <Setter Property="FontFamily" Value="Georgia" />
                <Setter Property="FontSize" Value="14" />
                <Setter Property="Padding" Value="14,2,14,2" />
                <Setter Property="Foreground" Value="#666" />
                <Setter Property="HorizontalAlignment" Value="Right" />
            </Style>
            <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ButtonBase}">
                <Setter Property="Width" Value="20" />
                <Setter Property="Height" Value="80" />
                <Setter Property="Grid.Column" Value="2" />
                <Setter Property="HorizontalAlignment" Value="Right" />
                <Setter Property="VerticalAlignment" Value="Top" />
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>
    <Border Style="{StaticResource PrefsWindowStyle}" Name="mainBorder">
        <Border.Triggers>
            <EventTrigger SourceName="togglePrefs"  RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width" To="250" />
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.3" Storyboard.TargetProperty="Height">
                            <LinearDoubleKeyFrame Value="400" KeyTime="0:0:0.2" />
                            <LinearDoubleKeyFrame Value="420" KeyTime="0:0:0.24" />
                            <LinearDoubleKeyFrame Value="400" KeyTime="0:0:0.3" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger SourceName="togglePrefs" RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Duration="0:0:0.2" Storyboard.TargetProperty="Height">
                            <LinearDoubleKeyFrame Value="100" KeyTime="0:0:0.2" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetProperty="Width">
                            <LinearDoubleKeyFrame Value="40" KeyTime="0:0:0.2" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <Grid Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="20" />
            </Grid.ColumnDefinitions>
            <ToggleButton Style="{StaticResource ToggleButtonStyle}" Name="togglePrefs">
                <ToggleButton.ToolTip>
                    <ToolTip>
                        <TextBlock Padding="10" Background="White" Foreground="Black" Text="Show/Hide" />
                        </ToolTip>
                </ToggleButton.ToolTip>
            </ToggleButton>
            <Rectangle Style="{StaticResource RectangleDividerStyle}" />
            <DockPanel Grid.Column="0" Margin="10,2,0,2" Background="#33FFFFFF">
                <TextBlock Style="{StaticResource PrefsHeadingStyle}" />
                    <StackPanel DockPanel.Dock="Top" Margin="0,10,0,0">
 
                    </StackPanel>
                </DockPanel>
        </Grid>
    </Border>
</UserControl>

Maintenant, j'aurais encore une question à ce propos: est il possible de faire en sorte que la hauteur à la fin de l'animation soit celle de la fenêtre contenante?

Problème de double animation

Windows Presentation Foundation

Discussions similaires

Partager

Partager