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:

When mouse hovers (desired):

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