locked
LIST VIEW VS STATE MANAGER RRS feed

  • Question

  • Ref. "XAML ListView and GridView essentials sample" (for Win 8.1) I tried to implement VisualStateManager to take care of rotation Landscape - Portrait. You can find my project at the following link (you will require some folders from the original sample):
    https://skydrive.live.com/redir?resid=DD81C6C8181B3CF5!653&authkey=!AA9hXE_c62anX-c&ithint=folder%2c.xaml

    In Scenario3 I added the following:

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="OutputDefaultLayout"/>
                        <VisualState x:Name="OutputBelow768Layout">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetProperty="(ListView.Height)"
                                    Storyboard.TargetName="ItemListView">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="900"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
    (just changes the height of the list)

    Incidentally, I had to correct a method in LayoutAwarePage:

            protected virtual string DetermineVisualState(double width)
            {
                return (width < 768)? "Below768Layout" : "DefaultLayout";  //**
            }

    In Portrait the width of my screen is exactly 768, so this method always reports "DefaultLayout" - I just changed the comparison from '<' to '<='.

    In Simulator mode, rotating from landscape to portrait works fine - the list changes height as expected.
    BUT: if I select an item, after rotation the list does not have focus and the Up and Down arrows do not have any effect.

    I tried adding the following code in Scenario 3:

            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                this.rootPage.MainPageResized += PageResized;
            }

            protected override void OnNavigatedFrom(NavigationEventArgs e)
            {
                this.rootPage.MainPageResized -= PageResized;
            }

            private async void PageResized(object sender, MainPageSizeChangedEventArgs args)
            {
                await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Low, () =>
                {
                    ItemListView.Focus(FocusState.Programmatic);
                });
            }

    But nothing changes (regardless of using Dispatcher or not).

    The situation is even worse in the following: I created a new Scenario 7 which is the same as Scenario 6 but with ListView rather than GridView; I also tried using different DataTemplates:

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="OutputDefaultLayout"/>
                        <VisualState x:Name="OutputBelow768Layout">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetProperty="(ListView.Height)"
                                    Storyboard.TargetName="ItemListView">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="900"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames
                                    Storyboard.TargetProperty="(ListView.ItemTemplate)"
                                    Storyboard.TargetName="ItemListView">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource StoreFrontTileTemplatePortrait}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
    (the default is StoreFrontTileTemplateLandscape)

    Rotation works fine as long as there is no selected item in the list; when I select an item, the rotation produces an exception and I verified that in CustomListViewItemPresenter: _contentGrid and _parentListView are null.

    Any clue on these issues?


    • Edited by GiorgioITA Tuesday, January 14, 2014 4:06 PM
    Tuesday, January 14, 2014 10:52 AM

Answers

  • 1) I am not able to reproduce this in the simulator.

    2) What does this code do?

      private void ShowFocusVisuals()
            {
                // create the elements necessary to show focus visuals if they have
                // not been created yet.       
                if (!FocusElementsAreCreated())
                {
                    CreateFocusElements();
                }
    
                // make sure the elements necessary to show focus visuals are opaque
                _focusVisual.Opacity = 1;
            }
    In the end, you're just running into NRE issues. I don't know if it's worth continuing the troubleshooting if this isn't showing a bug in the WinRT APIs. Do you think it is?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by GiorgioITA Tuesday, January 21, 2014 8:30 PM
    Tuesday, January 21, 2014 2:54 PM
    Moderator

