Architecting ... a slideshow

Question

Je sais que cela semble ridicule et que je pourrais utiliser une solution prête à l'emploi, mais je veux vraiment créer mon propre diaporama d'images. Je fais du développement d'applications dans Silverlight/WPF depuis un certain temps, mais pour une raison quelconque, je ne peux pas m'en sortir.

• J'ai une collection observable de SlideshowItem
• Chaque SlideshowItem a Source qui indique où l'image car il est situé
• je montre une boîte translucide pour chaque SlideshowItem (liste horizontale à l'aide d'un StackPanel) et lorsque vous cliquez sur, vous devez passer à cette diapositive

Donc, voici mon problème: Si j'ai cette liste avec un modèle de stackpanel, et sous la liste est une image prenant la taille de la boîte vas, je peux lier le contexte de l'image au SlideshowItem sélectionné. C'est très bien. Mais quand je clique sur/modifie l'index sélectionné de la liste, je veux faire un fondu enchaîné ou glisser entre deux images.

Comment dois-je représenter cela dans Silverlight? Devrais-je avoir un panneau de défilement ou quelque chose avec toutes les images et ensuite changer entre eux? Ou est-ce suffisant d'utiliser un seul contrôle d'image? Puis-je le faire avec des états, ou dois-je explicitement exécuter un storyboard? Tous les échantillons seraient appréciés.

Answer 1

Vous n'avez certainement pas besoin de toute la collection d'images affichée dans un scrollviewer/stackpanel. Vous pouvez l'implémenter de différentes manières. Je peux expliquer une idée simple de utilisant une image: Comme vous l'avez dit, définir un SelectedSlide propriété dans votre ViewModel et lier cela à un contrôle d'image (De préférence un ContentControl avec l'image comme partie du ContentTemplate, donc que vous pouvez avoir des descriptions et d'autres éléments dans le même). Cette solution peut vous donner l'opportunité d'ajouter des storyboards afin que si vous augmentez votre SelectedIndex (une autre propriété VM) déclenchez un storyboard pour faire une animation 'Left Move' et si vous diminuez une animation 'Right Move' viennent d'un côté et vont dans l'autre sens. Vous pouvez faire du très bon UX sur cet ensemble de storyboards.

Mise à jour (Idée 2): Oui si nous avons besoin de la notion de la précédente quittant la vue quand une nouvelle arrive, nous pouvons l'architecturer en utilisant deux ContentControls enveloppés dans un CustomControl (appelons-le SlideShowControl). SlideShowControl aura son mécanisme pour définir correctement DataContext des deux ContentControl en fonction de la position selectedIndex. J'ai réussi à faire ce contrôle dans un de mes projets, la logique ici est de passer les ContentControls à travers un storyboard afin que nous puissions avoir de nombreux effets différents en échangeant le storyboard. Supposons que vous passiez de l'index 1 à 2, ContentControlA s'anime à gauche, et B arrive dans la vue, et en fonction de votre prochain clic, ControlA ira s'asseoir à gauche ou à droite de la vue et sera livré avec le nouveau DataContext de la vue sélectionnée Vue.

Answer 2

Vous pouvez utiliser le TransitioningContentControl de Silverlight Toolkit, cependant, si vous souhaitez utiliser le vôtre, vous aurez besoin de deux contrôles de contenu et d'échanger le contrôle "Active" sur les événements SelectionChanged. Vous pouvez également déclencher vos storyboards ici.

ContentControl _active; 
private void LB_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 

    if (_active == Content1) 
    { 
     _active = Content2; 
     Content2Active.Begin(); 
    } else 
    { 
     _active = Content1; 
     Content1Active.Begin(); 
    } 

    _active.Content = LB.SelectedItem; 
} 

Et le Xaml ressemble à ceci.Je viens d'utiliser des chaînes et du texte, mais cette approche devrait bien raisonnable pour des images aussi:

<Grid x:Name="LayoutRoot" Background="White" MaxHeight="200"> 
    <Grid.Resources> 
     <Storyboard x:Name="Content1Active"> 
      <DoubleAnimation From="0" To="1" Storyboard.TargetName="Content1" Storyboard.TargetProperty="(UIElement.Opacity)" /> 
      <DoubleAnimation To="0" Storyboard.TargetName="Content2" Storyboard.TargetProperty="(UIElement.Opacity)" /> 
     </Storyboard> 
     <Storyboard x:Name="Content2Active"> 
      <DoubleAnimation From="0" To="1" Storyboard.TargetName="Content2" Storyboard.TargetProperty="(UIElement.Opacity)" /> 
      <DoubleAnimation To="0" Storyboard.TargetName="Content1" Storyboard.TargetProperty="(UIElement.Opacity)" /> 
     </Storyboard> 
    </Grid.Resources> 

    <StackPanel> 
     <ListBox x:Name="LB" SelectionChanged="LB_SelectionChanged" xmlns:sys="clr-namespace:System;assembly=mscorlib"> 
      <sys:String>Red</sys:String> 
      <sys:String>Green</sys:String> 
      <sys:String>Blue</sys:String> 
     </ListBox> 
     <Grid> 
      <ContentControl x:Name="Content1" FontSize="40" Foreground="{Binding Content, RelativeSource={RelativeSource Self}}"> 
      </ContentControl> 
      <ContentControl x:Name="Content2" FontSize="40" Foreground="{Binding Content, RelativeSource={RelativeSource Self}}"> 
      </ContentControl> 
     </Grid> 
    </StackPanel> 
</Grid>