none
WPA8.1: Sorting ListView RRS feed

  • Question

  • Hello,

    I my Windows Phone Universal app, I have a ListView to show some data (Position, Name, Total1, Total2). I need to enable to user to sort the listview either by column Total1 or Total2. Unfortunately sorting is not available via the CollectionViewSource in Universal Apps, so I need to look at other possibilities.

    One option I looked at was to go the root of the Windows Phone Dev Center app where the put a Textblock on the page and when clicked on, a "ListPicker" is shown to the user showing the available sort columns.

    My problem with this approach is that you cannot attach a FlyOut to a TextBlock control...

    Does anybody got any ideas on how I can implement the TextBlock and listpicker idea in a universal app, or is there any other options that I can maybe look at?

    Any idea would be appreciated. Universal apps and controls that go with that is a bit limited at this point in time.

    Thanks,

    MS

    Friday, September 5, 2014 1:46 PM

Answers

  • No that didn't really help much...

    The reordermode of the listview won't help as the sorting needs to happen on a property value in the list, not a reorder by the user. The info on the flyout has been quite limiting in that article, but I did however manage to find something else.

    In the first link, I saw how you make use of an attached Flyout. That is pretty nifty. The problem is that you can attach the flyout, but when you click on the TextBlock, the flyout does not open. You have to create a Behavior Action to execute the opening of the flyout - second link.

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn308515.aspx

    http://windowspak.com/using-a-behavior-to-open-attached-flyouts-in-windows-8-1-store-apps/

    This looks as though it works.

    For the sake of completeness:

    <TextBlock Text="{Binding SortType}" Margin="3,0,0,0">
                        <FlyoutBase.AttachedFlyout>
                            <ListPickerFlyout ItemsSource="{Binding SortProperties}" Placement="Full" />
                        </FlyoutBase.AttachedFlyout>
                        <i:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Tapped">
                                <common:OpenFlyoutAction />
                            </core:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                    </TextBlock>

    public class OpenFlyoutAction : DependencyObject, IAction
        {
            public object Execute(object sender, object parameter)
            {
                FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
                return null;
            }
        }

    • Marked as answer by Marais van Zyl Friday, September 5, 2014 6:05 PM
    Friday, September 5, 2014 6:05 PM

All replies

  • Hi there, may be this link helps you.

    Regards.


    Christian Amado | Software Engineer | MCPD: Windows Phone Developer | MCTS: Silverlight Developer

    Friday, September 5, 2014 2:22 PM
  • No that didn't really help much...

    The reordermode of the listview won't help as the sorting needs to happen on a property value in the list, not a reorder by the user. The info on the flyout has been quite limiting in that article, but I did however manage to find something else.

    In the first link, I saw how you make use of an attached Flyout. That is pretty nifty. The problem is that you can attach the flyout, but when you click on the TextBlock, the flyout does not open. You have to create a Behavior Action to execute the opening of the flyout - second link.

    http://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn308515.aspx

    http://windowspak.com/using-a-behavior-to-open-attached-flyouts-in-windows-8-1-store-apps/

    This looks as though it works.

    For the sake of completeness:

    <TextBlock Text="{Binding SortType}" Margin="3,0,0,0">
                        <FlyoutBase.AttachedFlyout>
                            <ListPickerFlyout ItemsSource="{Binding SortProperties}" Placement="Full" />
                        </FlyoutBase.AttachedFlyout>
                        <i:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Tapped">
                                <common:OpenFlyoutAction />
                            </core:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                    </TextBlock>

    public class OpenFlyoutAction : DependencyObject, IAction
        {
            public object Execute(object sender, object parameter)
            {
                FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
                return null;
            }
        }

    • Marked as answer by Marais van Zyl Friday, September 5, 2014 6:05 PM
    Friday, September 5, 2014 6:05 PM