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 :

Image non disponible

Étape 2

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

Image non disponible

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

Image non disponible

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

Image non disponible

add.png

Image non disponible

remove.png

Image non disponible

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 :

Image non disponible

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

Image non disponible

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

Image non disponible

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

Image non disponible

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

 
Sélectionnez
<Image Height="150" Width="150" Name="Image">
  <Image.RenderTransform>
    <TransformGroup>
      <ScaleTransform ScaleX="1" ScaleY="1" x:Name="ItemScale"/>
    </TransformGroup>
  </Image.RenderTransform>
</Image>

XAML :

Image non disponible

Design :

Image non disponible

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

 
Sélectionnez
public double Angle = 0;
Image non disponible

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

Image non disponible

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

Image non disponible

Étape 13

Toujours dans le volet XAML de Carousel.xaml, entre les lignes <Grid x:Name="LayoutRoot"> et </Grid> , tapez le code XAML suivant :

 
Sélectionnez
<Canvas x:Name="Container" Width="480" Height="480">
  <Canvas Height="150" Width="150" x:Name="Display"/>
</Canvas>

XAML :

Image non disponible

Design :

Image non disponible

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

 
Sélectionnez
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 :

 
Sélectionnez
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;
Image non disponible

Étape 15

En étant toujours dans la vue de code, en dessous de la déclaration _distance, tapez les méthodes suivantes :

 
Sélectionnez
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);
}
Image non disponible
Image non disponible

Étape 16

Toujours dans la vue de code, dans le constructeur public Carousel() en dessous de InitializeComponent();, tapez ceci :

 
Sélectionnez
Canvas.SetLeft(Display, Container.Width / 2 - Display.Width / 2);
Canvas.SetTop(Display, Container.Height / 2 - Display.Height / 2);
_rotate.Completed += Rotate;
_rotate.Begin();
Image non disponible

Étape 17

Sélectionnez Build Solution depuis le menu Debug :

Image non disponible

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

 
Sélectionnez
<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>
Image non disponible

Étape 19

Toujours dans le volet XAML, entre les lignes <Grid x:Name="ContentGrid" Grid.Row="1"> et </Grid> , tapez le code XAML suivant :

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

XAML :

Image non disponible

Design :

Image non disponible

Étape 20

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

Image non disponible

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

 
Sélectionnez
<TextBox Grid.Row="0" Name="Location">
  <TextBox.InputScope>
    <InputScope>
      <InputScopeName NameValue="Url"/>
    </InputScope>
  </TextBox.InputScope>
</TextBox> 

Voir ci-dessous :

Image non disponible

Étape 22

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

Image non disponible

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

 
Sélectionnez
<my:Carousel Grid.Row="1" x:Name="Images"/>

XAML :

Image non disponible


Design :

Image non disponible

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

Image non disponible

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

 
Sélectionnez
ApplicationTitle.Text = "IMAGE CAROUSEL";
Location.Text = "http://cespage.com/phone.jpg";
Image non disponible

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

 
Sélectionnez
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();
}
Image non disponible

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

Image non disponible

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

Image non disponible

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

Image non disponible

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

Image non disponible

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

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.