All replies

  • Can you please post a zipped up, complete project on Skydrive?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, January 14, 2014 8:11 PM
    Moderator
  • I did - see my link.

    You should:

    1. Download the sample from MS (will give you the folders Assets, common, Properties, SampleData and sample_utils that I did not change)

    2. Copy my files into the project (overwriting the sample's, including common\LayoutAwarePage.cs)

    Tuesday, January 14, 2014 8:51 PM
  • OK, I zipped the entire project - including all the MS folders; you can find it at:

    https://skydrive.live.com/redir?resid=DD81C6C8181B3CF5!689&authkey=!AKlhWsWSy2j2MuE&ithint=folder%2c.zip

    Tuesday, January 14, 2014 9:52 PM
  • Can you give me exact steps to reproduce the problem?  I am not familiar with this sample and don't see any obvious way to select Scenarios 3 or 7.


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, January 17, 2014 2:04 PM
    Moderator
  • First of all, my apologies for my obscure language. I'll try to provide better explanation.

    'Scenario 3' and 'Scenario 7' refer to the original MS sample; this sample demonstrates the use of ListView and GridView in samples numbered 1..6; Sample 6 uses GridView, I added Sample 7 which is similar but uses ListView. In the end, the project MySample - that I assume you downloaded from SkyDrive - retains only Sample 3 and 7.

    You should run MySample in VisualStudio 2013 Express, in Simulator mode.

    On the top left you will see a ListBox showing two options:

    - Instantiating a ListView (this is Scenario 3)
    - Custom item container template structure - ListView (this is Scenario 7)

    When you select any of them they show exactly the same list of data - but the code implementation is different.

    A. Test "Instantiating a ListView". When you click on an item, it becomes selected (indicated by the glyph); then you can change the selection by means of the Up and Down keys.
    If you now simulate rotating the screen, the list will show with the same item selected, but the Up and Down keys are ineffective - meaning that the ListView did not receive focus. Looking in the code of Scenario3.xaml.cs you will see that I tried to force Focus(Programmatic), with no effect.

    B. Test "Custom item container template structure". As long as no item is selected, the list accepts rotating the screen (I slightly changed the template in landscape, but the data is the same). When you click on an item and select it (indicated by a green rectangle surrounding the item), you can again change the selection by means of the Up and Down keys.
    With an item selected, simulate rotating the screen: you get an exception at an instruction in CustomListViewItemPresenter.cs; after Break, explore 'this': you will see that _containerGrid and _parentListView are null, this is in fact the reason for the exception.

    Both results are odd, in particular Test B is catastrophic!

    Friday, January 17, 2014 6:14 PM
  • 1) I can't reproduce the problem with the Up/Down keys on my machine.  Does it reproduce for you anywhere else?

    2) The _parentListView is null because you've reinstantiated CustomListViewItemPresenter without calling OnApplyTemplate, which does the assignment of the _parentListView and _contentGrid. To be honest, I don't really know what this is supposed to be accomplishing.


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Friday, January 17, 2014 7:35 PM
    Moderator
  • 1) I am very much puzzled by this - are you implying that there might be something wrong in my computer? Unfortunately I do not have another computer with Win 8.1 and VS 2013 handy, so I am unable to perform this test on a different platform.

    I would really appreciate it if somebody in the community, after reading this thread, tries it. One can try the original MS sample, Scenario 6 (which is a GridView): it allows selecting an item and selection will move with the Up /Down keys; however, in my computer after rotation the Up / Down keys become inoperative - the question is: does it happen on other computers?

    2) I agree with your conclusion. I should insert an explicit call of ApplyTemplate somewhere - WHERE?

    Incidentally, this problem is due to the fact that I am trying to change the item template for Landscape / Portrait: the program runs normally when I comment out this portion in VisualStateManager.

    Scenario 6 and 7 are simply a different approach to implement the ListView, as demonstrated in the MS sample. Personally, I would prefer using the CustomListViewItemPresenter because it allows me more flexibility in designing the layout of the item: for instance, I do not like the selection glyph that comes standard.

    Saturday, January 18, 2014 8:50 AM
  • Ref. 1) Perhaps the issue stays in the Simulator mode; I verified (also with other programs) the following behavior:

    - Start the program
    - Select any item, button, etc.
    - The Tab key will move focus between the tab-stop items in the screen

    - Simulate a rotation
    - Now the Tab key moves focus around the buttons of the simulator, NEVER goes back to the presentation screen.

    Probably the issue that I observed would not happen in a tablet when you really rotate it. My computer does not support this, I can only use the simulator.

    Saturday, January 18, 2014 9:14 AM
  • 1) I am not able to reproduce this in the simulator.

    2) What does this code do?

      private void ShowFocusVisuals()
            {
                // create the elements necessary to show focus visuals if they have
                // not been created yet.       
                if (!FocusElementsAreCreated())
                {
                    CreateFocusElements();
                }
    
                // make sure the elements necessary to show focus visuals are opaque
                _focusVisual.Opacity = 1;
            }
    In the end, you're just running into NRE issues. I don't know if it's worth continuing the troubleshooting if this isn't showing a bug in the WinRT APIs. Do you think it is?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by GiorgioITA Tuesday, January 21, 2014 8:30 PM
    Tuesday, January 21, 2014 2:54 PM
    Moderator
  • You are absolutely right: it's not worth spending any more time to investigate a problem that obviously is not due to a bug in my code. In fact I observe the same issue even when I run e.g. Word from within the Simulator.

    I wonder what's wrong with Simulator in my computer.

    Thank you very much for your support.

    Tuesday, January 21, 2014 8:34 PM