Faire qu'une Storyline se répète mais pas depuis le début ? | Changer la taille d'un Canvas ?

**kedare** · 17/12/2009, 16h53

Hello,
J'ai fais une petite animation de spinner de Xbox360 proche de celle que l'on trouve sur le site de Microsoft, seulement je n'arrive pas a la faire se repeter correctement, voila le 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
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
<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
 
<Canvas x:Name="Spinner" Width="800" Height="800" Canvas.Left="122" Canvas.Top="-21" Loaded="Spinner_Loaded">
		<Path x:Name="LowerLeft" Width="371" Height="371" Canvas.Left="0.499973" Canvas.Top="431" Stretch="Fill" StrokeThickness="88" StrokeLineJoin="Round" Stroke="#FFAAAAAA" Data="F1 M 327.5,758C 247.06,758 174.459,724.439 122.935,670.556C 74.3455,619.743 44.5,550.857 44.5,475"/>
		<Path x:Name="UpperLeft" Width="371" Height="371" Canvas.Left="1.49998" Canvas.Top="0.500427" Stretch="Fill" StrokeThickness="88" StrokeLineJoin="Round" Stroke="#FFAAAAAA" Data="F1 M 45.5,327.5C 45.5,247.061 79.0606,174.46 132.944,122.935C 183.757,74.3459 252.643,44.5004 328.5,44.5004"/>
		<Path x:Name="LowerRight" Width="371" Height="371" Canvas.Left="430.501" Canvas.Top="430.5" Stretch="Fill" StrokeThickness="88" StrokeLineJoin="Round" Stroke="#FFAAAAAA" Data="F1 M 757.501,474.5C 757.501,554.94 723.94,627.541 670.057,679.065C 619.244,727.654 550.358,757.5 474.501,757.5"/>
		<Path x:Name="UpperRight" Width="371" Height="371" Canvas.Left="429.5" Canvas.Top="1.50043" Stretch="Fill" StrokeThickness="88" StrokeLineJoin="Round" Stroke="#FFAAAAAA" Data="F1 M 473.5,45.5004C 553.94,45.5004 626.541,79.061 678.065,132.944C 726.655,183.757 756.5,252.643 756.5,328.5"/>
        <Canvas.Resources>
            <Storyboard x:Name="InitStoryBoard" Completed="InitStoryBoard_Completed">
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LowerLeft" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
                    <SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.8000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:01.3000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:01.7500000" Value="#FFFFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:02" Value="#FFAAAAAA"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="UpperLeft" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
                    <SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.8000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:01.3000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:01.5000000" Value="#FFFFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:01.7500000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:02.2500000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:02.5000000" Value="#FFFFFFFF"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="UpperRight" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
                    <SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.8000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:01.3000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:02" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:02.2500000" Value="#FFFFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:02.5000000" Value="#FFAAAAAA"/>
                </ColorAnimationUsingKeyFrames>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="LowerRight" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
                    <SplineColorKeyFrame KeyTime="00:00:00.4000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FFFFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:00.8000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:01.3000000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:01.7500000" Value="#FFAAAAAA"/>
                    <SplineColorKeyFrame KeyTime="00:00:02" Value="#FFFFFFFF"/>
                    <SplineColorKeyFrame KeyTime="00:00:02.2500000" Value="#FFAAAAAA"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
        </Canvas.Resources>
    </Canvas>   
</UserControl>

Et le .cs

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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void Spinner_Loaded(object sender, RoutedEventArgs e)
        {
            InitStoryBoard.SpeedRatio = 0.5;
            InitStoryBoard.BeginTime = new TimeSpan(0, 0, 0, 1, 500);
            InitStoryBoard.RepeatBehavior = RepeatBehavior.Forever;
            InitStoryBoard.Begin();
        }
 
        private void InitStoryBoard_Completed(object sender, EventArgs e)
        {
 
        }
    }
}

En gros je voudrais qu'il se répète non pas en débutant au début, mais en débutant a 1 seconde et 500ms, savez vous comment je peux faire ça ? Je ne vois pas d'ou peux venir le probleme dans mon code, la j'ai l'animation qui reprend tout depuis le début

Que faire ?
Autre chose, j'ai l'impression que mon Canvas n'est pas vectoriel, impossible de le rendre plus petit, c'est normal ? Comment faire ?
Merci !

**Samuel Blanchard** · 09/02/2010, 18h28

kedare,

Pour ton animation je te conseille ceci :

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
 
	private void ReloadStoryboard()
	{
            InitStoryBoard.SpeedRatio = 0.5;
            InitStoryBoard.BeginTime = new TimeSpan(0, 0, 0, 1, 500);
            InitStoryBoard.Begin();
	}
 
        private void Spinner_Loaded(object sender, RoutedEventArgs e)
        {
	    this.ReloadStoryboard();
        }
 
        private void InitStoryBoard_Completed(object sender, EventArgs e)
        {
	    this.ReloadStoryboard();
        }

Ton canvas est bien vectoriel mais comme tu as fixé une taille sur celui-ci c'est peut être pour cela qu'il ne se rétrécit pas ?

Bon courage !

**Skyounet** · 09/02/2010, 18h59

Pour la taille de ton canvas ajoute lui juste un ScaleTransform

Code :

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

1
2
3
4
 
<Canvas.RenderTransform>
    <ScaleTransform CenterX="400" CenterY="400" ScaleX="0.1" ScaleY="0.1" />
</Canvas.RenderTransform>

Faire qu'une Storyline se répète mais pas depuis le début ? | Changer la taille d'un Canvas ?

Silverlight

Discussions similaires

Partager

Partager