Habilitando o ScrollViewer HorizontalSnapPoints com coleção vinculável
Eu estou tentando criar uma experiência semelhante como no ScrollViewerSample dos exemplos de SDK do Windows 8 para ser capaz de encaixar os itens dentro de um ScrollViewer ao rolar para a esquerda e para a direita. A implementação da amostra (que funciona) é assim:
<code><ScrollViewer x:Name="scrollViewer" Width="480" Height="270" HorizontalAlignment="Left" VerticalAlignment="Top" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" ZoomMode="Disabled" HorizontalSnapPointsType="Mandatory"> <StackPanel Orientation="Horizontal"> <Image Width="480" Height="270" AutomationProperties.Name="Image of a cliff" Source="images/cliff.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Image Width="480" Height="270" AutomationProperties.Name="Image of Grapes" Source="images/grapes.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Image Width="480" Height="270" AutomationProperties.Name="Image of Mount Rainier" Source="images/Rainier.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Image Width="480" Height="270" AutomationProperties.Name="Image of a sunset" Source="images/sunset.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Image Width="480" Height="270" AutomationProperties.Name="Image of a valley" Source="images/valley.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> </StackPanel> </ScrollViewer> </code>
A única diferença com a minha implementação desejada é que eu não quero um StackPanel com itens dentro, mas algo que eu possa ligar. Eu estou tentando fazer isso com um ItemsControl, mas por algum motivo o comportamento Snap não entra em ação:
<code><ScrollViewer x:Name="scrollViewer" Width="480" Height="270" HorizontalAlignment="Left" VerticalAlignment="Top" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto" ZoomMode="Disabled" HorizontalSnapPointsType="Mandatory"> <ItemsControl> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <Image Width="480" Height="270" AutomationProperties.Name="Image of a cliff" Source="images/cliff.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Image Width="480" Height="270" AutomationProperties.Name="Image of Grapes" Source="images/grapes.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Image Width="480" Height="270" AutomationProperties.Name="Image of Mount Rainier" Source="images/Rainier.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Image Width="480" Height="270" AutomationProperties.Name="Image of a sunset" Source="images/sunset.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Image Width="480" Height="270" AutomationProperties.Name="Image of a valley" Source="images/valley.jpg" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top"/> </ItemsControl> </ScrollViewer> </code>
Sugestões seria muito apreciada!
Graças ao Denis, acabei usando o seguinte Style no ItemsControl e removi o ScrollViewer e o inline ItemsPanelTemplate por completo:
<code><Style x:Key="ItemsControlStyle" TargetType="ItemsControl"> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ItemsControl"> <ScrollViewer Style="{StaticResource HorizontalScrollViewerStyle}" HorizontalSnapPointsType="Mandatory"> <ItemsPresenter /> </ScrollViewer> </ControlTemplate> </Setter.Value> </Setter> </Style> </code>