Habilitando ScrollViewer HorizontalSnapPoints con una colección enlazable
Estoy tratando de crear una experiencia similar a la de ScrollViewerSample desde las muestras del SDK de Windows 8 para poder ajustar los elementos dentro de un ScrollViewer cuando se desplaza hacia la izquierda y hacia la derecha. La implementación de la muestra (que funciona) es así:
<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>
La única diferencia con mi implementación deseada es que no quiero un StackPanel con elementos dentro, sino algo a lo que pueda enlazar. Estoy tratando de lograr esto con un ItemsControl, pero por alguna razón el comportamiento Snap no se activa:
<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>
¡Las sugerencias serían apreciadas grandemente!
Gracias a Denis, terminé usando el siguiente estilo en ItemsControl y eliminé ScrollViewer y los elementos en línea 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>