How to add hover animations for ListViewItems similar to the oficial Windows 10 Photos app

Question

I would like to add an animation like this to my own ListView:

As you can see, it zooms in/out the content of the ListViewItem when the mouse is hovering. This is the behavior of the oficial Windows 10 application called Microsoft Photos.

Is there an automated way to do it, preferably using a XAML-only approach?

Answer 1

Is there an automated way to do it, preferably using a XAML-only approach?

Sure, you could edit the default ListViewItem style and add DoubleAnimation to PointerOver state to animate ScaleTransform . I have made the complete style for this question, you could use it directly.

 <Style  TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
            <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
            <Setter Property="TabNavigation" Value="Local" />
            <Setter Property="IsHoldingEnabled" Value="True" />
            <Setter Property="Padding" Value="12,0,12,0" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
            <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
            <Setter Property="AllowDrop" Value="False" />
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
            <Setter Property="FocusVisualMargin" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <ListViewItemPresenter
                            x:Name="Root"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                            CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                            CheckMode="{ThemeResource ListViewItemCheckMode}"
                            ContentMargin="{TemplateBinding Padding}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Control.IsTemplateFocusTarget="True"
                            DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                            DragBackground="{ThemeResource ListViewItemDragBackground}"
                            DragForeground="{ThemeResource ListViewItemDragForeground}"
                            DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                            FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                            FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                            FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                            PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                            PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                            PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                            PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                            ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                            RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                            RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}"
                            RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                            SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                            SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                            SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                            SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                            SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                            >
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Selected" />

                                    <VisualState x:Name="PointerOver">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                        </VisualState.Setters>
                                        <Storyboard>
                                           <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"  From="1" To="1.5" Duration="0:0:0.1"/>
                                        <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"  From="1" To="1.5" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="PointerOverSelected">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="PointerOverPressed">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                    <VisualState x:Name="Pressed">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                    <VisualState x:Name="PressedSelected">
                                        <VisualState.Setters>
                                            <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                            <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="DisabledStates">
                                    <VisualState x:Name="Enabled" />

                                    <VisualState x:Name="Disabled">
                                        <VisualState.Setters>
                                            <Setter Target="Root.RevealBorderThickness" Value="0" />
                                        </VisualState.Setters>
                                    </VisualState>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>
                            <ListViewItemPresenter.RenderTransform>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                            </ListViewItemPresenter.RenderTransform>
                        </ListViewItemPresenter>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>