Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Benjamin Roux

Silverlight Expert - Silverlight Fan - MVP Client App Dev

Actualités

  • Mon statut Live Messenger :





    View Benjamin Roux's profile on LinkedIn

    Benjamin Roux's Facebook Profile


    MVP Blog Badge.
[Silverlight] Un contrôle type sablier

silverlight Bonjour à tous,

Aujourd’hui je vais vous présenter un contrôle assez pratique, puisqu’il s’agit d’un contrôle type sablier sous Windows Vista. Ce contrôle permet de signifier à l’utilisateur qu’une action est en train de se passer.

 loading

Le code pour réaliser ce contrôle est assez simple. Une ellipse à laquelle on anime le GradientBrush de son Stroke.

<UserControl x:Class="Sky.Controls.Loading"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <UserControl.Resources>
        <Storyboard x:Name="Animation" RepeatBehavior="Forever">
            <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)">
                <SplinePointKeyFrame KeyTime="00:00:00.2500000" Value="0.846,0.139"/>
                <SplinePointKeyFrame KeyTime="00:00:00.5000000" Value="1,0.491"/>
                <SplinePointKeyFrame KeyTime="00:00:00.7500000" Value="0.869,0.838"/>
                <SplinePointKeyFrame KeyTime="00:00:01" Value="0.494,1"/>
                <SplinePointKeyFrame KeyTime="00:00:01.2500000" Value="0.167,0.873"/>
                <SplinePointKeyFrame KeyTime="00:00:01.5000000" Value="0,0.494"/>
                <SplinePointKeyFrame KeyTime="00:00:01.7500000" Value="0.146,0.146"/>
                <SplinePointKeyFrame KeyTime="00:00:02" Value="0.494,-0.001"/>
            </PointAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)">
                <SplinePointKeyFrame KeyTime="00:00:00.2500000" Value="0.154,0.861"/>
                <SplinePointKeyFrame KeyTime="00:00:00.5000000" Value="0,0.509"/>
                <SplinePointKeyFrame KeyTime="00:00:00.7500000" Value="0.131,0.162"/>
                <SplinePointKeyFrame KeyTime="00:00:01" Value="0.506,0"/>
                <SplinePointKeyFrame KeyTime="00:00:01.2500000" Value="0.833,0.127"/>
                <SplinePointKeyFrame KeyTime="00:00:01.5000000" Value="1,0.506"/>
                <SplinePointKeyFrame KeyTime="00:00:01.7500000" Value="0.854,0.854"/>
                <SplinePointKeyFrame KeyTime="00:00:02" Value="0.506,1.001"/>
            </PointAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Ellipse Width="25" Height="25" StrokeThickness="5.5" x:Name="ellipse">
            <Ellipse.Stroke>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF096475" Offset="0.571"/>
                    <GradientStop Color="#FFA8FCFC" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Stroke>
        </Ellipse>
    </Grid>
</UserControl>

Finalement une pointe de C#, pour lancer et arrêter l’animation.

public void Start()
{
    this.Animation.Begin();
}
 
public void Stop()
{
    this.Animation.Stop();
}

Le résultat est assez agréable à voir. Libre à vous de changer les couleurs.

Have fun !

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: lundi 11 mai 2009 00:26 par broux
Classé sous : , ,

Commentaires

simon ferquel a dit :

Niveau perf, animer un RotateTransform aurait peut-être été plus judicieux, mais c'est joli :)

# mai 11, 2009 10:41

broux a dit :

Hum pas faux. En fait au début j'étais parti sur un "rotator" style Firefox (8 petites ellipses où la couleur change), puis je me suis ravisé sur un truc à la Vista sans changer ma méthode.

# mai 11, 2009 11:00
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01