Make Border Scale Up on Load WPF

Question

For the life of me, I cannot figure out why the simple setup below is not working. I just want a border to scale up ("zoom in") once its loaded, with the zoom-in functionality wrapped up in a resource style. But when the following XAML runs, the border just loads at 100% scale, no animation happens. Your help will be much appreciated!

    <Style x:Key="SZoomIn" TargetType="FrameworkElement">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>            
    </Style>
    <Style x:Key="SBorder" BasedOn="{StaticResource SZoomIn}" TargetType="Border">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    </Style>

    <!-- ....... -->

    <Border Style="{StaticResource SBorder}"/>

EDIT: I did not show the complete markup above so that things could be kept simple, but my complete markup is below. Note that, because there are buttons inside the Border, the Border does have Height/Width at run-time.

<Window x:Name="StartWindow" x:Class="MEACruncher.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:MEACruncher"
    mc:Ignorable="d"
    Title="MEA Cruncher" Height="393" Width="659" Margin="0" WindowState="Maximized">
<Window.Background>
    <ImageBrush ImageSource="Resources/NeuronBackground.jpg" Stretch="UniformToFill"/>
</Window.Background>
<Window.Resources>
    <SolidColorBrush x:Key="BabyBlue">#FF4D7EB8</SolidColorBrush>
    <SolidColorBrush x:Key="BlackBkgrd">#B2000000</SolidColorBrush>
    <Style x:Key="SBtn" TargetType="Button">
        <Setter Property="Margin" Value="0,5"/>
        <Setter Property="Background" Value="{StaticResource BabyBlue}"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="Padding" Value="10,3"/>
        <Setter Property="FontSize" Value="24"/>
    </Style>
    <Style x:Key="STopBtn" BasedOn="{StaticResource SBtn}" TargetType="Button">
        <Setter Property="Margin" Value="0,0,0,5"/>
    </Style>
    <Style x:Key="SBottomBtn" BasedOn="{StaticResource SBtn}" TargetType="Button">
        <Setter Property="Margin" Value="0,5,0,0"/>
    </Style>
    <Style x:Key="SZoomIn" TargetType="FrameworkElement">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Style.Triggers>            
    </Style>
    <Style x:Key="SBorder" BasedOn="{StaticResource SZoomIn}" TargetType="Border">
        <Setter Property="BorderBrush" Value="{StaticResource BabyBlue}"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Background" Value="{StaticResource BlackBkgrd}"/>
        <Setter Property="CornerRadius" Value="5"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    </Style>
    <Style x:Key="SStackPnl" TargetType="StackPanel">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>            
    </Style>
</Window.Resources>

<Border x:Name="MainBorder" Style="{StaticResource SBorder}">
    <StackPanel x:Name="MainStackPnl" Style="{StaticResource SStackPnl}">
        <Button x:Name="ViewProjectsBtn" Content="View Projects" Style="{StaticResource STopBtn}" Click="ViewProjectsBtn_Click"/>
        <Button x:Name="AboutBtn" Content="About" Style="{StaticResource SBtn}" Click="AboutBtn_Click"/>
        <Button x:Name="ExitBtn" Content="Exit" Style="{StaticResource SBottomBtn}" Click="ExitBtn_Click"/>
    </StackPanel>
</Border>

</Window>

Answer 1

So, as mentioned in the comments, the code that I posted here actually does work fine. The issue was with one other markup element that I left out of the original post. I created a class called DraggableArea that inherits from ContentControl, and this element surrounded my Border (see FULL markup below). DraggableArea makes any content draggable with the mouse. I left it out b/c I figured everyone would focus on that and not look at the surrounding XAML, where I was sure the problem lay. Turns out I was wrong, and as usual my custom code was causing the bug. Not sure exactly why the bug is happening yet but there you go. Thanks for all the help though!

<local:DraggableArea>
    <Border x:Name="MainBorder" Style="{StaticResource SBorder}">
        <StackPanel x:Name="MainStackPnl" Style="{StaticResource SStackPnl}">
            <Button x:Name="ViewProjectsBtn" Content="View Projects" Style="{StaticResource STopBtn}" Click="ViewProjectsBtn_Click"/>
            <Button x:Name="AboutBtn" Content="About" Style="{StaticResource SBtn}" Click="AboutBtn_Click"/>
            <Button x:Name="ExitBtn" Content="Exit" Style="{StaticResource SBottomBtn}" Click="ExitBtn_Click"/>
        </StackPanel>
    </Border>
</local:DraggableArea>

Answer 2

If above is all your XAML then change your code as following:

<Border Style="{StaticResource SBorder}" Background="Red" Height="200" Width="200"/>

You have set VerticalAlignment and HorizontalAlignment to Centera and not set aby Height & Width in Border so it will not display at all. Either give Height & Width some value or set VerticalAlignment and HorizontalAlignment to Stretch and you'll see the Animation will work fine. as below:

 <Style x:Key="SBorder" BasedOn="{StaticResource SZoomIn}" TargetType="Border">
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    </Style>

If you have some other control hierarchy then update that in question and I'll update my answer for that.

Update:

In your updated markup Border will have Height & Width at render time. But the SZoomIn style seems different from the XAML given before. You are not setting the Storyboard.TargetProperty property correctly. You are missing RenderTransform prefix in it.

so the solution is:

Replace your Storyboard in latest XAML from Storyboard in first XAML.