[Animation] Comment réaliser un effet de sortie sur un bouton ?

**ikeas** · 30/09/2008, 14h42

bonjour
j'aimerais faire un bouton a demi masqué par un rectangle et qui bouge vers la gauche au mouseenter
et qui rerentre vers la droite au mouse leave
avec les effets je rentre tout seul progressivement et sii je repasse dessus il resort aussi a partir de la position qu'il a
comme on le voit de temps en temps sur flash

pour le moment j'ai fait ca (mon bouton est dans un ser control)

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
 
<Window.Resources>
		<Storyboard x:Key="Storyboard1">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="userControl1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-83.125"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Key="Storyboard2"/>
	</Window.Resources>
	<Window.Triggers>
		<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="userControl1">
			<RemoveStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
			<BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/>
		</EventTrigger>
		<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="userControl1">
			<PauseStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
		</EventTrigger>
	</Window.Triggers>
 
	<Grid x:Name="LayoutRoot">
		<Test_Tool_tips:UserControl1 HorizontalAlignment="Left" Margin="90.875,29.875,0,0" Width="186" Height="39.75" VerticalAlignment="Top" x:Name="userControl1" RenderTransformOrigin="0.5,0.5">
			<Test_Tool_tips:UserControl1.RenderTransform>
				<TransformGroup>
					<ScaleTransform ScaleX="1" ScaleY="1"/>
					<SkewTransform AngleX="0" AngleY="0"/>
					<RotateTransform Angle="0"/>
					<TranslateTransform X="0" Y="0"/>
				</TransformGroup>
			</Test_Tool_tips:UserControl1.RenderTransform>
		</Test_Tool_tips:UserControl1>
		<Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Margin="117.875,15,104.125,183.5"/>
	</Grid>

**binoo** · 30/09/2008, 15h45

Envoyé par ikeas

bonjour
j'aimerais faire un bouton a demi masqué par un rectangle et qui bouge vers la gauche au mouseenter
et qui rerentre vers la droite au mouse leave
avec les effets je rentre tout seul progressivement et sii je repasse dessus il resort aussi a partir de la position qu'il a
comme on le voit de temps en temps sur flash

pour le moment j'ai fait ca (mon bouton est dans un ser control)

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
 
<Window.Resources>
		<Storyboard x:Key="Storyboard1">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="userControl1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-83.125"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Key="Storyboard2"/>
	</Window.Resources>
	<Window.Triggers>
		<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="userControl1">
			<RemoveStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
			<BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/>
		</EventTrigger>
		<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="userControl1">
			<PauseStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
		</EventTrigger>
	</Window.Triggers>
 
	<Grid x:Name="LayoutRoot">
		<Test_Tool_tips:UserControl1 HorizontalAlignment="Left" Margin="90.875,29.875,0,0" Width="186" Height="39.75" VerticalAlignment="Top" x:Name="userControl1" RenderTransformOrigin="0.5,0.5">
			<Test_Tool_tips:UserControl1.RenderTransform>
				<TransformGroup>
					<ScaleTransform ScaleX="1" ScaleY="1"/>
					<SkewTransform AngleX="0" AngleY="0"/>
					<RotateTransform Angle="0"/>
					<TranslateTransform X="0" Y="0"/>
				</TransformGroup>
			</Test_Tool_tips:UserControl1.RenderTransform>
		</Test_Tool_tips:UserControl1>
		<Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Margin="117.875,15,104.125,183.5"/>
	</Grid>

Salut,

et quelle est ta question exactement ? tu attends des conseils peut-être ?

Personnellement, plutôt que de passer par un UserControl, je trouve plus propre de passer par un DataTemplate dans le ce cas là

**ikeas** · 30/09/2008, 22h40

en fait j'ai pas vraiment trouve comment il fallait faire
que ce soit un user control ou vraiment un bouton
j'aimerais qu'il ait le comportement
je passe dessus il sort de dessous un rectangle
je sort il s'arret et il rentre a la position dorigine
et si je repasse vite fait dessus avant qu'il soit completement rentré il repart dans l'autre sens

