locked
Changing ItemsPanelTemplate with VisualStateManager disables scrollbars RRS feed

  • Question

  • I have a GridView with an ItemPanel like this:

    <ItemsPanelTemplate x:Key="PanelTemplateLandscape">
       <WrapGrid Orientation="Vertical" />
    </ItemsPanelTemplate>


    Now if the app is changing the mode to "Snapped", I'd like to change the orientation of this WrapGrid. One way is to create a second ItemsPanelTemplate like this:

    <ItemsPanelTemplate x:Key="PanelTemplatePortrait">
        <WrapGrid Orientation="Horizontal" />
    </ItemsPanelTemplate>


    And then use the VisualStateManager with the VisualState "Snapped" to change the ItemsPanel Template like this:

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DataGrid" Storyboard.TargetProperty="ItemsPanel">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PanelTemplatePortrait}"/>
    </ObjectAnimationUsingKeyFrames>


    For completeness, here's the GridView markup:

    <GridView x:Name="DataGrid" Grid.Row="1" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" ItemsPanel="{StaticResource PanelTemplateLandscape}"    ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"    ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto">
    </GridView>

    I then filled the GridView with 100 items and upon startup, it looks good and has a horizontal scrollbar which can be used.

    Now if I "Snap" to the left, the orientation is changed and now there is a vertical scrollbar which can be used.

    Everything as expected so far.

    But if I now go back to FullscreenMode, the orientation is changed correctly, but the horizonzal scrollbar is visible but not usable. Same if I then switch back to the Snapped View, the scrollbar is visible but not usable.

    Are there known problems with changing Templates on runtime? Are there ways around this issue? Is it wrong to change Templates with the VisualStateManager?

    You can download a very simple example project top reproduce this here:

    Example

    Thanks for your help


    • Edited by Roemeeeer Monday, April 29, 2013 8:43 AM Fixed Link
    Monday, April 29, 2013 8:42 AM

Answers

  • Hi,

    I would suggest you to create two GridView to implement the layout of fullscreen and snapped perspectively. When the app is in fullscreenmode, the visibility of snapped gridview should be set to collapsed and vice versa.


    Aaron
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Aaron Xue Wednesday, May 8, 2013 10:09 AM
    Tuesday, April 30, 2013 8:44 AM