locked
How to achieve the holding effect in the start screen (Win8.1)?

    Question

  • Hi, Dear all,

     

    If we press one item and hold it a while in the start screen, we would see that:

    1. the picture of the item would get a little bigger;

    2. the bottom would be popped up (we could also re-name the group it but we will ignore it in this discussion);

     

    If we release the holding (without moving the item), the we would see that:

    3. the item would be selected;

    4. there are some actions that could be taken for the item appear in the bottom app bar;

     

    My question is: how could we implement the above effects?

     

    What I could get through my tests for the holding event are:

    5. I could see a UI change for the item after a while (but the item keeps unchanged after that);

    6. unless I release the holding, otherwise I wouldn't get notified in the holding event handler;

    7. even if I release the holding, the item wouldn't be selected;

     

    The tests is totally different with the system's behavior. So would you please give me some hints on how to implement the above 1~4? (or 2~4).

     

    Thank you all.




    • Edited by B0L Friday, February 21, 2014 5:35 AM
    Friday, February 21, 2014 5:31 AM

Answers

  • Hi,

    You can define a Listview/GridView DataTemplate like below:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ListView x:Name="widgetList" Margin="30" Grid.Row="2"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ListViewItem Holding="ListViewItem_Holding" IsHoldingEnabled="True" PointerReleased="ListViewItem_PointerReleased">
                            <Grid Margin="10">
                                <Image Source="{Binding Image}" Height="172" Width="172" />
                               
                               
                            </Grid>
                        </ListViewItem>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid AllowDrop="True" Orientation="Horizontal"></WrapGrid>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
        </Grid>

    In XAML above, you can define listviewitem Holding event and set its IsHoldingEnabled to true, that value determines whether the Holding event can originate from that element.So when you holding an item in listview you can scale the listviewitem width or height in the Holding event. And if you want to make an item to be selected when you release your finger, you can define ListViewItem PointerReleased event. You should make sure whether the Holding event was fired in PointerReleased event. Define a bool flag to determine whether the Holding event was fired. Some codes below you can refer to:

    MainPage.Xaml.cpp:

    MainPage::MainPage() { InitializeComponent(); auto ScenarioList = ref new Platform::Collections::Vector<Test^>(); Test ^ item = ref new Test(); item->Image = "Assets/Logo.scale-100.png"; ScenarioList->Append(item); Test ^ item1 = ref new Test(); item1->Image = "Assets/Logo.scale-100.png"; ScenarioList->Append(item1); List->ItemsSource= ScenarioList; } void listview::MainPage::ListViewItem_Holding(Platform::Object^ sender, Windows::UI::Xaml::Input::HoldingRoutedEventArgs^ e) { .....//do something about scale the listview item

    flag = true; } void listview::MainPage::ListViewItem_PointerReleased(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e) { if (flag == true) { auto listviewitem = (ListViewItem ^)sender; listviewitem->IsSelected = true; } flag = false; }

    MainPage.Xaml.h:

    public ref class MainPage sealed
    	{
    	public:
    		MainPage();
    		bool flag=false;
    		
    
    	private:
    		void ListViewItem_Holding(Platform::Object^ sender, Windows::UI::Xaml::Input::HoldingRoutedEventArgs^ e);
    		void ListViewItem_PointerReleased(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);
    	};
    	public ref class Test sealed
    	{
    		Platform::String^ _image;
    	public:
    		property Platform::String^ Image
    		{
    			Platform::String^ get()
    			{
    				return _image;
    			}
    			void set(Platform::String^ value)
    			{
    				_image = value;
    			}
    		}
    
    	};
    Best Wishes!

     

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by B0L Tuesday, February 25, 2014 1:41 PM
    Monday, February 24, 2014 6:33 AM

