Windows Phone 7 - Tutoriel 27 : Carrousel d'images
Carrousel d'images en utilisant Silverlight sur Windows Phone 7
Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Windows Phone 7 - Image Carousel using Silverlight on Windows Phone 7.
Image Carousel est un carrousel en Silverlight pour Windows Phone 7 qui permet d'afficher des images en tournant. Dans le cas présent, il s'agit d'un carrousel vertical.
Carrousel d'images en utilisant Silverlight sur Windows Phone 7▲
Démarrez Microsoft Visual Web Developer 2010 Express pour Windows Phone, ensuite sélectionnez Fichier puis Nouveau Projet… Sélectionnez Visual C# ensuite Silverlight for Windows Phone puis Application Windows Phone dans les modèles installés, sélectionnez un emplacement si vous le souhaitez, puis entrez un nom pour le projet et appuyez sur OK :
Faites un clic droit sur le Projet dans l'Explorateur de solutions et choisissez Ajouter puis Nouveau dossier et nommez-le « images » (sans les guillemets) :
Téléchargez les images suivantes (add.png, remove.png et clear.png) en faisant un clic droit sur les images ci-dessous et en choisissant « Enregistrer l'image sous… ». Enregistrez-les dans un dossier sur votre ordinateur :
Faites un clic droit sur le dossier « images » du Projet dans l'Explorateur de solutions, et choisissez Ajouter puis Élément existant… Ensuite dans la fenêtre Ajouter un élément existant sélectionnez le dossier dans lequel vous avez enregistré les images, puis choisissez Ajouter pour ajouter add.png, remove.png et clear.png au dossier « images » dans le projet :
En étant toujours dans l'Explorateur de solutions, cliquez sur l'image « add.png » puis allez dans la boîte Propriétés et modifiez Action de génération à Contenu. Faites, ensuite, la même chose pour les images « clear.png » et « remove.png » :
Sélectionnez le projet ImageCarousel dans l'Explorateur de solutions. Ensuite dans le menu principal Projet sélectionnez Ajouter un nouvel élément… et sélectionnez le modèle Contrôle utilisateur Windows Phone, puis modifiez le Nom en CarouselItem.xaml :
Ajoutez le nouveau contrôle utilisateur au Projet en cliquant sur Ajouter, puis dans le volet XAML du contrôle utilisateur CarouselItem.xaml, enlevez d:DesignHeight="480" d:DesignWidth="480" de la balise <UserControl ...>. Enlevez également Background="{StaticResource PhoneChromeBrush}" de <Grid x:Name="LayoutRoot" ...> :
Puisque nous en sommes au volet XAML de CarouselItem.xaml, entre les lignes <Grid x:Name="LayoutRoot"> et </Grid>, tapez le code Control XAML suivant :
<Image Height="150" Width="150" Name="Image">
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="ItemScale"/>
Faites un clic droit sur la page ou sur l'entrée pour CarouselItem.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, au-dessus de public CarouselItem(), tapez la déclaration suivante :
public double Angle = 0;
Sélectionnez Projet depuis le menu principal puis Ajouter un nouvel élément… et sélectionnez le modèle Contrôle utilisateur Windows Phone, ensuite modifiez le Nom en Carousel.xaml :
Ajoutez le nouveau contrôle utilisateur au Projet en cliquant sur Ajouter, ensuite dans le volet XAML du contrôle utilisateur Carousel.xaml retirez Background="{StaticResource PhoneChromeBrush}" de la balise <Grid x:Name="LayoutRoot" ...> au sein de la balise <UserControl ...> :
Toujours dans le volet XAML de Carousel.xaml, entre les lignes <Grid x:Name="LayoutRoot"> et </Grid>, tapez le code XAML suivant :
<Canvas x:Name="Container" Width="480" Height="480">
<Canvas Height="150" Width="150" x:Name="Display"/>
Faites un clic droit sur la classe Carousel.xaml dans l'Explorateur de solutions et choisissez Afficher le code.
Dans la vue de code pour Carousel.xaml.cs, au-dessus de namespace ImageCarousel, tapez le code suivant :
Également dans la vue de code, en dessous du « { » de la ligne public partial class Carousel : UserControl, tapez les déclarations suivantes :
private Storyboard _rotate = new Storyboard();
private List<BitmapImage> _images = new List<BitmapImage>();
private List<CarouselItem> _items = new List<CarouselItem>();
private Point _radius = new Point { X = -25, Y = 200 };
private double _speed = 0.0125;
private double _perspective = 75;
En étant toujours dans la vue de code, en dessous de la déclaration _distance, tapez les méthodes suivantes :
private void Populate(ref Canvas canvas)
for (int index = 0; index < _images.Count(); index++)
CarouselItem item = new CarouselItem();
item.Image.Source = _images[index];
item.Angle = index * ((Math.PI * 2) / _images.Count);
_position.X = Math.Cos(item.Angle) * _radius.X;
_position.Y = Math.Sin(item.Angle) * _radius.Y;
Canvas.SetLeft(item, _position.X);
Canvas.SetTop(item, _position.Y);
_distance = 1 / (1 - (_position.X / _perspective));
item.Opacity = item.ItemScale.ScaleX =
item.ItemScale.ScaleY = _distance;
canvas.Children.Add(item);
private void Rotate(object sender, EventArgs e)
foreach (CarouselItem item in _items)
item.Angle -= _speed;
if (_radius.X >= 0)
_distance = 1 * (1 - (_position.X / _perspective));
Canvas.SetZIndex(item, -(int)(_position.X));
Canvas.SetZIndex(item, (int)(_position.X));
_rotate.Begin();
public void Add(Uri uri)
BitmapImage _image = new BitmapImage(uri);
_images.Add(_image);
Populate(ref Display);
if (_images.Count > 0)
_images.RemoveAt(_images.Count - 1);
Toujours dans la vue de code, dans le constructeur public Carousel() en dessous de InitializeComponent();, tapez ceci :
Canvas.SetLeft(Display, Container.Width / 2 - Display.Width / 2);
Canvas.SetTop(Display, Container.Height / 2 - Display.Height / 2);
_rotate.Completed += Rotate;
Sélectionnez Build Solution depuis le menu Debug :
Quand la compilation est terminée, retournez au concepteur de vues MainPage en sélectionnant l'onglet MainPage.xaml. Dans le volet XAML de MainPage.xaml, au-dessus de la ligne <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">, tapez le code ApplicationBar XAML suivant :
<shell:ApplicationBarIconButton Text="add" IconUri="/images/add.png" Click="Add_Click"/>
<shell:ApplicationBarIconButton Text="remove" IconUri="/images/remove.png" Click="Remove_Click"/>
<shell:ApplicationBarIconButton Text="clear" IconUri="/images/clear.png" Click="Clear_Click"/>
Toujours dans le volet XAML, entre les lignes <Grid x:Name="ContentGrid" Grid.Row="1"> et </Grid>, tapez le code XAML suivant :
Dessinez un TextBox sur la section barre d'outils (plus petite section supérieure) du Grid sur la page, en dessous du titre de la page, et dans le volet XAML en dessous de la ligne <!-- Toolbar -->, modifiez la ligne TextBox1 comme ceci :
<TextBox Grid.Row="0" Name="Location">
Puis dans la section Contrôles ImageCarousel de la Boîte à outils,sélectionnez le contrôle Carousel :
Dessinez un carrousel sur la page en glissant un Carousel de la Boite à outils sur la plus grande portion du Grid sur la page (Content), ensuite dans le volet XAML en dessous de la ligne <!-- Content -->, modifiez carousel1 comme ceci :
<my:Carousel Grid.Row="1" x:Name="Images"/>
Étape 24▲
En étant toujours dans le concepteur de vues pour MainPage.xaml, sélectionnez le TextBlock « nom de la page » (PageTitle), ensuite Supprimer ou faites un clic droit et choisissez l'option Supprimer pour que le MainPage.xaml apparaisse comme ci-dessous :
Étape 25▲
Faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, dans le constructeur public MainPage() en dessous de InitializeComponent();, tapez le code suivant :
ApplicationTitle.Text = "IMAGE CAROUSEL";
Location.Text = "http://cespage.com/phone.jpg";
Étape 26▲
Puisque nous en sommes à la vue de code pour MainPage.xaml.cs, au-dessus de public MainPage(), tapez les gestionnaires d'événements suivants :
Images.Add(new Uri(Location.Text));
Images.RemoveLast();
Étape 27▲
Étape 28▲
Appuyez sur le TextBox « Location » en utilisant le SIP pour saisir l'URL d'une image, ensuite appuyez sur le bouton « ajouter » pour l'ajouter au carrousel. Vous pouvez effectuer cela plusieurs fois afin d'ajouter davantage d'images au carrousel :
Étape 29▲
Il s'agit d'un simple carrousel pour afficher des images. Le carrousel pourrait être modifié afin d'afficher n'importe quel type de contenu, tel que des boutons ou d'autres contenus. Essayez de le modifier afin de le transformer en un carrousel horizontal - personnalisez-le !