[Windows 8] C# / XAML : FlipView, Context Indicator et Prévisualisation

4. December 2012 16:12 by Renaud in Windows 8  //  Tags: , ,   //   Comments (2)

Dans cet article on va voir comment reproduire le Context Indicator que l'on peut voir dans le Store. Cet indicateur, c'est ce que vous pouvez voir en dessous du flipview montrant les différents screenshots de l'application, et qui vous donne une idée de l'endroit où vous vous trouvez dans la liste.

Indicateur dans le store

Reproduire l'indicateur du store

Pour y arriver, on va modifier légèrement le template du FlipView. Pour ça, il suffit d'utiliser Blend et de modifier une copie du template existant.

On va ensuite  y ajouter une ListView :

Une fois qu'on a cette ListView, on va faire plusieurs choses :

  • Binder la propriété ItemsSource avec le FlipView pour avoir le même nombre d'éléments dans chaque liste
ItemsSource="{TemplateBinding ItemsSource}"
  • Binder la propriété SelectedItem avec le FlipView  pour les synchroniser
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
  • Modifier l'orientation de la liste en activant le scroll horizontal et en changeant l'orientation du StackPanel qui va contenir les items.
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"

Le panel :

    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel  Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
  • Et pour finir, on va sauvagement modifier le style des items et des items containers. On va vraiment faire un gros nettoyage pour éviter d'avoir l'habituelle bordure mauve lorsqu'un élément est sélectionné. On va garder le strict minium et faire en sorte d'avoir un rectangle gris par défaut, et blanc lorsque l'élément est sélectionné. Je vous épargne le code, mais vous pouvez le trouver dans le projet téléchargeable à la fin de l'article :)

Et voilà le résultat :

Aller plus loin et créer une barre de preview !

L'idée est d'utiliser cet indicateur pour donner plus d'infos à l'utilisateur, et lui permettre de l'utiliser même pour naviguer dans le flipview ! Pour vous donner une idée du résultat :)

Pour faire ça, on va principalement modifier le ItemTemplate de la ListView :

<ListView.ItemTemplate>
    <DataTemplate>
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image Source="{Binding ImageUri}" Stretch="UniformToFill"/>
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

Si l'on s'arrête là, lorsque l'on se déplace à partir du FlipView, on modifie bien l'item sélectionné dans la ListView. Mais si l'on se déplace trop loin, il se peut que cet item se retrouve en dehors du champs de vision ! Pour éviter ça, on va écouter l'événement SelectionChanged de la ListView, et faire en sorte que l'item sélectionné soit toujours visible.

private void ListViewSelectionChanged1(object sender, Windows.UI.Xaml.Controls.SelectionChangedEventArgs e)
{
    // Si un nouvel item est bien sélectionné
    if (e.AddedItems.Count > 0){
        // On scroll vers cet item !
        ((ListView)sender).ScrollIntoView(e.AddedItems.First());    }
}

Et voilà :) Les sources des deux projets sont téléchargeables sur mon Skydrive : http://sdrv.ms/SJv8PX

 

Comments (2) -

Apollo13
Apollo13
3/19/2013 12:03:27 PM #

Nice Example. Can you tell me if this method also works if i add my images statically to the FlipView?

e.g:

                    
                        
                    
                    
                        
                    

Apollo13
Apollo13
3/19/2013 12:03:42 PM #

Ok, there is some code missing.  now :/ How can I add code in the comments?

Add comment

  Country flag

biuquote
Loading

TextBox

About the author

I'm a developer, blog writer, and author, mainly focused on Microsoft technologies (but not only Smile). I'm Microsoft MVP Client Development since July 2013.

Microsoft Certified Professional

I'm currently working as an IT Evangelist with an awesome team at the Microsoft Innovation Center Belgique, where I spend time and energy helping people to develop their projects. I also give training to enthusiastic developers and organize afterworks with the help of the Belgian community.

MIC Belgique

Take a look at my first book (french only): Développez en HTML 5 pour Windows 8

Développez en HTML5 pour Windows 8

Membre de l'association Fier d'être développeur

TextBox

Month List