How to make Element resize from center when using Storyboard/DoubleAnimation

38 Views Asked by At

I'm quite new to WPF and I'm using WPF-UI with my project. I already created a list with a DataTemplate successfully. Now I want to have the item the scale up on mouse hover, like the image below (which I refer to WPFSample repository of MS)

When normal: enter image description here

When mouse hovers (desired): enter image description here

I've tried to apply the style from the repository to my project and adjust it to fit the style I want and it works normally. However, when the animation is running, I find out that the animation starts from the top-left corner.

My question is is there any way to make the animation scale from the center. And I prefer XAML coding more than doing some C# behind if possible??

Here is my ListItem.

 <ui:ListView x:Name="ActressListView"
              ItemsSource="{Binding ViewModel.ActressList}"
              ItemTemplate="{StaticResource ActressItemTemplate}"
              ItemsPanel="{StaticResource ActressPanelTemplate}">
     <behaviors:Interaction.Triggers>
         <behaviors:EventTrigger EventName="SelectionChanged">
             <behaviors:InvokeCommandAction PassEventArgsToCommand="True"
                                            Command="{Binding ViewModel.ActressItemClickedCommand}" />
         </behaviors:EventTrigger>
     </behaviors:Interaction.Triggers>
 </ui:ListView>

Here is my DataTemplate

<DataTemplate x:Key="ActressItemTemplate"
              DataType="{x:Type core:Actress}">
    <StackPanel Margin="8">
        <Border Width="225"
                Height="300"
                Background="{ui:ThemeResource TextFillColorDisabledBrush}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                RenderTransformOrigin="0.5, 0.5">
            <Border.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetProperty="Width"
                                                 To="262.5" />
                                <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetProperty="Height"
                                                 To="350" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetProperty="Width"
                                                 To="225" />
                                <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetProperty="Height"
                                                 To="300" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Border.Triggers>
            <ui:Image Stretch="UniformToFill"
                      Source="{Binding ActressImgUrl}" />
        </Border>
        <ui:TextBlock Text="{Binding Path=FullName}"
                      HorizontalAlignment="Center"
                      Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                      FontTypography="BodyStrong" />
        <ui:TextBlock Text="{Binding Path=AltName}"
                      HorizontalAlignment="Center"
                      Foreground="{ui:ThemeResource TextFillColorSecondaryBrush}"
                      FontTypography="Body" />
    </StackPanel>
</DataTemplate>

I'm targeting the Storyboard to the Border due to other content that I don't want to mess up with. Still not trying to target the Storyboard to the StackPanel instead yet but I think it'll still resize from the top-left corner.

P/s: I did some research but most of the solutions I found are C# code and some are not workable with the new .Net

0

There are 0 best solutions below