Windows Phone 7 - Tutoriel 27 : Carrousel d'images

Carrousel d'images en utilisant Silverlight sur Windows Phone 7

| Peter Bull | Deepin Prayag (Traduction) |

Traducteur

Deepin

Ce tutoriel fait partie d'une série de niveau débutant-intermédiaire pour apprendre Windows Phone 7 par le biais d'exemples pas à pas.

Langage : C#

Public visé : niveau Débutant

Commentez ce tutoriel : Commentez

- Titre : Windows Phone 7 - Tutoriel 27 : Carrousel d'images

- Auteurs : Peter Bull, Deepin Prayag (Traduction)

- Traducteur : Deepin

- Parution : 23 mars 2012

- Mise à jour : 24 avril 2012

- Licence : Copyright ® 2012 Peter Bull. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Introduction

- Carrousel d'images en utilisant Silverlight sur Windows Phone 7

- Étape 1

- Étape 2

- Étape 3

- Étape 4

- Étape 5

- Étape 6

- Étape 7

- Étape 8

- Étape 9

- Étape 10

- Étape 11

- Étape 12

- Étape 13

- Étape 14

- Étape 15

- Étape 16

- Étape 17

- Étape 18

- Étape 19

- Étape 20

- Étape 21

- Étape 22

- Étape 23

- Étape 24

- Étape 25

- Étape 26

- Étape 27

- Étape 28

- Étape 29

- Conclusion

- Liens

- Remerciements

Traduction

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.

Introduction

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

Étape 1

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 :

Étape 2

Une page Application Windows Phone nommée MainPage.xaml devrait alors apparaître :

Étape 3

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) :

Étape 4

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 :

add.png

remove.png

clear.png

Étape 5

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 :

Étape 6

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 » :

Étape 7

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 :

Étape 8

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" ...> :

Étape 9

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">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="ItemScale"/>
</TransformGroup>
</Image.RenderTransform>
</Image>

XAML :

Design :

Étape 10

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;

Étape 11

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 :

Étape 12

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 ...> :

Étape 13

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"/>
</Canvas>

XAML :

Design :

Étape 14

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 :

using System.Windows.Media.Imaging;

É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 _position;
private Point _radius = new Point { X = -25, Y = 200 };
private double _speed = 0.0125;
private double _perspective = 75;
private double _distance;

Étape 15

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)
{
canvas.Children.Clear();
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;
_items.Add(item);
canvas.Children.Add(item);
}
}

private void Rotate(object sender, EventArgs e)
{
foreach (CarouselItem item in _items)
{
item.Angle -= _speed;
_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);
if (_radius.X >= 0)
{
_distance = 1 * (1 - (_position.X / _perspective));
Canvas.SetZIndex(item, -(int)(_position.X));
}
else
{
_distance = 1 / (1 - (_position.X / _perspective));
Canvas.SetZIndex(item, (int)(_position.X));
}
item.Opacity = item.ItemScale.ScaleX =
item.ItemScale.ScaleY = _distance;
}
_rotate.Begin();
}

public void Add(Uri uri)
{
BitmapImage _image = new BitmapImage(uri);
_images.Add(_image);
Populate(ref Display);
}

public void RemoveLast()
{
if (_images.Count > 0)
{
_images.RemoveAt(_images.Count - 1);
Populate(ref Display);
}
}

public void Clear()
{
_images.Clear();
Populate(ref Display);
}

Étape 16

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;
_rotate.Begin();

Étape 17

Sélectionnez Build Solution depuis le menu Debug :

Étape 18

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 :

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="False">
<shell:ApplicationBar.Buttons>
<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"/>
</shell:ApplicationBar.Buttons>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Étape 19

Toujours dans le volet XAML, entre les lignes

<Grid x:Name="ContentGrid" Grid.Row="1">

et

</Grid>

tapez le code XAML suivant :

<Grid x:Name="ContentMain">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Toolbar -->
<!-- Content -->
</Grid>

XAML :

Design :

Étape 20

Puis dans la section Contrôles Windows Phone de la Boîte à outils, sélectionnez le contrôle TextBox :

Étape 21

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">
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="Url"/>
</InputScope>
</TextBox.InputScope>
</TextBox>

Voir ci-dessous :

Étape 22

Puis dans la section Contrôles ImageCarousel de la Boîte à outils,sélectionnez le contrôle Carousel :

Étape 23

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"/>

XAML :

Design :

É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 :

private void Add_Click(object sender, EventArgs e)
{
Images.Add(new Uri(Location.Text));
}

private void Remove_Click(object sender, EventArgs e)
{
Images.RemoveLast();
}

private void Clear_Click(object sender, EventArgs e)
{
Images.Clear();
}

Étape 27

Enregistrez le Projet maintenant que vous avez terminé l'application Windows Phone Silverlight. Sélectionnez l'option Windows Phone Emulator ensuite sélectionnez Debug puis Démarrer le débogage ou cliquez sur Démarrer le débogage :

Dès que vous l'aurez fait, ce qui suit apparaîtra dans l'émulateur Windows Phone une fois chargé :

É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

Vous pouvez ensuite Arrêter l'application en sélectionnant la fenêtre d'application Visual Studio 2010 et en cliquant sur le bouton Arrêter le débogage :

Conclusion

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 !

Liens

Télécharger le code source du tutoriel.

Remerciements

Je tiens ici à remercier Peter Bull de m'avoir autorisé à traduire son tutoriel.
Je remercie tomlev pour sa relecture technique et ses propositions.
Je remercie également ClaudeLELOUP pour sa relecture orthographique et ses propositions.