j'ai deja vu ce comportement sur des menu flash ou des boutons j'aimerais juste savoir comment le faire en wpf

un peut comme l'animation que tu vois ici
http://www.toxiclab.org/tutorial.asp?ID=37
pour exemple

ou la
http://www.toxiclab.org/tutorial.asp?ID=214
le meme principe que la barre rouge

quand tu passe dessus ca commence puis quand tu sort ca s'arrete et ca repart toujours de la position courante

**binoo** · 30/09/2008, 23h24

Salut,

Voici un exemple qui reprend l'exemple de la barre rouge

:

Code xml :

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
    <Style x:Key="SpecialButtonStyle1" TargetType="{x:Type Button}">
      <Setter Property="Foreground" Value="#000000" />
      <Setter Property="Width" Value="120"/>
      <Setter Property="Height" Value="120"/>
      <Setter Property="FontSize" Value="10"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Button}" >
            <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" >
              <Rectangle x:Name="rectangle" Height="{TemplateBinding Height}" 
                         Width="{TemplateBinding Width}"
                         Stroke="#FF570606" StrokeMiterLimit="1.000000" StrokeThickness="0.500000" 
                         RadiusX="5" RadiusY="5" >
                <Rectangle.Fill>
                  <LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
                    <GradientStop Color="#FFA3C0E8" Offset="0.101"/>
                    <GradientStop Color="#FF9EABDB" Offset="0.49"/>
                    <GradientStop Color="#FFE4EBF4" Offset="0.51"/>
                    <GradientStop Color="#FFC3CFFC" Offset="0.019"/>
                    <GradientStop Color="#FFDFE2E8" Offset="0.986"/>
                  </LinearGradientBrush>
                </Rectangle.Fill>
              </Rectangle>
              <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                RecognizesAccessKey="True"/>
              <Rectangle x:Name="RectMove" Height="0" HorizontalAlignment="Left"
                         Width="20" Fill="Red"
                         Stroke="#FF570606" StrokeMiterLimit="1.000000" StrokeThickness="0.500000" 
                         RadiusX="5" RadiusY="5" >
                <Rectangle.RenderTransform>
                  <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0" Y="0"/>
                  </TransformGroup>
                </Rectangle.RenderTransform>
              </Rectangle>
            </Grid>
            <ControlTemplate.Triggers>
              <Trigger Property="IsKeyboardFocused" Value="true"/>
              <EventTrigger RoutedEvent="Button.MouseEnter" >
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RectMove" 
                      Storyboard.TargetProperty="Height">
                      <SplineDoubleKeyFrame KeyTime="00:00:0.5" Value="120"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
              <EventTrigger RoutedEvent="Button.MouseLeave" >
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="RectMove" 
                      Storyboard.TargetProperty="Height">
                      <SplineDoubleKeyFrame KeyTime="00:00:0.5" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

Ajout du bouton :

Code xml :

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

<Button Style={StaticResource SpecialButtonStyle1} Content="Button" />

Une fois le principe compris, je pense que tu peux obtenir ce que tu veux

.

**ikeas** · 01/10/2008, 07h35

merci super

c'est tout a fait ce que je voulais !!!!

**ikeas** · 01/10/2008, 08h33

donc encore merci (je louage a mort non !!!)
voila tt a fait ce que je voulais faire

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
 
 <Button Height="40" HorizontalAlignment="Left" Margin="42,0,0,57" Name="button5" VerticalAlignment="Bottom" Width="123" Content="toto">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform x:Name="deca"  X="0" Y="0"/>
                </TransformGroup>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.MouseEnter" >
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="deca" Storyboard.TargetProperty="X">
                                <SplineDoubleKeyFrame KeyTime="00:00:0.5" Value="-20"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.MouseLeave" >
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="deca" Storyboard.TargetProperty="X">
                                <SplineDoubleKeyFrame KeyTime="00:00:0.5" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

[Animation] Comment réaliser un effet de sortie sur un bouton ?

Windows Presentation Foundation

Discussions similaires

Partager

Partager