All replies

  • Could anybody give me any hint? Thanks. I've run the cases in SDK but gotten no luck!
    • Edited by B0L Saturday, February 22, 2014 2:13 PM
    Saturday, February 22, 2014 2:13 PM
  • Hi,

    You can define a Listview/GridView DataTemplate like below:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ListView x:Name="widgetList" Margin="30" Grid.Row="2"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ListViewItem Holding="ListViewItem_Holding" IsHoldingEnabled="True" PointerReleased="ListViewItem_PointerReleased">
                            <Grid Margin="10">
                                <Image Source="{Binding Image}" Height="172" Width="172" />
                               
                               
                            </Grid>
                        </ListViewItem>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid AllowDrop="True" Orientation="Horizontal"></WrapGrid>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
        </Grid>

    In XAML above, you can define listviewitem Holding event and set its IsHoldingEnabled to true, that value determines whether the Holding event can originate from that element.So when you holding an item in listview you can scale the listviewitem width or height in the Holding event. And if you want to make an item to be selected when you release your finger, you can define ListViewItem PointerReleased event. You should make sure whether the Holding event was fired in PointerReleased event. Define a bool flag to determine whether the Holding event was fired. Some codes below you can refer to:

    MainPage.Xaml.cpp:

    MainPage::MainPage() { InitializeComponent(); auto ScenarioList = ref new Platform::Collections::Vector<Test^>(); Test ^ item = ref new Test(); item->Image = "Assets/Logo.scale-100.png"; ScenarioList->Append(item); Test ^ item1 = ref new Test(); item1->Image = "Assets/Logo.scale-100.png"; ScenarioList->Append(item1); List->ItemsSource= ScenarioList; } void listview::MainPage::ListViewItem_Holding(Platform::Object^ sender, Windows::UI::Xaml::Input::HoldingRoutedEventArgs^ e) { .....//do something about scale the listview item

    flag = true; } void listview::MainPage::ListViewItem_PointerReleased(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e) { if (flag == true) { auto listviewitem = (ListViewItem ^)sender; listviewitem->IsSelected = true; } flag = false; }

    MainPage.Xaml.h:

    public ref class MainPage sealed
    	{
    	public:
    		MainPage();
    		bool flag=false;
    		
    
    	private:
    		void ListViewItem_Holding(Platform::Object^ sender, Windows::UI::Xaml::Input::HoldingRoutedEventArgs^ e);
    		void ListViewItem_PointerReleased(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);
    	};
    	public ref class Test sealed
    	{
    		Platform::String^ _image;
    	public:
    		property Platform::String^ Image
    		{
    			Platform::String^ get()
    			{
    				return _image;
    			}
    			void set(Platform::String^ value)
    			{
    				_image = value;
    			}
    		}
    
    	};
    Best Wishes!

     

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by B0L Tuesday, February 25, 2014 1:41 PM
    Monday, February 24, 2014 6:33 AM
  • Hi, Anne,

     

    I really appreciate your detailed reply! Thanks.

     

    The problems are that:

    1. If I don't release from the "Holding" state, I will not enter the Holding event handler with "HoldingState" as "Completed";

    2. If the item template consists of a picture and a text block, then if I hold on the picture, then the OriginalSource in the HoldingRoutedEventArgs would be the picture; If I hold on the text block, the OriginalSource would be the text block; If I hold on the border, it would be the border;

     

    The above issues are really boring.

    Monday, February 24, 2014 1:33 PM
  • Hi,

    #Do you see the sample I post in my first reply. The Holding event can fire with the HoldingState value of Started in the HoldingRoutedEventArgs event data. When the Hold action ends, another Holding event fires, this time with HoldingState of Completed. You can directly  check the HoldingState value and when the HoldingState of Completed or canceled,you can make the item to be selected.
    void listview::MainPage::ListViewItem_Holding(Platform::Object^ sender, Windows::UI::Xaml::Input::HoldingRoutedEventArgs^ e)
    {
    	
    	if (e->HoldingState == Windows::UI::Input::HoldingState::Completed)
    	{
    		auto listviewitem = (ListViewItem ^)sender;
    		listviewitem->IsSelected = true;
    	}
    }
    I do not why your holding event cannot fire, you should upload your app into skyDrive so that we can test it.

    #Holding is a routed event, the event can bubbles to a parent from an event source child element. This is by design, for more inforamtion you can refer to the Events and routed events overview

    Best Wishes!.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, February 25, 2014 7:57 AM
  • Hi, Anne, yeah, it works! Thank you very much for the second explanation!

    Tuesday, February 25, 2014 1:43 PM