×
Namespaces

Variants
Actions
Revision as of 04:44, 6 December 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Como criar um carrossel de imagem no Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

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

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata

Exemplo de código
Testado com
SDK: Windows Phone 8.0 SDK

Compatibilidade
Plataforma(s):
Windows Phone 8

Artigo
Tradução:
Por saramgsilva
Última alteração feita por hamishwillee em 06 Dec 2013

Contents

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.

Implementação

Note.pngNote: Nós não iremos usar gestos para esta solução! O utilizador irá navegar através das imagens usando botões de navegação Se quiser ajustar isso com gestos, dê uma vista de olhos no seguinte artigo, como imitar o facebook - painel de definições

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 do StackPanel.

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

The media player is loading...

Código Fonte

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

This page was last modified on 6 December 2013, at 04:44.
116 page views in the last 30 days.
×