Este artigo explica como criar um carrossel de imagem rápida para Windows Phone

Introdução

Muitas vezes, há mais imagens a serem exibidos em uma única página que acompanha o texto. Então, como iria mostrar todas as imagens para ao utilizador, mas ainda tem espaço suficiente para exibir o corpo do texto?

Em muitas páginas, um item chamado de um carrossel de imagem é usada.

Vamos mostrar-lhe como pode imitar este, apenas, com os controles básicos do Windows Phone que estão disponíveis no SDK.

• 

  Carrossel inicio

   
• 

  Carrossel meio

• 

  Carrossel final

Implementação

Crie a página inicial

Crie uma aplicação Windows Phone, e mude o nome de MainPage.xaml para CarouselPoor.xaml e altere o ContentPanel como de seguida:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
 
            <ScrollViewer x:Name="ImageCarousel"
 Grid.Row="0"
 ManipulationMode="Control"
 IsHitTestVisible="False"
 HorizontalScrollBarVisibility="Hidden"
 VerticalScrollBarVisibility="Disabled"
 >
                <StackPanel x:Name="ImageList" Orientation="Horizontal" />
            </ScrollViewer>
            <controls:Indicator x:Name="Indicator"
 Grid.Row="1"
 VerticalAlignment="Top"
 HorizontalAlignment="Right"
 ItemsCount="5"
 Margin="0,6,12,0"
 />
 
            <Button Content="&lt;" x:Name="ButtonLeft"
 Grid.Row="0"
 FontSize="30"
 FontWeight="Bold" Background="LightGray" Foreground="DarkSlateGray"
 BorderThickness="0" Margin="0" Padding="0" Height="70" Width="70"
 HorizontalAlignment="Left" VerticalContentAlignment="Top"
 Opacity="0.75" Click="ButtonLeft_Click" 
 />
 
            <Button Content="&gt;" x:Name="ButtonRight" 
 Grid.Row="0"
 FontSize="30"
 FontWeight="Bold" Background="LightGray" Foreground="DarkSlateGray"
 BorderThickness="0" Margin="0" Padding="0" Height="70" Width="70"
 HorizontalAlignment="Right" VerticalContentAlignment="Top"
 Opacity="0.75" Click="ButtonRight_Click" 
 />
 
            <RichTextBox Grid.Row="2" VerticalAlignment="Top" Margin="12,6,12,0">
                <Paragraph>
                    <Run FontSize="28">
                        What is Cats in Sinks?
                    </Run>
                    <LineBreak />
                    <LineBreak />
                    <Run>
                        It's obvious. It's about cats. And kittens. Who like sinks. And basins.
                    </Run>
                </Paragraph>
            </RichTextBox>
        </Grid>

A página contém um ScrollViewer que irá ser o nosso carousel! Irá fazer apenas scroll horizontal e irá conter um StackPanel que será o "container" das imagens.

Existem dois botões definidos, estes irão ser usados na navegação.

Também irá notar que esta página contém um controle chamado "Indicator", que nos permite dar uma indicação ao utilizador sobre quantas imagens existem no carrossel e qual a que está ativa.

O código deste controlo está disponível no projecto, e não será explicadno em detalhe no artigo. Apenas teremos em mente que existe uma propriedade ItemsCount que precisa ser igual à quantidade de imagens mostradas no "carrossel".

É preciso alterar o SelectedPivotIndex para indicar qual imagem está actualmente activa, de modo que o quadrado correspondente é destacado na tela.

Carregar e navegar as imagens

Agora que o layout da página foi definido, precisamos preencher o carrossel com imagens reais. Tudo isso é feito no código por trás da página, mas é claro que em umas aplicações do mundo real, isso pode ser feito através de MVVM.

No construtor da página iremos chamar dois métodos, InitImages e LoadImages, a primeira vai definir as imagens que iremosi usar e o segundo método irá carregá-los dentro doStackPanel.

