Windows Phone 7 - Tutoriel 27 : Carrousel d'images

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 :

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

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 :

add.png

remove.png

clear.png

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

XAML :

Design :

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

XAML :

Design :

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;

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);
}

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();

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 :

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

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 :

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

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 :

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

XAML :

Design :

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 :

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

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();
}

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

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 :

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 :