locked
Show buttons on ListViewItem mouseover RRS feed

  • Question

  • Hi,

    in my app I would like to show a set of buttons only when the mouse is over a ListViewItem, like in Windows 8.1 mail app.

    Which is the best way to implement this behavior?


    Thursday, December 26, 2013 7:10 AM

All replies

  • Hi, OasisLiveForever.

    You can write self template with visual states. In template put your images and in visual states (when, for example, occured pointer over event ) display this images. You can do this with visibility property.

    Regards, Nikita.

    Thursday, December 26, 2013 7:51 AM
  • Hi,

    I tried to use visual states in my ListView DataTemplate but it seems PointerOver visual state isn't working.
    This is my data template:

    <DataTemplate x:Key="MyItemTemplate">
    	<Grid Width="420" Height="140">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="CommonStates">
    				<VisualState x:Name="Normal"/>
    				<VisualState x:Name="PointerOver">
    					<Storyboard>
    						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="TestButton">
    							<DiscreteObjectKeyFrame KeyTime="0">
    								<DiscreteObjectKeyFrame.Value>
    									<Visibility>Visible</Visibility>
    								</DiscreteObjectKeyFrame.Value>
    							</DiscreteObjectKeyFrame>
    						</ObjectAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		
    		<Button x:Name="TestButton" Content="Test" Visibility="Collapsed" />
    	</Grid>
    </DataTemplate>

    Thursday, December 26, 2013 8:17 AM
  • Try
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TestButton">
      <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
    </ObjectAnimationUsingKeyFrames>


    Thursday, December 26, 2013 8:41 AM
  • Hi,

    since I want to show the button when pointer is over the item I think I should set Visibility to Visible and not to Collapsed.
    The animation you provided is the same as mine but in abbreviated form and is not working as mine.

    Thursday, December 26, 2013 9:31 AM
  • Hi Oasis,

    There is a big chance that the control cannot detect the PointerOver VisualState, could you try to set a background for your container to see if the same thing happen.

    --James 


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" 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.

    Friday, December 27, 2013 7:09 AM
    Moderator
  • Hi,

    I tried to set background but it doesn't work.

    If I remember correctly, there is a video from Build 2013 that explains how Windows 8.1 Mail App was built and to obtain this behavior the dev team had to extend ListView.

    Friday, December 27, 2013 7:39 AM
  • Hi Oasis,

    Yes, you could modify the template for ListViewItemPresenter class, it is a extend to a listview, but I'm not able to figure it out how to. Meanwhile to define a PointerEnter and PointerExist could also be "a kind of solution".

    All the store app videos for Build 2013 are listed in Channel 9: http://channel9.msdn.com/Events/Build/2013?sort=sequential&direction=desc&term=&t=windows-store&t=windows-store-apps

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" 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.

    Monday, December 30, 2013 6:29 AM
    Moderator
  • Old thread, but I figured it out and wanted to share:

    Subclass the ListViewItemPresenter:

    public class ModifiedListViewItemPresenter : ListViewItemPresenter { public bool IsPointerOver { get { return (bool)GetValue(IsPointerOverProperty); } set { SetValue(IsPointerOverProperty, value); } } // Using a DependencyProperty as the backing store for IsPointerOver. This enables animation, styling, binding, etc... public static readonly DependencyProperty IsPointerOverProperty = DependencyProperty.Register("IsPointerOver", typeof(bool), typeof(ModifiedListViewItemPresenter), new PropertyMetadata(false)); public ModifiedListViewItemPresenter() { this.PointerEntered += ModifiedListViewItemPresenter_PointerEntered; this.PointerExited += ModifiedListViewItemPresenter_PointerExited; } private void ModifiedListViewItemPresenter_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e) { IsPointerOver = false; } private void ModifiedListViewItemPresenter_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e) { IsPointerOver = true; } }

    Then replace the ListViewItemPresenter with this one in the style of a ListViewItemContainer.  Then, in the DataTemplate of the ListView, use this binding syntax in order to detect PointerOver. 

    <Button Style="{StaticResource SmallInfoButtonStyle}"
                                Visibility="{Binding IsPointerOver,
                                             Converter={StaticResource BooleanToVisibleConverter},
                                             Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>


    Lee McPherson

    • Proposed as answer by Lee McPherson Sunday, May 31, 2015 2:22 AM
    Sunday, May 31, 2015 2:20 AM