private void InitImages()
{
    _images.Add(new Image() { Source = new BitmapImage(new Uri(@"/Images/sink1.jpg", UriKind.Relative)), Width = 480 });
    _images.Add(new Image() { Source = new BitmapImage(new Uri(@"/Images/sink2.jpg", UriKind.Relative)), Width = 480 });
    _images.Add(new Image() { Source = new BitmapImage(new Uri(@"/Images/sink3.jpg", UriKind.Relative)), Width = 480 });
    _images.Add(new Image() { Source = new BitmapImage(new Uri(@"/Images/sink4.jpg", UriKind.Relative)), Width = 480 });
    _images.Add(new Image() { Source = new BitmapImage(new Uri(@"/Images/sink5.jpg", UriKind.Relative)), Width = 480 });
}
 
private void LoadImages()
{
    _images.ForEach(item => this.ImageList.Children.Add(item));
}

Mas ai vem a parte mais dificil, o que nós pretendemos fazer é alterar o HorizontalOffset da ScrollViewer para navegar através do carrossel, mas isto não pode ser feito diretamente num StoryBoard! Daí termos que fazer um "workarround"....

Podemos, no entanto, ajustar uma propriedade na página a partir de um "StoryBoard" e que a única coisa que vai fazer, é passar isso através da HorizontalOffset da ScrollViewer.

Esta propriedade na página será uma DependencyProperty.

private DependencyProperty _horizontalOffsetProperty = DependencyProperty.Register("HorizontalOffset", typeof(double), typeof(CarouselPoor), new PropertyMetadata(0.0, OnHorizontalOffsetChanged));
 
private static void OnHorizontalOffsetChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    CarouselPoor app = d as CarouselPoor;
    app.OnHorizontalOffsetChanged(e);
}
 
private void OnHorizontalOffsetChanged(DependencyPropertyChangedEventArgs e)
{
    this.ValidateNavigation();
    this.ImageCarousel.ScrollToHorizontalOffset((double)e.NewValue);
}
 
public CarouselPoor()
{
    InitializeComponent();
 
    this.InitImages();
    this.LoadImages();
    this.ValidateNavigation();
 
    _scrollAnimation = new DoubleAnimation()
    {
        EasingFunction = new SineEase(),
        Duration = TimeSpan.FromSeconds(0.5)
    };
 
    Storyboard.SetTarget(_scrollAnimation, this);
    Storyboard.SetTargetProperty(_scrollAnimation, new PropertyPath(_horizontalOffsetProperty));
 
    _scrollViewerStoryboard = new Storyboard();
    _scrollViewerStoryboard.Children.Add(_scrollAnimation);
}

Assim, no código acima, podemos ver que nós estamos a criar uma animação e estão a manipular a HorizontalOffset, quando isso ocorre, passamos o valor por meio de nosso próprio método em que vamos definir o HorizontalOffset da ScrollViewer

A única coisa que resta a fazer, é realmente desencadear esta animação / storyboard quando o utilizador pressiona um dos botões de navegação! Note que precisamos para definir os valores corretos para pontos inicial e final da animação para deixá-lo navegar na direção certa.

private void ButtonLeft_Click(object sender, RoutedEventArgs e)
{
    var startPosition = this.ImageCarousel.HorizontalOffset;
    if (startPosition > 0)
    {
        _scrollAnimation.From = startPosition;
        _scrollAnimation.To = startPosition - 480;
        --this.Indicator.SelectedPivotIndex;
        _scrollViewerStoryboard.Begin();
    }
}
 
private void ButtonRight_Click(object sender, RoutedEventArgs e)
{
    var startPosition = this.ImageCarousel.HorizontalOffset;            
    _scrollAnimation.From = 0 + startPosition;
    _scrollAnimation.To = 480 + startPosition;
    ++this.Indicator.SelectedPivotIndex;
    _scrollViewerStoryboard.Begin();
}

Com tudo isso feito corretamente, devemos ter um carrossel que mostra uma animação agradável enquanto o utilizador percorre as imagens.

Video de exemplo

Código Fonte

O código fonte pode ser obtido aqui: File:ImageCarousel.zip

Credits:
Originally was contributed on 5 December 2013‎ by saramgsilva